How This Course Works & Best Practices

General Instructions

This course is designed for a variety of knowledge levels and experience with HTML and CSS. JavaScript is not required for this course. It’s possible that you’re taking this course as a JavaScript or programming expert, but with less experience in HTML and CSS. It’s also possible that you are just starting your web development journey, and you need to practice your HTML and CSS skills.

There are five challenges in this course. For each challenge, there are instructions about what you should watch out for, plus a few tips about how to increase or decrease the difficulty of the problem.

Challenges are presented in CodePen, because this focuses you on HTML and CSS, not on workflows, frameworks, libraries, or any other distraction. If you prefer to download the assets and build in your own environment, you are welcome to do so.

CodePen Collection

For Best Results

Each challenge is best approached with the following four steps:

  1. Study the screenshots. Consider what approach you might take to solve the problem and (ideally) why you are choosing that approach.
    • All problems should be solved mobile-first. However, if you want the challenge of working desktop-first, have at it!
    • Consider the content that is being presented. How might you best mark it up so that the meaning of the content is presented via HTML?
    • What problems or pitfalls might you encounter along the way? Remember that if you can’t figure out how to solve a desktop layout problem, perhaps you can solve the mobile and tablet problems.
  2. Mark up the HTML.
    • Don’t worry about any <div> or <span> elements that might be required for layout. Classes are not required to be assigned on this first pass unless you wish to do so.
    • You may revisit your HTML to tweak it at any time. However, most of your semantic elements should be set in this first pass.
  3. Build the mobile layout. A good starting point is a 350px wide window. Remember you can set this easily in CodePen while you are working.
  4. When mobile is in place, add the additional breakpoints. You should be able to use the same HTML for all layouts when done correctly.

Jen's approach

In the solutions, Jen will model these four steps for each challenge. There are intermediate CodePen starting and ending states for each of these stages.

In the first CodePen challenge, we'll create a styleguide that will be used for base styling in the other challenges. This is an excellent way to set fonts and colors before moving on to more complicated aspects of styling.