DEV Community

Sarah Dye
Sarah Dye

Posted on

Day 14: HTML & CSS Best Practices

Today’s Progress

Today’s lesson is about HTML and CSS best practices. By now you know the basics of HTML and CSS so you are ready to start building websites. Before you can start working on a website, Skillcrush uses this lesson to go over the do’s and don’ts developers need to know so they can avoid errors as well as keep up web standards all developers follow.

Adda has two videos. One covers the best practices for HTML and the other goes over the ones for CSS. I’ve already written a post in my Skillcrush 101 series about both HTML & CSS practices so head over there to read an more in-depth review of these practices.

All you need t know is that the best practices help make your cod future proof so you and other developers can understand what your code is doing.

Quiz and Coding Activities

Today I missed several questions on the quiz. I mised main and h1 tags for the drag and drop. Then I forgot a comma after my header in one of the fill in the blank questions.

I put one underscore instead of two in another fill in the blank question. Finally, I picked header as one of the tags that you need for HTML to be valid when it doesn’t need to be. The coding activities went much better.

I used the validators to check the HTML & CSS code. Using a validator means copy-pasting code often in whatever resource you pick to see the errors and then going back to your text editor to fix the code before you repeat the process to get the green no errors banner.

Tomorrow’s Plan

The next lesson is called Get Ready to Code a Website. This lesson is where students get the raining wheels taken off and can begin building their first big project. In this lesson, this is all about set up.

Skillcrush goes over text editors, putting togethe a workspace, and details for the project students will be building. I’ll be using CodeSandsBox for these lessons to get some practice using this online text editor. Although Skillcrush will recommend text editors you can download and install on your computer, I want to practice using some of the online ones plus I’ll be able to better share my code with you on these posts.

Resources

Skillcrush HTML & CSS FAQ
Stack Overflow
Codecademy HTML & CSS Tutorial

HTML 

W3Schools HTML Element Reference
MDN HTML Elements Reference

CSS

W3 Schools CSS Reference
MDN CSS Reference Index
CSS Tricks

Accessibility

WebAIM Color Contrast Checker
Color.review
ColorHexa
A11yproject Checklist

This post was written on December 24, 2024 during the 2024 holiday break.

Top comments (0)