Jen Kramer, Freelance Instructor

Getting Started with CSS v2

Learn the basics of CSS by building your first single-page website.

Learn CSS as you create your page, learning techniques that you will carry into future CSS work.

Logo for the course. Frontend Masters produced this course.

This course is available by subscription to Frontend Masters.

Watch the course

Chapter Listing

About This Course

Starting with provided content or your own, create a portfolio site using a simple design system, semantic HTML, grid-based layouts, responsive design, and a light/dark color scheme easily switched by the user. You’ll leave this course with a worksheet for developing effective portfolio content. You’ll also have a solid grasp on setting up a design system using CSS variables, and using those variables to create a light/dark color scheme. You’ll get more practice with grid-based layouts, and you’ll learn to organize your content to tell a coherent story. By the end of this course, you’ll have a simple one-page portfolio website with all of your basic information included, as well as a plan for next steps to make the site your own.

Course Objectives:

  • Identify, construct, and include relevant information to make a stronger portfolio
  • Code a website using HTML and CSS to market your skills
  • Associate the appropriate semantic HTML elements in your design
  • Leverage CSS variables to create a design system
  • Apply the new light-dark() CSS property to set up a configurable light/dark color scheme
  • Construct grid-based, responsive layouts
  • Include accessible social media icons

Is This Course for Me?

Junior developers will get more practice with applying HTML and CSS to real-world content while solving a real-world problem. Junior developers will also benefit from a portfolio that’s easily updated to reflect new project work. Senior developers will benefit from a rapid HTML and CSS review. This is best for senior developers who don’t frequently use HTML and CSS, or don’t necessarily understand how these languages work.

Any Prerequisites?

  • Complete the HTML and CSS portions of the Frontend Masters Bootcamp
  • Understand how files and folders work.
  • Patience, a willingness to ask questions, and an open mind to working with CSS!