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
-
Chapter 1 : CSS 101: A beginner's guide to beautiful websites
- Introduction
- What is CSS?
- How Does CSS work?
- CSS Syntax Overview
- Inline CSS
- Internal CSS
- CSS Selectors Introduction
- Element Selectors
- Class Selectors
- ID Selectors
- Grouped Selectors
- Nested Elements
- Commenting Your Code
- Text Colors
- Different Color Types
- Links
- Font Sizes
- Measurement Types
- Background Colors
- Background Images
- The Inspect Tool
- Text Align
- Borders
- Border Radius
- Display
- Width
- Height
- Box Shadows
- Padding
- Margin
- Max Width
- Opacity
- External CSS
- Floating Elements
- Your CSS 101 Project
- Section Summary
-
Chapter 2 : CSS 201 – Intermediate CSS
- Introduction
- The Display Property
- The Box Model
- Outlines
- Text Shadows
- Minimum Element Width
- Introduction to CSS Positions
- Relative Positioning
- Absolute Positioning
- Fixed Positioning
- Sticky Positioning
- Overflowing Text
- Centering Block Elements
- Advanced CSS Selectors
- Introduction to Pseudo Selectors
- Pseudo Selectors
- Introduction to Pseudo Elements
- Before and After Pseudo Elements
- First Letter and First Line Pseudo Elements
- Highlighting Text with Selection
- Smooth Transitions
- Gradient Backgrounds
- Layering Backgrounds and Gradients
- Custom Web Fonts
- Transformations
- Animations
- Flexbox
- Grid
- Your CSS 201 Project
- Section Summary
- Chapter 3 : CSS 301 - Responsive Web Design
Product information
- Title: CSS for Everybody: From Beginner to Boss
- Author(s):
- Release date: March 2021
- Publisher(s): Packt Publishing
- ISBN: 9781801071949
You might also like
video
A Front-End Web Developer MasterClass Using HTML, CSS, and JavaScript
This course is going to take you on a journey where you’ll learn and practice HTML …
video
Learning HTML & CSS
Your complete HTML & CSS video course: Learn the fundamentals of HTML and CSS, and master …
video
HTML & CSS JumpStart
8+ Hours of Video Instruction More than 8 hours of video instruction for people interested in …
video
CSS in Depth in Motion
By mastering CSS, you can make your pages more attractive, your code more readable, and your …