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ủ
Development
Web Development
HTML
Master HTML and CSS by building real world projects

Master HTML and CSS by building real world projects

Loại khoá học: Web Development

Learn css, flex, grid, web accessibility, responsiveness, BEM architecture, animation by building e-commerce project

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

Requirements

  • Basic computer skills

A detailed effective course on HTML & CSS for beginners or even students with intermediate HTML & CSS knowledge. You will have all the real-life experience you should have when starting your journey to become a software developer or web developer.


Is this course suitable for you?

Yes, If you already know the basics of computers, you can start this course. If you are interested in learning HTML and CSS, you can start your journey with this course. This course will also help if someone wants to build real-world projects such as e-commerce and blog projects to improve their skills.


What makes this course special?

In this course, I have spent a lot of time on the theoretical explanation, which will support you in understanding the practical implementations of many topics easily. I have added many challenges for you so that you can test your learning immediately after completing a lecture. You will learn about many extensions, saving 50% of the time when coding. This course will make sure to make you advance in this field.


What are some of the course highlights?

There are so many exciting features covered in this one course; you will be blown away by excitement and joy. Here are some of the exciting features you will learn about HTML & CSS:

  • HTML Typography

  • HTML Lists, Link, Media

  • HTML Table, Form

  • Web Accessibility

  • CSS Selectors, combinators

  • CSS Box Model

  • CSS Layout design - float, positioning, flex, grid

  • CSS Responsive Web Design   (RWD)

  • CSS Transform, Transition, Animation

  • CSS BEM Architecture

  • Blog Project

  • E-commerce Project

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

Design real-world and responsive websites

Basics to advanced HTML including Web accessibility

CSS Advanced Layout including flex, grid layout

Advanced CSS including Specificity calculation, BEM Architecture

How to design e-commerce and blog website

Best practices for coding

Essential extensions for saving time

Yêu cầu

  • No coding experience is required
  • A computer

Nội dung khoá học

6 sections

HTML5 (Basics)

28 lectures
Environment setup - Visual Studio Code
01:56
Markdown Language
01:57
What is HTML? Why HTML?
02:32
HTML Tags & their types
04:20
HTML Attributes
02:23
Basic Structure of HTML File
04:20
HTML Quiz 1
5 questions
Head Tag's Basic Usage
03:31
Head Tag's Advanced Usage & SEO Checking
10:13
How To Validate HTML File
03:44
HTML Comments
04:08
HTML Headings
06:33
HTML Line Break & Paragraph
04:47
HTML Text Formatting Tags
04:38
HTML Entity & Symbol
03:32
Font Awesome Icon & Icon Font Extension
05:46
HTML Quiz 2
5 questions
HTML List (Part-1)
06:15
HTML List (Part-2)
05:07
HTML List (Part-3)
02:16
HTML List (Part-4) Description List
02:03
HTML Link
06:48
How To Create Clickable Icon
02:57
How To Add Image
04:39
How To Get Images From Unsplash
01:15
How To Host Image On Server
02:08
How To Add A Map Using iframe
03:47
HTML Quiz 3
5 questions

HTML5 (Advanced)

13 lectures
How To Add Any Website Using iframe
01:00
How To Add A YouTube Video Using iframe
01:48
How to Add Audio & Video
02:00
HTML Table
07:51
HTML Form (Part-1) - Basic Form
07:09
HTML Form (Part-2) - Accessible Form
04:22
HTML Form (Part-3) - Radio Button, Text Area
04:56
Send Form Data To Email Address
04:25
Web Accessibility (Part-1) - Testing Web Accessibility
03:53
Web Accessibility (Part-2) - Semantic vs Non-Semantic HTML
07:26
Web Accessibility (Part-3)
02:39
Web Accessibility (Part-4) - role, aria-label
03:45
HTML Quiz 4
5 questions

CSS (Basics)

