AnnieCannons
Getting Started with CSS, v2
3 hours, 2 minutes
CC
Course Description
Build a modern portfolio with CSS! Learn the foundations of layout and UI design as you explore semantic HTML markup, navigation styles, media queries, and CSS custom properties. Give the portfolio extra polish with light and dark themes. Deploy your portfolio to GitHub Pages and showcase your work to the world!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: June 18, 2025
Rating
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 14 minutes
Jen Kramer introduces the course, which includes building a single-page portfolio website using HTML and CSS. You'll learn to create sections of the page using CodePen, transition to VS Code for editing, and publish your site online via GitHub.
Jen discusses developing effective portfolio materials to stand out in job applications. She provides guidance on creating portfolio artifacts that align with career goals, including project titles, screenshots, problem-solving narratives, and code samples.
Portfolio About Me Section
Section Duration: 57 minutes
Jen walks through coding the About Me section, demonstrating how to structure the content, add social media icons from Font Awesome as SVGs, and ensure accessibility by using the title tag. Jen also highlights the significance of styling and provides a finished HTML version for reference.
Jen discusses CSS custom properties for color and spacing, along with key layout and typography techniques like box-sizing, calc(), rem and em units, line-height, and margin collapsing.
Jen demonstrates how to use Flexbox to style a vertical list of links horizontally. She uses properties like display: flex, flex-flow: row wrap, and adjusts align-items, gap, and alignment settings for better layout and mobile usability.
Jen covers building a responsive layout using semantic HTML, a centered wrapper with max-width, and CSS Grid and Flexbox. She also shows how to crop images on mobile using object-fit and object-position.
Jen demonstrates how to use media queries to adjust padding, columns, alignment, image, and font sizes for desktop. She also highlights matching the display size to the media query, using variables for scalable design, and tips for text alignment.
Portfolio Footer & Projects
Section Duration: 45 minutes
Jen instructs students to practice marking up the footer section of a webpage using HTML to semantically identify the elements.
Jen walks through styling the website footer, including centering text, removing list bullets, organizing content into columns, adjusting spacing, and changing icon colors.
Jen adjusts the layout for mobile display and implements the desktop display by adding styles within a media query. She aligns elements, adjusts grid-template columns for the footer, and notes how the font size automatically adjusts due to a previously set generic style for the entire page.
Jen instructs students to markup the HTML for the Project section of the course webpage. She also walks through a possible solution, organizing content for layout purposes, using elements like divs and articles to group and structure the project information effectively.
Jen demonstrates how to style a layout for mobile devices, focusing on centering content, adding spacing between elements, and consistent design for each project section. Jen also emphasizes the use of semantic HTML and CSS properties like display: flex and grid-template-columns to achieve the desired layout.
Jen demonstrates styling the skills list with properties like background-color, color, padding, and border radius to achieve the desired look. Jen also explains how to use Flexbox to display the skills horizontally and how to make images stand out by adding borders or drop shadows.
Jen demonstrates how to adjust media queries for specific elements, like images, to keep them visually effective on all screen sizes. Using targeted breakpoints for things like images and text alignment helps improve the design without affecting performance.
Jen walks through combining the previously built sections of the webpage, including the about section, project section, and footer section, into a single page.
Adding a Light/Dark Theme Switcher
Section Duration: 35 minutes
Jen demonstrates how to implement light-dark mode using CSS using your operating system's settings to automatically adjust the webpage's appearance based on the user's system preferences. By setting the color scheme to light or dark in CSS, users on Mac or Windows can experience the color scheme change without manual toggling.
Jen demonstrates how to create CSS variables with light and dark options for colors using the light-dark function. This approach enhances accessibility by adjusting colors for better contrast based on the selected mode.
Jen explains how to create a color scheme switcher using CSS without JavaScript using the checked pseudo-class with radio buttons. She demonstrates adding radio buttons in HTML, styling them with CSS, and using the has selector to change the color scheme based on the checked state of the radio buttons.
Jen walks through how to style two radio buttons into a switch using CSS, inspired by Scott O'Hara's method. She demonstrates the HTML and CSS adjustments needed to achieve the switch effect, ensuring accessibility and browser compatibility.
Deploying Portfolio to GitHub Pages
Section Duration: 28 minutes
Jen demonstrates how to move the previously created webpage from CodePen to files in Visual Studio Code. This includes setting up folders for images and CSS, creating an index.html file, copying over HTML and CSS code, linking files, and managing images locally.
Jen walks through how to use GitHub and GitHub Pages to take the website live. She also covers setting up a GitHub account, creating a repository, and configuring GitHub Desktop.
Jen demonstrates how to set up a GitHub repository for hosting your portfolio website using GitHub Pages. The walk through includes signing up for GitHub, creating a repository with a specific name format, setting up GitHub Desktop, adding files to the repository, and publishing the branch.
Wrapping Up
Section Duration: 1 minute
Jen wraps up the course with a brief summary of key topics and suggests next steps for diving deeper into CSS.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops