Video description
Learn CSS for the first time or brush up your CSS skills and dive in even deeper
About This Video
- Build beautiful websites that don't just contain great content but also look good
- Use basic and advanced CSS features
- Understand the concepts and theory behind CSS and certain CSS features
In Detail
Every web developer has to know CSS. CSS, short for Cascading Style Sheets, is a "programming language" you use to turn your raw HTML pages into a really beautiful website. This course covers it all. We start at the very basics and gradually dive in deeper and deeper. We do this by showing you both practical examples and the theory behind them.
Getting started with CSS might look easy, but there actually is a lot of depth to CSS, so this course provides different "Tracks" or "Entry points" to exactly meet your demands and reflect your current knowledge level:
- The Basics Track: Start from scratch and learn CSS from the ground up. You start with lecture 1 and simply follow through to the end.
- The Advanced Track: You already know the CSS basics, you know what selectors are and how it works, but you want to dive in deeper and learn some advanced features and usages.
- The Expert Track: You got the advanced knowledge, too, but you want to dive into things like Flexbox, CSS Grid, CSS Variables, or Sass. This track is for you.
In the course project, we'll build the front end (no back end) of a fictional web hosting company. We'll have a starting screen with different sections, a responsive design with an animated side-drawer, modals and forms, and lot of CSS animations, font styles, and more!
Who this book is for
This course is for anyone who wants to learn CSS for the first time or wants to sharpen their CSS skills. It’s also for anyone who's excited to learn about the latest CSS features like Flexbox, CSS Grid, or CSS Variables, or anyone who knows CSS but wants to dive deeper.
Publisher resources
Table of contents
- Chapter 1 : Getting Started
-
Chapter 2 : Diving Into the Basics of CSS
- Module Introduction
- Understanding the Course Project Setup
- Adding CSS to our Project with Inline Styles
- Understanding the Tag Creating a .css File
-
Chapter 3 : Diving Deeper into CSS
- Module Introduction
- Introducing the CSS Box Model
- Understanding the Box Model
- Understanding Margin Collapsing and Removing Default Margins
- Theory Time - Working with Shorthand Properties
- Applying Shorthands in Practice
- Diving Into the Height Width Properties
- Understanding Box Sizing
- Adding the Header to our Project
- Understanding the Display Property
- Applying the Display Property Styling our Navigation Bar
- Understanding an Unexpected "inline-block" Behaviour
- Working with "text-decoration" "vertical-align"
- Styling Anchor Tags
- Adding Pseudo Classes
- Theory Time - Pseudo Classes Pseudo Elements
- Grouping Rules
- Working with "font-weight" "border"
- Adding Styling a CTA-Button
- Adding a Background Image to our Project
- Properties Worth to Remember
- Wrap Up
- Chapter 4 : More on Selectors CSS Features
-
Chapter 5 : Practicing the Basics
- Module Introduction
- Adding Style to our Plans
- Working on the Recommended Plan
- Styling the Badge with "border-radius"
- Styling our List
- Working on the Title and the Price of our Packages
- Improving our Action Button
- Understanding Outlines
- Presenting the Core Features to the User
- Styling the Headline of the Core Features Section
- Preparing the Content of the Key Feature Area
- Adding the Footer
- What we achieved so Far
- Adding the Packages Page
- Your Challenge
- Styling the Links
- Styling our Package Boxes
- Adding "float" to our Package
- Fixing the Hover Effect
- Adding the Final Touches
-
Chapter 6 : Positioning Elements with CSS
- Module Introduction
- Why Positioning will improve our Website
- Understanding Positioning - The Theory
- Working with the "fixed" Value
- Creating a Fixed Navigation Bar
- Using "position" to Add a Background Image
- Understanding the Z-Index
- Adding a Badge to our Package
- Styling Positioning our Badge with "absolute" and "relative"
- Diving Deeper into Relative Positioning
- Working with "overflow" and Relative Positioning
- Introducing "sticky" Positioning
- Understanding the Stacking Context
- Wrap Up
-
Chapter 7 : Understanding Background Images Images
- Optional: Advanced Track Introduction
- Module Introduction
- Understanding "background-size"
- Working with "background-position"
- The "background" Shorthand – Theory
- Applying "background" Origin, Clip Attachment
- Using the "background" Shorthand on our Project
- Styling Images
- Adding the Customers Page to our Website
- Working on the Image Layout
- Understanding Linear Gradients
- Applying Radial Gradients
- Stacking Multiple Backgrounds
- Understanding Filters
- Adding Styling SVGs - The Basics
- Wrap Up
-
Chapter 8 : Sizes Units
- Module Introduction
- What's Wrong With Our Project Units?
- Where Units Matter
- An Overview of Available Sizes Units
- Rules to Remember: Fixed Positioning "%"
- Rules to Remember: Absolute Positioning "%"
- Rules to Remember: Relative / Static Positioning "%"
- Fixing the Height 100% Issue
- Defining the Font Size in the Root Element
- Using "min-width/height" "max-width/height"
- Working with "rem" "em"
- Adding "rem" to Additional Properties
- Finishing "rem"
- Understanding the Viewport Units "vw" "vh"
- Choosing the Right Unit
- Using "auto" to Center Elements
- Cleaning Up our Code
- Wrap Up
- Chapter 9 : Working with JavaScript CSS
-
Chapter 10 : Making our Website Responsive
- Module Introduction
- Why our Project Should Become Responsive
- Understanding Hardware Pixels vs. Software Pixels
- Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
- Understanding the "viewport" Metatag
- Designing Websites "Mobile First"
- Adding our First Media Queries
- Things to Keep in Mind when Working with Media Queries
- Finding the Right Breaking Points
- Creating the Mobile First Design for our Plans
- Making the Plans Responsive
- Your Challenge
- Working with Logical Operators
- Improving the Customers Page
- Improving the Packages Page
- Cleaning Up the Navigation Bar
- Positioning our Footer Correctly
- Wrap Up
- Chapter 11 : Adding Styling Forms
-
Chapter 12 : Working with Text and Fonts
- Module Introduction
- Comparing Generic Families Font Families
- Understanding the Browser Settings
- Using the Default Font Families
- Understanding the "font-family" Syntax
- Working with Locally Saved Fonts
- Working with Google Fonts
- Understanding Font Faces "font-style"
- Importing our Custom Fonts
- Understanding Font Formats
- Diving into Font Properties
- Adding "letter-spacing"
- Changing the Line Height
- Applying "text-decoration" "text-shadow"
- Understanding the "font" Shorthand
- Loading Performance "font-display"
- Wrap Up
-
Chapter 13 : Adding Flexbox to our Project
- Optional: Expert Track Introduction
- Module Introduction
- How we Could Improve our Project
- Understanding Flexbox
- Creating a Flex Container
- Using "flex-direction" "flex-wrap"
- Understanding the Importance of Main Axis Cross Axis
- Working with "align-items" "justify-content"
- And What About "align-content"?
- Improving the Navigation Bar with Flexbox
- Your Challenge - Working on the Mobile Navigation Bar
- Improving the Footer
- Adding Flexbox to the Customers Page
- Using the "order" Property for a Flex Item
- Working with "align-self"
- Understanding "flex-grow"
- Applying "flex-shrink"
- Comparing "flex-basis" vs "width" "height"
- Wrap Up
-
Chapter 14 : Using the CSS Grid
- Module Introduction
- What is the CSS Grid?
- Getting Started
- Turning a Container into a Grid
- Defining Columns Rows
- Positioning Child Elements in a Grid
- Using "element-sizing", "repeat" "minmax"
- Advanced Element Positioning
- Working with Named Lines
- Understanding Column Row Shorthands
- Working with Gaps
- Adding Named Template Areas
- Creating Automatically Generated Grid Areas
- Using the Grid on our Project
- Working with "fit-content"
- Positioning Grid Elements
- Positioning the Entire Grid Content
- Positioning Elements Individually
- Understanding Responsive Grids
- Applying Autoflow
- Comparing the Explicit Implicit Grid
- Understanding "auto-fill" "auto-fit"
- Creating a Dense Grid
- Styling the Project Form with Grid
- Comparing Grid Flexbox
- Next Steps
- Wrap Up
-
Chapter 15 : Transforming Elements with CSS Transforms
- Module Introduction
- Rotating Elements and setting transform-origin
- Using Rotate and Translate
- Working with "skew" and "scale"
- Applying Transformation Shorthands
- Rotating Elements in 3 Dimensions
- Understanding the "perspective" Property
- Moving Elements along the Z-Axis with "translateZ"
- Rotating the Container with "transform style"
- Flipping Elements "backface-visibility"
- Wrap Up
- Chapter 16 : Transitions Animations in CSS
- Chapter 17 : Writing Future-Proof CSS Code
-
Chapter 18 : Introducing Sass (Syntactically Awesome Style Sheets)
- Module Introduction
- What is Sass Scss?
- Installing Sass
- Things to be improved with Sass
- Nesting Selectors
- Adding Nested Properties
- Understanding Variables
- Storing Lists Maps in Variables
- Built-In Functions
- Adding Simple Arithmetics
- Adding Better Import and Partials
- Improving Media Queries
- Understanding Inheritance
- Adding Mixins
- Using the Ampersand Operator
- Wrap Up
- Chapter 19 : Course Roundup
Product information
- Title: CSS - The Complete Guide (incl. Flexbox, Grid and Sass)
- Author(s):
- Release date: November 2018
- Publisher(s): Packt Publishing
- ISBN: 9781789954692
You might also like
video
The Modern JavaScript Bootcamp (2019)
Learn JavaScript by building real-world apps. Includes 3 real-world projects, 80 programming challenges, and ES6/ES7! About …
book
40 Algorithms Every Programmer Should Know
Learn algorithms for solving classic computer science problems with this concise guide covering everything from fundamental …
video
Bootstrap 4 From Scratch With 5 Projects
Master the latest version of Bootstrap (4.0.0 Beta) and build 5 real-world themes while learning HTML5 …
video
Modern JavaScript From The Beginning
Learn and Build Projects with Pure JavaScript (No Frameworks or Libraries) About This Video Understanding of …