Getting Started with CSS

Jen Kramer

Jen Kramer

AnnieCannons
3 hours, 19 minutes CC
Getting Started with CSS

Course Description

Get to know CSS in the right way without the fluff. You'll style text, build navigation bars, headers/footers, add icons, and more. You'll even build a professional portfolio website by the end of the course!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: December 14, 2021

Topics

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 14 minutes

Text

Section Duration: 42 minutes
  • Creating HTML Text Practice
    Jen provides a short exercise to practice designating the HTML markup, including paragraph tags and creating links, for the introduction section of the course project. A discussion of the reasoning behind the choices of HTML markup and a student's question regarding the use of span are also covered in this segment.
  • Variables & Styling Setup
    Jen walks through setting up custom CSS variables to contain specific values to be reused throughout the document and briefly discusses the border-box model. Student questions regarding what the difference is between the root pseudo class and the universal selector and the meaning of the double colon are also answered in this segment.
  • Styling HTML Text
    Jen live codes implementing the CSS styling for the text portion of the course project including overriding the default margins and setting text colors. Unlike vertical padding, which add to each other, vertical margin values will collapse and inherit the largest margin value when combined.
  • Styling the Intro Section
    Jen demonstrates adding styling to the intro section of the course project including padding, font-size, and adding a dynamic line height. How to apply different font types in the same paragraph element and shift the span to a new line is also covered in this segment.
  • Styling Text Exercise
    Students are instructed to adjust the text in the "Contact me" section, mark up the appropriate HTML, create an email link, and add styling using CSS to make it look similar to the screenshot provided.
  • Styling Text Solution
    Jen walks through the solution to the styling text exercise. - Jen Kramer introduces the course by discusses the end goal .

Navigation

Section Duration: 38 minutes
  • Nav Bar HTML Practice
    Jen walks through creating the appropriate HTML markup for each of the pages in the course project's navigation bar. A walkthrough of the solution is then provided.
  • Styling a Navbar with Flexbox
    Jen live codes the text-based navigation styling including making the navbar horizontal across the page, and setting two separate fonts for the name and navbar. The default styling of margin or padding applied to lists changes depending on the browser.A student's question regarding how the CSS path skips ui and li to style the h1 element is also covered in this segment.
  • Styling Navbar Links
    Jen walks through the CSS used to style the various links in the navbar including color, text-decoration, and display. Styling the hover state and shifting the name link to its own line are also covered in this segment.
  • Font Awesome Icons
    Jen demonstrates how to change out the LinkedIn link in the navbar for an accessible text icon from Font Awesome. A walkthrough of hiding icons from screen readers and styling Font Awesome icons is also provided in this segment.
  • Navbar Icon Practice
    Jen provides a short exercise for students to practice implementing and styling icons for the GitHub and name links in the navbar. A walkthrough of the solution is then provided in this segment.

Additional Styles

Section Duration: 16 minutes

Detailed Styles

Section Duration: 30 minutes

Portfolio

Section Duration: 55 minutes
  • Portfolio Projects Section Markup
    Jen discusses a brief overview of what will be covered in chapter 5 and what is provided in the Chapter 5 Part 1 beginning CodePen. A practice exercise for writing the portfolio project section's HTML markup and a walkthrough of the solution are also provided in this segment.
  • Styling Portfolio Projects Section
    Jen walks through styling the portfolio projects section to match the provided example image including proper spacing, text and background color, font size, and list styling. A brief demonstration of the calc function and how to create borders for specific sides is also covered in this segment.
  • Responsive Projects Layout
    Jen walks through making the website responsive for mobile and desktop, briefly discusses the differences between display: flex and display: grid, and briefly demonstrates the ability of display: grid to overlapping cells. A walkthrough of how to switch the display order of the text and image is also covered in this segment.
  • Overlapping Items with CSS Grid
    Jen demonstrates how to use CSS Grid to have the project description overlap the image. A column in Grid can be applied to multiple elements at once which allows the content to overlap.
  • Alternating Layout Practice
    Jen provides a short exercise to practice overlapping items with CSS Grid with a bonus goal of alternating the project layouts. A walkthrough of the solution to the exercise is also provided in this segment.
  • Complete Home Page Practice
    Jen provides a short exercise to practice transferring the current CodePen project into VS Code and adjust the styling to match the provided homepage image. A walkthrough of a possible solution to the exercise and a brief overview is then provided.
  • About Page Practice
    Jen provides a short exercise to practice using the material covered in the course by building the About page for the website. A walkthrough of the recommended approach, some advanced additions to the site, and a possible solution to the exercise is also provided in this segment.

Wrapping Up

Section Duration: 1 minute
No more basic websites for me! Just slayed "Getting Started with CSS" by the amazing Jen Kramer on Frontend Masters. My layouts are about to get seriously stylish.
Pranay Ahirwar

Pranay Ahirwar

pranayahirwar

I just completed "Getting Started with CSS" by Jen Kramer on Frontend Masters! It was an awesome refresher to build a full layout with CSS and HTML. Some cool CSS tricks like gradients and grid overlap too! Great course!
Andy Glover dev

Andy Glover dev

andygloverdev

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now