Modern HTML and CSS from the Beginning (Including Sass) [Video]
- FREE Subscription Access now
- $138.99 Video Buy
-
What do you get with a Packt Subscription?
- Instant access to this title and 7,500+ eBooks & Videos
- Constantly updated with 100+ new titles each month
- Breadth and depth in over 1,000+ technologies
-
Introduction
-
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
-
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
-
Hotel Website
-
Intro To Responsive Layouts
-
Intro To Flexbox
-
EdgeLedger Website (Flexbox)
-
Website Deployment - Shared Host
-
More CSS Concepts - Advanced Selectors, Animation & More
-
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
-
CSS Grid
-
NewsGrid Website
-
Website Deployment With Netlify (FREE)
-
Learning Sass
-
Portfolio Website With Sass
-
Where To Go From Here
About this video
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.
All the code files are placed at https://github.com/PacktPublishing/Modern-HTML-and-CSS-from-the-Beginning-Including-Sass
- Publication date:
- April 2019
- Publisher
- Packt
- Duration
- 20 hours 53 minutes
- ISBN
- 9781838822828