28 lectures
CSS Module Outline
01:34
Why CSS? CSS Rules Syntax
04:25
Inline CSS
04:55
Internal CSS
03:03
External CSS
04:43
CSS Selectors & Combinators
02:24
Element & Grouping Selectors
04:46
Nested & Universal Selectors
07:39
ID Selectors
04:32
Class Selectors
05:12
HTML To CSS Auto Completion extension
02:45
Attribute Selectors
05:33
Pseudo class & Pseudo element Selector
14:05
Descendant, Child, Adjacent & general sibling Selectors
06:51
CSS Quiz 1
5 questions
Typography | Font Properties
07:17
Typography | How to add google font
04:58
Typography | How to add color
06:48
Typography | How to format Text
08:24
Box Model | Content, Padding
07:26
Box Model | border, Margin
05:31
box-sizing properties
07:57
Typography | How to add & style icons
05:27
inline vs inline-block vs block elements
09:08
width vs max-width properties
04:46
opacity & overflow properties
07:05
background properties
08:20
CSS Quiz 2
5 questions

CSS (Advanced)

34 lectures
Variables & Filter
08:44
shadows & card design
11:11
Layout design - float
15:52
Layout design - Positioning
12:24
Layout design - fixed navbar & z-index
06:56
layout design - without flex layout
12:16
layout design - with flex layout
10:16
layout design - (Task 1)
02:07
layout design - flex item
07:26
layout design - (Task 2 & Task 3)
05:26
layout design - (Task 4)
05:56
Layout design - CSS FlexBox cheatsheet
01:57
Layout design - Grid layout and refactoring codes
04:35
Layout design - flex layout again
07:30
Layout design - Grid Layout example
08:44
Layout design - grid item
05:28
CSS Quiz 3
5 questions
Responsive web design - basics
03:47
Responsive web design - media query
15:13
Responsive web design - final part
14:10
how to create circle
04:43
Transition property
10:05
Transition (Task 6)
02:00
Transform property part-1
05:01
Transform property part-2 (Task 7)
07:51
Animation part-1
05:51
Create a circle (Task 8)
01:31
Animation part-2
11:29
Selectors priority
11:02
Specificity / priority score calculation
05:26
Problems without BEM Architecture
15:28
BEM Architecture - Block, Element, Modifier
14:12
BEM practice & extension
06:31
CSS Quiz 4
5 questions

Project 1: Blog Website

17 lectures
blog project demo
01:41
basic setup for the blog project
11:32
Navbar design
14:42
Responsive Navbar design
05:55
Banner design
14:36
Responsive Banner Section Design
09:55
Design About Section
19:49
Responsive About Section Design
03:38
Design Archive Section
13:30
Responsive Archives Section Design
03:16
Design Blog Post Section
19:02
Responsive Blog Post Section
03:32
Design Contact Section
13:18
Responsive Contact Section Design
02:38
Design Footer section
21:39
Add Collapsible menu
11:19
Deploy Website On Netlify
04:55

Project 2: E-commerce website

32 lectures
Project demo
04:59
Project setup
07:45
Create Navbar
09:25
Design Navbar
11:02
Responsive Navbar
06:46
Collapsible Navbar
05:08
Create & Design Footer
05:45
Setup All Other Pages
04:12
Create Banner
08:24
Design Banner
10:23
Create Sidebar
12:58
Design Sidebar
03:21
Crate & Design Action Section
08:40
Create A Single Product
06:57
Design A Single Product
10:00
Create & Design The Badge
06:04
Create Multiple Products
05:51
Create Pagination
03:46
Design Pagination
05:21
Create Product Details Page
08:26
Design Product Details Page
03:08
Create Cart Items Section
12:53
Design Cart Items Section
07:55
Create Cart Payment Section
04:29
Design Cart Payment Section
05:30
Create & Design Profile Page
10:24
Create Register Page
07:11
Design Register Page
07:57
Create & Design Login Page
04:27
Create Contact Page
08:16
Design Contact Page
04:08
Deploy The Project On Netlify
04:41

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