Video description
Discover an interactive learning experience that combines study sections and interesting real-life projects with this course. With this learning guide, you’ll no longer need to rely on frameworks such as Bootstrap for your user interface and instead be able to create your own layouts and utility classes to build custom responsive websites and app UIs.
This course is for beginners as well as experienced developers who want to learn how to build responsive websites and user interfaces with modern HTML5 and CSS3+ technologies such as Flexbox and CSS Grid, as well as the Sass pre-compiler.The first few sections in particular are tailored for beginners. So even if you haven’t built anything before, this course covers the basics to help you develop a strong foundation.
However, if you already have experience with basic HTML and CSS, you can simply move on to section 3 or 4. Get started on this course and develop the skills you need to build your own web Sass solutions.
The course covers the following topics:
• How websites work
• Visual Studio code setup, shortcuts, live server and Emmet
• HTML5 semantic layout
• CSS fundamentals
• Responsive design with media queries
• CSS units - rem, em, vh, vw, etc.
• Flexbox
• CSS Grid
• Animation with keyframes and transitions
• CSS variables
• Sass pre-compiler with portfolio project
• Full projects and mini projects
• Website deployment to shared hosting and Netlify with Git
What You Will Learn
- Work through Flexbox and CSS Grid projects
- Explore CSS variables, transitions, dropdowns, overlays, and more
- Get up to speed with website hosting and deployment with FTP and Git
Audience
This course is for anyone who wants to learn web development. You will also find this course useful if you are looking to pursue a career in coding or simply want to learn Sass.
About The Author
Brad Traversy: Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad’s courses.
Table of contents
- Chapter 1 : Introduction
-
Chapter 2 : HTML Basics
- Section Intro
- Create Open HTML Pages
- Doctype Basic Layout
- Setting Up Live Server (VSCode Extension)
- Meta Tags Search Engines
- Headings, Paragraphs Typography
- Links, Images Attributes
- Lists Tables
- Forms Input
- Block Inline Level Elements
- Divs Spans, Classes Ids
- HTML Entities
- HTML5 Semantic Tags Challenge
- HTML5 Semantics Solution Wrap Up
-
Chapter 3 : CSS Basics
- Section Intro
- Implementing CSS
- Basic CSS Selectors
- Dev Tools Introduction
- Fonts In CSS
- Color Types
- Backgrounds Borders
- Box Model, Margin Padding
- Float Alignment
- Link State Button Styling
- Navigation Menu Styling
- Inline, Block Inline-Block Display
- Positioning
- Form Style Challenge
- Form Style Solution
- Aside: Visibility, Order Negative Margin
- Chapter 4 : Hotel Website
- Chapter 5 : Intro To Responsive Layouts
- Chapter 6 : Intro To Flexbox
- Chapter 7 : EdgeLedger Website (Flexbox)
- Chapter 8 : Website Deployment - Shared Host
- Chapter 9 : More CSS Concepts - Advanced Selectors, Animation More
-
Chapter 10 : Mini Projects With Keyframes, Transitions, etc
- Presentation Website [1] - Intro HTML
- Presentation Website [2] - Page CSS
- Presentation Website [3] - Text Animation
- Hamburger Menu Overlay [1] - HTML Base CSS
- Hamburger Menu Overlay [2] - Creating The Hamburger
- Hamburger Menu Overlay [3] - Animating The Hamburger Lines
- Hamburger Menu Overlay [4] - Menu Overlay
- Knowledge Timeline [1] - HTML Base CSS
- Knowledge Timeline [2] - Boxes Arrows
- Knowledge Timeline [3] - Responsive Media Queries
- Knowledge Timeline [4] - Scroll In Animation
- Quick Dropdown Menu Project
- Chapter 11 : CSS Grid
- Chapter 12 : NewsGrid Website
- Chapter 13 : Website Deployment With Netlify (FREE)
- Chapter 14 : Learning Sass
- Chapter 15 : Portfolio Website With Sass
- Chapter 16 : Where To Go From Here
Product information
- Title: Modern HTML and CSS from the Beginning (Including Sass)
- Author(s):
- Release date: April 2019
- Publisher(s): Packt Publishing
- ISBN: 9781838822828
You might also like
video
CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox)
If you want to learn how to create modern real-world websites using pure CSS, then this …
video
Front-End Web Development with Modern HTML, CSS, and JavaScript
JavaScript code runs your browser as your HTML page loads. Adding JavaScript to your code can …
video
CSS - The Complete Guide (incl. Flexbox, Grid and Sass)
Every web developer has to know CSS. CSS, short for Cascading Style Sheets, is a "programming …
book
Learn Enough HTML, CSS and Layout to Be Dangerous: An Introduction to Modern Website Creation and Templating Systems
All You Need to Know, and Nothing You Don’t, to Start Creating and Deploying Web Sites---In …