Video description
Build modern responsive websites and UIs with Sass! Learn Flex and CSS Grid
About This Video
- Build Multiple High-Quality Website and UI Projects
- HTML5 Semantic Layout & CSS Fundamentals
In Detail
This course is for both beginners and seasoned developers that want to learn to build responsive websites and user interfaces with modern HTML5 and CSS3+ technologies like Flexbox and CSS Grid as well as the Sass pre-compiler. This course includes hours of both learning & studying sections along with real-life projects. Stop having to rely on frameworks like Bootstrap for your user interface and learn to create your own layouts and utility classes to build custom responsive websites and app UIs.
The first few sections are tailored for beginners so even if you have never built anything before, you will learn all of the basics. If you already have experience with basic HTML & CSS, just move to section 3 or 4 and get started.
Topic Covered:
- How Websites Work
- Visual Studio Code Setup, Shortcuts, Live Server & Emmet
- HTML5 Semantic Layout
- CSS Fundamentals
- Responsive Design With Media Queries
- CSS Units - rem, em, vh, vw, etc
- Flexbox
- CSS Grid
- Animation with Keyframes & Transitions
- CSS Variables
- Sass Pre-compiler with portfolio project
- Full Projects & Mini Projects
- Website Deployment to Shared Hosting & Netlify With Git
Learn to build your own web SASS solutions.
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.
Publisher resources
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
The Modern JavaScript Bootcamp (2019)
Learn JavaScript by building real-world apps. Includes 3 real-world projects, 80 programming challenges, and ES6/ES7! About …
video
Node.js API Masterclass with Express and MongoDB
Create a real-world backend for a Bootcamp directory app About This Video Gain proficiency in building …
video
Bootstrap 4: Create Four Real World Projects
Bootstrap 4 - Bootstrap with lots of CSS and jQuery. CSS Flexbox is included. Introduce to …
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 …