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
HTML&CSS Tutorial and Projects Course (Flexbox&Grid)

HTML&CSS Tutorial and Projects Course (Flexbox&Grid)

Loại khoá học: Web Design

Web Development for absolute beginners.Learn HTML5 and CSS3 from scratch by building 20+ amazing real world projects.

image
50.000 VND
1.999.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ả

If you want to start your career in Web Development, HTML and CSS are essential skills to have because they are foundational languages of the web.

HTML stands for Hyper Text Markup Language. In short HTML is a markup language that is used developing web pages.

CSS stands for Cascading Style Sheets. In short CSS is a language responsible for layout and styling of the web pages.

In this course we will cover both languages from the scratch and by the end of the course become HTML and CSS ninjas by building Responsive Real World Projects.

Why you should take this course?

Reason Number ONE - You Will Understand the Web Better.

Knowing the HTML and CSS and how they are used to create web pages is essential for web developer as they are building blocks of every web page.

Reason Number TWO - You Will be able to Create Websites.

Once you will know HTML and CSS you will be able to create a personal,unique web page for yourself.

Reason Number THREE - Start a Web Career.

For anybody who wants to pursue a career in Web Development knowledge of HTML and CSS is required. 

Reason Number FOUR - You Will Progress to Another Programming Languages with Greater Ease.

Once you know the fundamentals of HTML and CSS you will be able to pick up languages like Javascript with greater ease.

Reason Number FIVE - We Will Learn HTML and CSS from Scratch and Will Use it to Build Responsive Real Life Projects.

Not only we will learn the theory of HTML and CSS step by step. We also will apply our knowledge by building Real Life Projects.

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

Learn HTML5 from scratch.

Learn CSS3 from scratch.

Create responsive real world projects from scratch.

Learn CSS Grid and Flexbox Layout Modules.

Learn where to get free images, custom fonts.

Learn how to work with font-awesome icons

Learn where to get custom color palettes.

Yêu cầu

  • No programming/coding experience as we will start from absolute scratch
  • Any computer - Mac, PC.
  • Any Text Editor. We will download Brackets Text Editor but will be able follow along with any text editor.
  • Any Web Browser. Chrome,Firefox.(Chrome is requirement only if wants to use Brackets Live Preview).
  • All required software is free!!!!

Nội dung khoá học

35 sections

Course Intro

3 lectures
Course Structure
02:15
Video Blur Fix
01:35
Course Review
00:30

HTML Tutorial

39 lectures
HTML Intro
02:46
Google Chrome and Visual Studio Code
00:48
Download Google Chrome
03:10
Download Visual Studio Code
01:49
Visual Studio Code Overview
04:09
Create A Project
02:24
First Webpage
04:48
Basic HTML Document Structure
02:34
Implement HTML Document Structure
03:19
Live Server Extension Setup
05:58
Extra Settings and Emmet
07:19
Heading Elements
04:09
Video Resources
00:03
Paragraph Element
01:52
White Space Collapsing
01:24
Lorem Ipsum
03:14
Image Basics
03:49
Multiple Images
04:21
External Images
03:25
Nice Images
04:03
Width and Height
03:21
Crop Images
03:00
Comments and Line Breaks
05:44
External Links
05:15
Internal Links
04:34
Links - Within a Page
06:23
Image Links - Empty Links
03:57
Sup and Sub Elements
02:32
STRONG and EM Elements
02:59
Special Characters
03:23
Unordered Lists
03:57
Ordered Lists
01:04
Nested Lists
01:44
Table Element
02:52
Forms - Input Elements and Submit Elements
13:36
Forms - Textarea, Radio,Checkboxes, Select
11:36
Install Prettier Code Formatter
05:53
Keyboard Shortcuts
10:15
Head Element - External Resources
04:49

HTML Coffee Project

10 lectures
Intro
03:16
Setup
03:12
Project Assets
00:05
Download Images
02:30
Logo, Heading, and Navbar
03:02
Home Page
13:10
About
03:05
Numbers
06:07
Contact
05:03
Complete Project
00:03

CSS Tutorial

