Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Design
Web Design
CSS
Modern HTML & CSS From The Beginning (Including Sass)

Modern HTML & CSS From The Beginning (Including Sass)

Loại khoá học: Web Design

Build modern responsive websites & UIs with HTML5, CSS3 & Sass! Learn Flex & CSS Grid

image
50.000 VND
1.899.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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. Stop having to rely on frameworks like Bootstrap for your user interface and learn how 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.

Things We Cover

  • 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

  • Much More

Sections on Sass will be being added very shortly!

Bạn sẽ học được gì

Build Multiple High Quality Website & UI Projects

HTML5 Semantic Layout & CSS Fundamentals

Flexbox & CSS Grid Projects

CSS Variables, Transitions, Dropdowns, Overlays & More

Website Hosting & Deployment With FTP & Git

All Skill Levels

Yêu cầu

  • This course is for any developer, beginner to advanced

Nội dung khoá học

16 sections

Introduction

4 lectures
Welcome To The Course
05:34
How The Web Works (Summarized)
07:38
The Roles Of HTML & CSS In Web Development
06:34
Getting Setup With Visual Studio Code
07:12

HTML Basics

14 lectures
Section Intro
02:29
Create & Open HTML Pages
08:46
Doctype & Basic Layout
07:47
Setting Up Live Server (VSCode Extension)
04:33
Meta Tags & Search Engines
09:09
Headings, Paragraphs & Typography
09:42
Links, Images & Attributes
10:25
Lists & Tables
08:46
Forms & Input
17:24
Block & Inline Level Elements
05:50
Divs & Spans, Classes & Ids
09:58
HTML Entities
07:55
HTML5 Semantic Tags & Challenge
05:35
HTML5 Semantics Solution & Wrap Up
03:37

CSS Basics

16 lectures
Section Intro
03:03
Implementing CSS
08:47
Basic CSS Selectors
10:24
Dev Tools Introduction
05:39
Fonts In CSS
12:11
Color Types
08:45
Backgrounds & Borders
16:39
Box Model, Margin & Padding
15:03
Float & Alignment
13:15
Link State & Button Styling
09:19
Navigation Menu Styling
11:10
Inline, Block & Inline-Block Display
08:14
Positioning
10:32
Form Style Challenge
04:55
Form Style Solution
09:11
Aside: Visibility, Order & Negative Margin
05:43

Hotel Website

7 lectures
Project Intro
04:06
Aside: Design & Ideas
03:39
File Structure & Navbar
21:01
Showcase & Home Info
22:24
Features & Footer
12:14
About Page
20:03
Contact Page
11:54

Intro To Responsive Layouts

5 lectures
What Is Responsive Design?
03:23
Getting Started With Media Queries
15:06
Em & Rem Units
15:39
Vh & Vw Units
14:44
Making The Hotel Website Fully Responsive
19:09

Intro To Flexbox

4 lectures
What Is Flexbox?
03:09
Flexbox Basics
06:02
Flex Properties
05:16
Flex Alignment & Justify
07:56

EdgeLedger Website (Flexbox)

10 lectures
Project Intro
03:18
Header HTML & Navbar Styles
14:10
Hero Section & Overlay
10:52
Icons & Solutions Sections
15:10
Cases & Blog Sections
08:51
Finishing The Homepage
13:37
Responsive Media Queries
06:29
Inner Pages
12:59
Navbar & Lightbox Effects
16:34
Extra - Adding a Favicon
01:52

Website Deployment - Shared Host

6 lectures
Types Of Web Hosting
07:59
Shared Hosting Setup
09:51
Hosting Company Links
00:09
Setting Up Email
04:45
Upload Your Site via FTP
05:36
BONUS: Contact Form Submission (PHP Script)
06:13

More CSS Concepts - Advanced Selectors, Animation & More

10 lectures
Targeted Selectors
09:38
nth-child Pseudo Selectors
06:52
before & after Pseudo Selectors
10:51
Box Shadows
08:19
Text Shadows
05:35
CSS Variables (Custom Properties)
10:49
Keyframe Animation 1
10:44
Keyframe Animation 2
07:15
CSS Transitions
07:51
Transform Property
07:17

Mini Projects With Keyframes, Transitions, etc

12 lectures
Presentation Website [1] - Intro & HTML
07:33
Presentation Website [2] - Page CSS
09:03
Presentation Website [3] - Text Animation
08:38
Hamburger Menu Overlay [1] - HTML & Base CSS
20:18
Hamburger Menu Overlay [2] - Creating The Hamburger
11:37
Hamburger Menu Overlay [3] - Animating The Hamburger Lines
04:42
Hamburger Menu Overlay [4] - Menu Overlay
15:00
Knowledge Timeline [1] - HTML & Base CSS
07:54
Knowledge Timeline [2] - Boxes & Arrows
14:32
Knowledge Timeline [3] - Responsive Media Queries
05:51
Knowledge Timeline [4] - Scroll In Animation
09:45
Quick Dropdown Menu Project
18:43

CSS Grid

7 lectures
What Is CSS Grid?
04:04
Grid Basics & Columns
09:26
Grid Rows
03:59
Spanning Columns & Rows
06:47
Auto-Fit & Minmax
03:39
Grid Template Areas
07:18
Media Queries & The Grid
05:03

NewsGrid Website

10 lectures
Project Intro
03:14
Setup & Favicon
07:13
Core Styles, Variables & Navbar
13:23
Showcase With Overlay & Button Styles
13:24
Home Articles Grid
17:57
Footer With Grid
11:55
About Page & Page Container
08:16
Article Page
09:01
Responsive Media Queries
18:19
Bonus: Intro To Photoshop (NewsGrid Logo)
12:00

Website Deployment With Netlify (FREE)

5 lectures
How It Works
02:59
Git & Pushing To Github
07:07
Git Commands & Links
00:11
Netlify Deploy & Form Submission
06:50
Custom Domain Name
06:03

Learning Sass

7 lectures
What Is Sass?
06:19
Environment Setup With Node-Sass
05:41
Koala Sass Compiler - GUI Alternative
04:44
Variables & Partials
06:21
Nesting & Structuring
06:32
Inheritance & Contrast
05:09
Functions, Mixins & More
11:17

Portfolio Website With Sass

11 lectures
Project Intro
03:38
Project Setup
14:14
Header & Main Nav
23:00
Specialize & Stats Section
17:03
Process Section & Footer
26:07
About Page Info Section
13:22
About Page Logos & Testimonials
14:27
Work Gallery With Transitions
22:49
Contact Page
15:41
Responsive Media Queries
25:18
Deploy & Contact Form With Spam Filter
09:39

Where To Go From Here

1 lectures
Where To Go From Here
02:20

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi