CSS for Everybody: From Beginner to Boss

CSS for Everybody: From Beginner to Boss

by Kalob Taulien
Released March 2021
Publisher(s): Packt Publishing
ISBN: 9781801071949

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

In the first section of the course, we’ll learn about CSS syntax, how to style certain HTML elements using CSS selectors, changing the text on our page, using different colors, changing default link styling, adding background images, working with borders, changing heights and widths of elements, changing spacing with margins and paddings, and making parts of your page see-through.

In the second section, we’ll apply everything we learned in CSS 101 and get our hands dirty with more advanced CSS. This includes understanding the display property, the box model, outlines versus borders, specific element positioning, advanced CSS selectors, pseudo selectors and pseudo-elements, transitions, animations, flexbox, and CSS grid.

In the final section, we’ll learn about responsive web design. This is how we make websites look great on all devices, including phones, tablets, laptops, desktops, TVs, and more.

We’ll also dive right into media queries and what mobile-first means and why it’s important. Then we’ll make images and video embeds responsive. And we’ll finish the course with a final project where you make a flexbox (or CSS grid) page layout and then transform it into a responsive website so that it looks amazing on smaller devices, such as a phone.

What You Will Learn

  • Build modern-looking websites using CSS
  • Learn about display properties and CSS selectors
  • Position specific elements optimally using CSS grids and flexbox
  • Learn to create animations and smooth transitions
  • Build responsive web pages
  • Explain the concept of media queries

Audience

This course is ideal for junior web developers who are looking to create beautiful-looking responsive websites. Knowledge of HTML is required for this course.

About The Author

Kalob Taulien: Kalob Taulien is a professional web developer who has been developing websites and working with start-ups since 1999. Since many years, he has been writing codes in Python and Django. He is in the core Wagtail CMS team and one of the core leaders in Wagtail-based education. The passion to learn and to share his knowledge by teaching and helping others is something that drives him constantly. His ability to turn complex programming concepts into easy-to-understand bits of knowledge has been called his 'superpower'. Throughout the years, he has built numerous websites. He even provides one-on-one coaching and start-up consulting to new organizations.

Table of contents

  1. Chapter 1 : CSS 101: A beginner's guide to beautiful websites
    1. Introduction
    2. What is CSS?
    3. How Does CSS work?
    4. CSS Syntax Overview
    5. Inline CSS
    6. Internal CSS
    7. CSS Selectors Introduction
    8. Element Selectors
    9. Class Selectors
    10. ID Selectors
    11. Grouped Selectors
    12. Nested Elements
    13. Commenting Your Code
    14. Text Colors
    15. Different Color Types
    16. Links
    17. Font Sizes
    18. Measurement Types
    19. Background Colors
    20. Background Images
    21. The Inspect Tool
    22. Text Align
    23. Borders
    24. Border Radius
    25. Display
    26. Width
    27. Height
    28. Box Shadows
    29. Padding
    30. Margin
    31. Max Width
    32. Opacity
    33. External CSS
    34. Floating Elements
    35. Your CSS 101 Project
    36. Section Summary
  2. Chapter 2 : CSS 201 – Intermediate CSS
    1. Introduction
    2. The Display Property
    3. The Box Model
    4. Outlines
    5. Text Shadows
    6. Minimum Element Width
    7. Introduction to CSS Positions
    8. Relative Positioning
    9. Absolute Positioning
    10. Fixed Positioning
    11. Sticky Positioning
    12. Overflowing Text
    13. Centering Block Elements
    14. Advanced CSS Selectors
    15. Introduction to Pseudo Selectors
    16. Pseudo Selectors
    17. Introduction to Pseudo Elements
    18. Before and After Pseudo Elements
    19. First Letter and First Line Pseudo Elements
    20. Highlighting Text with Selection
    21. Smooth Transitions
    22. Gradient Backgrounds
    23. Layering Backgrounds and Gradients
    24. Custom Web Fonts
    25. Transformations
    26. Animations
    27. Flexbox
    28. Grid
    29. Your CSS 201 Project
    30. Section Summary
  3. Chapter 3 : CSS 301 - Responsive Web Design
    1. Introduction
    2. The Viewport Meta Element
    3. Media Query Syntax
    4. What is Mobile-First?
    5. Responsive Images
    6. Responsive Embeds
    7. Multiple Media Queries
    8. Making a Responsive Layout
    9. Your CSS 301 Project
    10. Summary

Product information

  • Title: CSS for Everybody: From Beginner to Boss
  • Author(s): Kalob Taulien
  • Release date: March 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781801071949