19 lectures
CSS Intro
01:29
Workspace Setup
03:00
Text Editor Setup
05:13
Video Resources
00:03
Inline CSS
04:05
Internal CSS
02:22
External CSS
09:57
Power Struggle
06:26
Basic CSS Syntax
07:35
Element Selectors
02:39
Grouping Selectors
02:01
ID Selectors
04:40
Class Selectors
04:41
ID and Class Selector Summary
01:52
DIV and SPAN Elements
07:58
Inheritance in CSS
05:33
Inheritance - More Info
02:49
Last Rule, Specificity and Universal Selector
09:39
Combine Selectors - Descendant Selector
06:24

All Projects Intro

2 lectures
All Projects Intro
01:43
Complete Project
00:04

Fundamentals Project

4 lectures
First Project Intro
00:26
Steps
04:47
Complete Project
07:46
Projects Folder
01:21

CSS Colors

8 lectures
Colors Intro
00:27
Color and Background-color Properties
04:16
Color Names
02:47
RGB
06:27
RGBA
09:45
HEX Values
06:08
VS-Code Color Options
02:50
External Resources
01:52

Colors Project

3 lectures
Intro
00:39
Steps
03:01
Complete Project
07:15

CSS Units

9 lectures
Units Intro
00:29
Pixels, Font-Size, Width, Height
05:43
Percent Units
04:57
Em Units
05:45
Rem Units
03:01
Vh and Vw
06:17
Default Browser Styles and Chrome DevTools
12:04
Calc Function
07:00
Min-height, Max-height
10:31

Units Project

3 lectures
Intro
00:57
Steps
05:22
Complete Project
08:37

Typography

9 lectures
Typography Intro
00:22
Font-family
02:36
Font-Stack Generic Fonts
02:55
Google Fonts
08:32
System Fonts
03:39
More Google Fonts
02:04
Font-weight Font-style
07:07
Text-align Text-indent
02:59
More Text Properties
11:18

Typography Project

3 lectures
Intro
00:10
Steps
00:59
Complete Project
04:24

CSS Box Model

7 lectures
Box Model - Intro
00:15
CSS Box Model - Padding
09:32
CSS Box Model - Margin
06:48
CSS Box Model - Border
06:28
Border-radius Negative Margin
04:38
Outline Property
09:11
Border Hack
02:51

CSS Box Model Project

4 lectures
Intro
00:33
Steps
03:53
Html Structure
03:37
CSS Styling
16:59

Display Property

7 lectures
Display Property Intro
00:16
Display Property
07:40
Basic Horizontal Centering
04:17
Mobile Navbar Example
12:46
Box-sizing : border-box
07:29
Display inline-block
03:33
Display:none, Opacity, Visibility
08:34

Display Property Project

5 lectures
Intro
00:52
Steps
01:39
Html Structure
03:26
CSS Styling
12:18
Most Common Questions
07:15

Background Images

10 lectures
Intro
00:50
Setup
02:49
Background Images Basics
04:34
background-repeat
07:24
background-size
03:17
background-position
04:33
background-attachment
06:30
Linear Gradients
12:54
Background Image Overlay
10:26
Colorzilla
03:37

Background Images Project

5 lectures
Intro
00:32
Steps
01:23
Setup
02:12
Html Structure
03:23
CSS Styling
15:07

Positions, Float, Media Queries

13 lectures
Float, Positions, Media Queries, Z-index Intro
00:39
Float Property
05:31
Float Property Column Layout Example
07:14
Position static
03:36
Position Relative
03:39
Position Absolute
05:40
Position Fixed
04:05
position:sticky
04:44
Media Queries
16:35
Z-index
08:49
::before and ::after Basics
07:42
::before and ::after Example
15:48
Inset Property
06:38

Position Property Project

3 lectures
Intro
01:01
Steps
02:57
Complete Project
13:11

Selectors Re-Visited

7 lectures
Selectors Intro
00:51
Basic Selectors
03:01
Descendant and Child Selectors
04:40
First-line and First-letter
01:05
:hover pseudo-class Selector
03:46
Link pseudo-class Selectors
04:32
:root pseudo-class Selector
05:53

Transform, Transition and Animation

12 lectures
Intro
01:09
transform : translate()
06:14
Translate Hero Example
05:03
transform:scale()
02:37
transform:rotate()
03:43
tranform:skew()
01:51
Transition Property
03:27
Multiple Transitions
02:21
Transition - Delay, Shorthand, All Properties
05:14
Transition-timing-function
09:54
Animation
10:53
Animation-fill-mode
05:41

Animation Project

3 lectures
Intro
00:20
Steps
01:19
Complete Project
05:53

CSS Tutorial Continued

16 lectures
Intro
00:41
CSS Variables
18:14
FontAwesome Icons - Intro
03:33
FontAwesome Icons - Self Hosting Option
05:56
FontAwesome Icons - CDN Link
02:55
FontAwesome Icons - SVG Approach
01:56
FontAwesome Icons - Versions
03:52
Text-Shadow Box-shadow
06:21
Browser Prefixes
04:22
Semantic HTML
09:40
object-fit
09:06
Emmet Workflow
06:55
:is()
03:10
:not()
01:29
HSL Color Values
11:05
Five Server Extension
04:46

Last Tutorial Project

10 lectures
Intro
00:42
Setup
02:18
Images and Icons
03:20
HTML Structure
08:40
Reset
00:39
CSS Variables
10:42
Body
03:28
Blog Card
02:41
Blog Image
04:50
Complete Project
06:06

Tea Station Project

35 lectures
Intro
04:44
Setup Files and Finished Project
00:09
Setup
02:55
Assets
05:27
CSS Variables
10:43
Global Styles
10:06
Header HTML
04:19
Additional Video
00:16
Header CSS
17:51
Content Divider
02:05
Skills HTML
06:34
Skills CSS
08:54
Skills Columns and Clearfix
08:49
Class VS Descendant
04:08
About HTML
07:29
About CSS
15:36
Products HTML
10:03
Products CSS
13:31
Services HTML
09:14
Services CSS
15:14
Services Icon
06:02
Contact HTML
13:07
Contact CSS
14:18
Footer Html
05:58
Footer CSS
02:59
Nav Button
05:41
Navbar Html
03:55
Navbar CSS
11:41
Navbar Functionality
05:35
Animation
11:06
Multiple Pages
07:26
Form Submission
06:04
Netlify - Intro
01:03
Netlify - Drag and Drop
03:16
Finished Project
00:03

Git and Github Setup

6 lectures
Optional Section
00:12
Intro
01:08
Git Install
03:49
Git Commands
04:26
Setup Github
03:19
Benefits
13:20

CSS FLEXBOX

16 lectures
CSS Flexbox Intro
02:39
Setup
09:04
Naming Conventions
03:23
flex-direction
04:08
flex-wrap
05:25
justify-content
06:37
align-items
05:18
Hero Project
10:23
align-content
04:24
Main Axis / Cross Axis
04:23
order property
03:09
align-self
03:10
flex-grow
04:30
flex-shrink
02:52
flex-basis and flex
08:54
NEW FLEXBOX FEATURES !!!
09:29

Backroads Tour Company

30 lectures
Intro
06:21
Setup Files and Finished Project
00:10
Project Setup
08:03
Color Shades
03:13
Logo
00:54
Favicon
03:10
Hero HTML
03:54
Hero CSS
13:07
About HTML
05:56
About CSS
04:35
About Column Layout
11:14
Services HTML
05:51
Services CSS
10:14
Tours HTML
09:16
Tours CSS
09:59
Additional Design
05:39
Contact HTML
05:05
Contact CSS
10:28
Gallery HTML
05:02
Gallery CSS
09:07
Footer HTML
08:31
Footer CSS
05:23
Navbar HTML
08:53
Navbar CSS - Small Screen
10:54
Navbar Toggle
05:15
Smooth Scroll
03:31
Navbar CSS - Big Screen
08:37
Autoprefixer
01:46
Netlify - Continuous Deployment
11:52
Finished Project
00:06

CSS Grid Tutorial

22 lectures
CSS Grid - Intro
03:19
Setup
07:05
Basic Syntax - grid-template-columns
03:11
Implicit Grid
03:43
General CSS Setup
03:04
Units - auto
02:38
grid-template-rows
04:34
fr units
03:57
gap property
02:27
Gap - New Syntax!
01:46
fr vs %
03:38
Firefox Developer Tools
06:28
grid-lines
09:23
Naming Grid Lines
06:29
Grid Template Areas
11:44
Order Property
03:34
Repeat Function
02:32
justify-content
04:57
align-content
03:11
align-items, jusitfy-items, align-self,justify-self
04:02
minmax()
03:57
auto-fit and auto-fill
09:46

Grid Mini Projects

19 lectures
Intro
05:40
Setup Files and Finished Project
00:09
Setup
07:30
Global Styles
11:27
Navbar Mini Project
12:33
Hero HTML
05:50
Hero CSS
11:40
Cards HTML
07:05
Cards CSS - Small Screen
06:01
Cards CSS - Big Screen with Media Queries
04:46
Cards CSS - Big Screen with minmax and auto-fit,auto-fill
16:26
Cards CSS - Row Height
07:02
Tiles HTML
04:14
Tiles CSS
16:01
Object-fit add-on
00:35
Layout HTML
05:30
Layout CSS - General
11:37
Layout CSS - Grid Lines
12:25
Complete Source Code and Finished Project
00:04

Porfolio Project - With CSS Grid

41 lectures
Intro
03:33
Starter Project
00:10
Setup
03:37
Navbar HTML
05:12
Navbar CSS - Small Screen
06:28
Navbar CSS - Big Screen
09:25
Sidebar HTML
04:45
Sidebar CSS
12:11
Sidebar Functionality
02:10
Fixed Navbar
04:21
Hero HTML
05:56
Hero CSS - Small Screen
06:56
Hero CSS - Big Screen
06:38
About HTML
04:22
About CSS - Small Screen
06:49
About CSS - Big Screen
04:32
Services HTML
05:14
Services CSS - Small Screen
09:21
Services CSS - Big Screen
01:34
Projects HTML
06:35
Projects CSS - Small Screen
10:13
Projects CSS - Big Screen
01:30
Projects CSS - Custom Layout
07:58
Connect HTML
06:04
Connect CSS - Basic Video Setup
03:43
Connect CSS - Overlay
03:33
Connect - Banner
07:35
Temporary Remove Video
02:15
Connect Clip-Path
06:35
External Video Resources
02:03
Skills HTML
06:23
Skills CSS
10:46
Timeline HTML
04:18
Timeline CSS
18:11
Blog - Basic Setup
14:32
Blog - Complete
10:19
Footer
04:13
About, Contact - HTML
07:17
About, Contact -CSS
02:57
Projects Page and Browser Prefixes
18:30
Complete Project
00:06

Default Starter

19 lectures
Intro
01:39
Resources
00:13
Structure
03:51
Html
01:50
Normalize
02:47
Fonts
04:17
Fonts - Overview and Tweaks
08:37
Colors - General Setup
04:31
Primary Shades
03:56
Gray Shades
07:04
Happy Hues
01:21
Rest of the Vars
06:20
Image
07:02
Buttons
07:14
Alerts
03:47
Form Setup
05:16
Form CSS
09:10
Loading
03:00
Title
02:23

Additional Projects

42 lectures
Intro
01:38
Starter
00:08
Setup
03:16
Color Flipper - Intro
01:36
Color Flipper - HTML
04:12
Color Flipper - CSS
16:23
Counter - Intro
00:17
Counter - HTML
02:00
Counter - CSS
03:37
Task Manager- Intro
00:45
Task Manager - Form HTML
02:55
Task Manager - Form CSS
06:20
Task Manager - List HTML
04:54
Task Manager - List CSS
11:09
Task Manager - Edit Form HTML
05:05
Task Manager - Edit Form CSS
05:20
Reviews - Intro
00:14
Reviews - HTML
05:27
Reviews - CSS
15:30
Navbar - Intro
00:58
Navbar - HTML
05:37
Navbar - CSS (small screen)
10:17
Navbar - CSS (big screen)
06:51
Navbar - JS (toggle functionality)
05:53
Sidebar - Intro
00:27
Sidebar - HTML
06:04
Sidebar - Toggle Button
03:58
Sidebar - CSS
12:09
Sidebar - Functionality
05:10
Modal - Intro
00:40
Modal - HTML
02:47
Modal - Hero CSS
03:57
Modal - CSS
13:18
Questions - Intro
00:50
Questions - HTML
06:06
Questions - CSS
11:05
Menu - Intro
00:33
Menu - HTML
06:23
Menu - CSS
14:09
Grocery Bud - Intro
01:21
Grocery Bud - HTML
06:31
Grocery Bud - CSS
13:10

Bonus

1 lectures
Bonus
00:19

Đá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