AnnieCannons
Getting Started with CSS
3 hours, 19 minutes
CC
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
CloseWhat They're Saying
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
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
andygloverdev
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 by providing some brief personal background and discussing the goals to be achieved by the end of this course.
Jen provides course resources, a brief overview of what the finished project looks like, briefly discusses material to be covered, and how the course is structured.
Jen discusses the prerequisites for the course, walks through obtaining the materials needed, where to obtain prerequisite knowledge, and set up instructions for the course project. A brief walkthrough of CodePen is also provided in this segment.
Text
Section Duration: 42 minutes
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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
Jen demonstrates how to turn the Resumé link in the navbar into a call to action button by styling a button class using CSS.
Jen walks through setting the navbar styling to be responsive to mobile, tablet, and monitor screen dimensions using media queries.
Jen provides a short exercise to practice combining the material covered thus far to create a footer for the website including icon links for LinkedIn, GitHub, and email. A walk through of a possible answer to the practice exercise is also provided.
Detailed Styles
Section Duration: 30 minutes
Jen discusses migrating the completed navigation, intro, contact, and footer code from their respective CodePens into the code editor VS Code. A walkthrough of setting up the file structure for VS Code is also covered in this segment.
Jen live codes debugging and styling the previously built sections of the webpage to work outside of CodePen. A student's question regarding why a div was added around the contact section and the width wasn't just made 100% is also covered in this segment.
Jen demonstrates using div elements with a class of gradient to generate gradient line breaks around the contact section on the web page.
Portfolio
Section Duration: 55 minutes
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.
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.
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.
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.
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.
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.
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
Jen wraps up the course by providing a brief overview of the previous course chapter, suggestions for additions for the course website, and recommendations for next steps into CSS.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops