🔰 Using semantic HTML elements

Using semantic HTML elements is the first step to building an accessible website.

👀 Most often, people enter into the world of web development (including myself) without a formal introduction of different elements offered by HTML, and discover it rather later.

So it might catch them by surprise the sheer number of different elements that the markup language offers.

❓ Why should you use them?

▪️ To help assistive technologies like screen readers provide a better experience for their users to navigate your page

▪️ Improves SEO

Each semantic element has a specific meaning, and needs to be used in the appropriate context

🔰 Useful CSS Snippets

🔰 Areas in CSS

Grids are a very cool feature in CSS. Imagine building layouts like these without display: grid; 😲

In grids, the grid template areas property is handy to visualize what the output grid will look like.

Here we have a 3x3 grid, with the first image alone occupying 2x2. The areas definition literally mimics the same!

It is very useful for such use cases.