Mastering Front-End Development - Stage 1: The Backbone of Web Pages (Html and accessibility)

After gaining an understanding of web technologies in our journey, web infrastructure, and the basics of what happens behind the scenes, we are ready to move on to the next step.

This step is one of the easier ones, but we should not neglect its importance since it will create a solid foundation for building web pages and learning a bit about accessibility in web development. in this part we will learn about HTML, forms and accessibility.

Basics of HTML

HTML Tutorial by w3schools 🆓

w3schools is a solid resource that every web developer should read through at least once. Its articles are easy to understand and filled with various examples. It doesn't go very deep, but it's a good starting point.

This page has many sections, but for now, reading the HTML Tutorial section is enough. After you opened the link (⬆️), take a look at the left sidebar and read all the parts in the HTML Tutorial section (From HTML Home To HTML Vs. XHTML).

Structuring the web with HTML by MDN 🆓

MDN is one of the best resources on the web, and when you find something from MDN, you should read and learn it thoroughly.This tutorial consists of three modules, and each one has sub-modules.

These are the three modules. Please read each module and its sub-modules carefully.

• Introduction to HTML

• Multimedia and embedding

• HTML tables

Semantic HTML by tutsplus 🆓

After you learn the basics of HTML, it's important to use elements in their appropriate and meaningful places. Now, it's time to learn about HTML semantics. Go ahead and watch this tutorial, which is short (around 40 minutes).

Forms

HTML Forms by w3schools 🆓

In this section we will learn about forms and different form inputs. This tutorial consists of 6 parts, and you should read them all.

Web form by MDN 🆓

Here we are again with another amazing tutorial from MDN. Just read the following links, as we only need these ones for now.

• Web form building blocks

• Your first form

• How to structure a web form

• Basic native form controls

• The HTML5 input types

• Other form controls

• Client-side form validation

• Sending form data

Accessibility in html

It's important to use these technologies responsibly to ensure accessibility for all users. so we are going to scratch the surface of accessibility by learning accessibility in HTML.

Accessibility Guidelines by w3schools 🆓

This tutorial is excellent for building a solid understanding and foundation of accessibility and what it is.

Accessibility by MDN 🆓

This is a more in depth and practical tutorial about accessibility by MDN. (Skip the CSS and JavaScript sections for now)

References for what you learned

HTML is a language with numerous elements and attributes that can be easy to forget over time. To help you keep track of these, here are some valuable references, feel free to give them a visit every now and then.

• HTML elements reference by MDN 🆓

• HTML Reference by htmlreference.io 🆓

• HTML References by w3schools 🆓

To be continued

In this post, we covered the fundamentals about HTML, Forms and Accessibility. In the upcoming parts, we will dive deeper into more advanced topics. Stay tuned for the next part, where we will continue to expand our knowledge and explore these exciting topics in greater detail.

Don't miss the next part by subscribing to my newsletter.