Modern HTML & CSS From The Beginning (Including Sass)
4.7 /5- Offered byUDEMY
Modern HTML & CSS From The Beginning (Including Sass) at UDEMY Overview
Duration | 21 hours |
Total fee | ₹3,399 |
Mode of learning | Online |
Credential | Certificate |
Modern HTML & CSS From The Beginning (Including Sass) at UDEMY Highlights
- Earn a certificate of completion from Udemy
- Learn from 2 articles & 26 downloadable resources
- Get full lifetime access of the course material
- Comes with 30 days money back guarantee
Modern HTML & CSS From The Beginning (Including Sass) at UDEMY Course details
- From absolute beginner to seasoned developer
- 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
- This course is for both beginners and seasoned developers that want to learn how 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
- The first few sections are tailored for beginners so even if you have never built anything before, you will learn all of the basics
Modern HTML & CSS From The Beginning (Including Sass) at UDEMY Curriculum
Introduction
Welcome To The Course
How The Web Works (Summarized)
The Roles Of HTML & CSS In Web Development
Getting Setup With Visual Studio Code
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
Project Intro
Aside: Design & Ideas
File Structure & Navbar
Showcase & Home Info
Features & Footer
About Page
Contact Page
Intro To Responsive Layouts
What Is Responsive Design?
Getting Started With Media Queries
Em & Rem Units
Vh & Vw Units
Making The Hotel Website Fully Responsive
Intro To Flexbox
What Is Flexbox?
Flex Basics
Flex Alignment & Order
EdgeLedger Website (Flexbox)
Project Intro
File Structure & Flex Navbar
Showcase Header
What We Do Section
Who We Are & Clients Sections
Contact Form, Map & Footer
Quick Note On Google Maps
Smooth Scrolling With JS
Widescreen & Tablet View
Smartphone View
COMMON ISSUES & FIXES
Website Deployment - Shared Host
Types Of Web Hosting
Shared Hosting Setup
Hosting Company Links
Setting Up Email
Upload Your Site via FTP
BONUS: Contact Form Submission (PHP Script)
More CSS Concepts - Advanced Selectors, Animation & More
Targeted Selectors
nth-child Pseudo Selectors
before & after Pseudo Selectors
Box Shadows
Text Shadows
CSS Variables (Custom Properties)
Keyframe Animation 1
Keyframe Animation 2
CSS Transitions
Transform Property
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
What Is CSS Grid?
Grid Basics & Columns
Grid Rows
Spanning Columns & Rows
Auto-Fit & Minmax
Grid Template Areas
Media Queries & The Grid
NewsGrid Website
Project Intro
Setup & Favicon
Core Styles, Variables & Navbar
Showcase With Overlay & Button Styles
Home Articles Grid
Footer With Grid
About Page & Page Container
Article Page
Responsive Media Queries
Bonus: Intro To Photoshop (NewsGrid Logo)
Website Deployment With Netlify (FREE)
How It Works
Git & Pushing To Github
Git Commands & Links
Netlify Deploy & Form Submission
Custom Domain Name
Learning Sass
What Is Sass?
Environment Setup With Node-Sass
Koala Sass Compiler - GUI Alternative
Variables & Partials
Nesting & Structuring
Inheritance & Contrast
Functions, Mixins & More
Portfolio Website With Sass
Project Intro
Project Setup
Header & Main Nav
Specialize & Stats Section
Process Section & Footer
About Page Info Section
About Page Logos & Testimonials
Work Gallery With Transitions
Contact Page
Responsive Media Queries
Deploy & Contact Form With Spam Filter
Where To Go From Here
Where To Go From Here
Modern HTML & CSS From The Beginning (Including Sass) at UDEMY Faculty details
Other courses offered by UDEMY
Student Forum
Anything you would want to ask experts?