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

Laying the Groundwork for Web Development with HTML and Accessibility


3 min read

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.

Bear in mind, each section usually has several links that you should read through. If there is no link in the body of the sections, then the heading is the link to the resource you should learn.

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.

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).


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.

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.

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.