Getting Started with CSS, v2

Get to know CSS in the right way without the fluff by building a portfolio site.

Key Takeaways

By participating along with us in the workshop, you'll learn:

• 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 Workshop 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.

Workshop Details

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.

Any Prerequisites?

Basic HTML and CSS experience would be helpful. The free Frontend Masters Bootcamp is a great resource to prepare for this workshop.