Code Review – HTML/CSS

Episode 01

Watch the following series of code reviewing videos and learn about the techniques and practices that will make you a better Frontend developer

PART I

Duration: 32 minutes

What you’ll learn:

• How to organize your HTML code with commented and formatted sections.

• Create a Table of Contents with internal links

• Apply a smooth scrolling for internal links

  • Smooth Scrolling
  • Video segment

• Create a hover effect on links using the :hover CSS pseudo selector

  • Video segment

• Validate your HTML code through the W3C Validator and fix page errors

  • W3C Markup Validation Service
  • Meta Description
  • How to add a meta description tag
  • Video segment

• Learn about the permitted content of the ul and p tags and the HTML Phrasing content

  • The Paragraph element
  • HTML Phrasing Content

• Better naming for your files and folders

• Use the VSCode Code Spell Checker extension to catch mispelled words

• Validate your CSS code through the W3C CSS Validator

  • CSS Validation Service
  • Video segment

• Replace generic elements (div) with semantic HTML elements

  • Video segment

• Use the Chrome Lighthouse auditing tool to improve our site’s performance, SEO, accessibility and best practices score

  • Video segment

PART II

Duration: 14 minutes

What you’ll learn:

• Compressing images for faster web page loading times

  • ImageOptim (Mac)
  • TinyPNG

• Limit your text lines length for readability

  • Building a design system – Line Length

• Learn about the ch unit length and the max-width property in CSS

• Best practices: avoiding the br tag for creating newlines and paragraphs

PART III

Duration: 5 minutes

What you’ll learn:

• How to use the Chrome Code Coverage Tool to detect unused CSS code.
  • Run Commands With The Chrome DevTools Command Menu
  • Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools

PART IV

Coming soon…*

UPDATED: 25.01.2021