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
The HTML & CSS Bootcamp 2024 Edition

The HTML & CSS Bootcamp 2024 Edition

Loại khoá học: Web Design

Brand New Course! Covers Flexbox, CSS Grid, Animations, Responsive Design and More! Tons of Exercises & Projects.

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

**Brand new HTML & CSS course, just released in February 2023**

** Check out the promo video to see the beautiful, responsive projects we build in this course! **

This course will teach you everything you need to know about HTML, CSS, and web design to build your own stunning websites from scratch. Instead of just watching me code, you’ll learn how to structure and build any website you can think of.

My background is in teaching in-person bootcamp programs around the world, where I work directly with students to help them learn web development and change careers. This course is based on all my experience in the classroom. Unlike most Udemy courses, this course includes dozens of exercises and challenges which ask you to recreate components, build layouts, and practice HTML and CSS. Practice is the most important tool I have to help you learn, and this course includes lots of it!

This course covers a huge amount of information, but it’s designed to be approachable for complete beginners and intermediate developers alike.

  • We start with the basics of HTML: structuring documents, creating text elements, tables, and forms. Then we learn about semantic markup and creating accessible webpages

  • Next, we cover the basics of CSS: working with selectors, color systems, and styling text elements.

  • From there, we cover critical CSS concepts including the box model, specificity, the cascade, and CSS units.

  • Next you’ll learn all about backgrounds, gradients, filters, positioning elements, working with transitions and transformations, and many other more intermediate CSS properties.

  • We then spend nearly 10 hours learning how to create complex CSS layouts using Flexbox and CSS Grid. We then build multiple projects with complicated layouts.

  • You’ll learn how to build responsive layouts that look good on all screen sizes, from large desktops to tablets and mobile devices.

  • Finally, we wrap up the course with our massive final project that we build together from scratch. This project combines everything we’ve learned in the course into one huge website built with thousands of lines of HTML & CSS. Check out the promo video to learn more about the final project.


This course includes:

  • Over 37 hours of high quality videos

  • Downloadable assets, starter coder, and solutions for all sections

  • Dozens of exercises, challenges, and quizzes

  • Downloadable slides and cheatsheets, including beautiful diagrams and syntax references

  • Included support in the course Q&A forums

  • Access to our exclusive discord community with thousands of students

About me (your instructor)

I’m a teacher with extensive real-world teaching experience. I’ve taught thousands of students how to code at my in-person coding bootcamps around the globe. My graduates work at companies including Google, Tesla, Apple, Airbnb, and pretty much any big company you can name. My in-person teaching background informs the online experiences I create for students. Unlike most Udemy instructors, I’ve actually taught this material in a classroom full of students for nearly a decade. I know what works and what doesn’t work!

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

Yêu cầu

Nội dung khoá học

35 sections

Introduction

10 lectures
Welcome & Curriculum Overview
06:02
Join Our Chat Community
00:33
Important Note On Leaving Feedback!
02:01
A First Taste of HTML & CSS
11:10
How The Web Works
07:37
The Roles of HTML, CSS, and JS
07:15
Quick Quiz On The Roles of HTML & CSS
2 questions
Installing The Tools We Need
03:14
Configuring VSCode
05:22
Important Note On The Course Exercises
02:11

HTML Basics

9 lectures
Introducing HTML
03:59
The Basic HTML Workflow
04:59
The Paragraph Element
05:48
Mozilla Developer Network
02:10
Chrome Developer Tools
03:47
Document Structure
05:04
Creating HTML Comments
04:06
Creating Headings
09:48
HTML Basics Exercise
10:26

More HTML

9 lectures
Working With HTML Lists
08:24
The Em, Strong, B, and I Elements
09:07
Nesting Elements
01:51
Superscript and Subscript
02:19
Inline Vs. Block Elements
03:09
Creating Links
07:03
Other Types of Links
07:35
Creating Images
08:04
Pasta Recipe Exercise
12:06

Working With Forms

8 lectures
Creating Text Inputs and Buttons
04:33
The Form Element
06:49
Name and Placeholder Attributes
06:52
Properly Labelling Form Controls
04:00
Other Types of Inputs
05:09
Checkboxes, Textareas, and Range Inputs
06:10
Selects and Radio Button Groupings
07:44
Course Landing Page Form Exercise
14:47

Other Elements

5 lectures
Spans
06:29
Divs
05:20
Tables
09:17
Semantic Markup
07:10
Semantic Elements
07:18

CSS Basics

8 lectures
Getting Our Starter Code
02:19
Working Within Inline Styles
04:29
Writing Internal Styles
04:49
External Styles: The Best Way To Write Styles
04:28
Quick Note on Codepen
02:20
Anatomy of CSS
05:03
The Element Selector
03:14
CSS Basics Exercise
02:39

The World of CSS Colors

9 lectures
Working with background-color
02:16
Quick Tip: MDN & Comments
04:20
Named Colors
04:03
Understanding RGB Colors
07:29
Hexadecimal Colors
08:16
RGBA Colors and Opacity
05:51
Colors Quiz
05:01
CSS Inheritance
06:01
CSS Colors Exercise
08:07

Styling Text

8 lectures
Changing Fonts with Font-Family
12:05
Font-size, font-weight, and font-style
08:52
Changing Text Alignment
04:12
Line-height, letter-spacing, and word-spacing
04:48
Adding Custom Fonts With Google Fonts
11:31
Styling Text Exercise
12:35
Creating Text Shadows
07:06
Our First Mini Project: Cantilever
16:06

More Text Styling

7 lectures
Text-transform & text-decoration
07:55
The ID Selector
05:40
The Class Selector
06:11
Styling Lists
08:26
Styling Links and :hover Pseudo-Class
07:40
The Font Shorthand Property
04:34
Leafy Seadragon Exercise
09:47

Selectors Pt. 1

6 lectures
The Universal Selector
05:16
The Attribute Selector
07:20
Grouping Selectors
04:24
Descendant & Child Combinators
08:18
Compound Selectors
04:22
CSS Selectors Exercise
08:14

The Box Model

16 lectures
Introducing The Box Model
05:27
Working With Borders
07:21
Width, Height, and Percentages
06:52
Adding Padding to Elements
06:33
Working With Margins
05:03
The Alternate Box Model
06:28
The Display Property
11:33
Display: None
03:51
Negative Margin & Margin Auto
06:23
Margin Collapsing: WTF?
05:13
A Common Layout Pattern
02:41
Min and Max Width
04:24
Rounding Elements With Border Radius
03:17
Box Shadows
06:37
Working With Overflow
06:43
Ski Resort Exercise
13:25

Artist Portfolio Project

9 lectures
Introducing Our Project
03:01
Basic Project Setup
05:11
Writing The Navbar Markup
04:07
Styling The Navbar
11:18
Finishing Up The Navbar
11:26
Creating The Photo Grid
05:05
Continuing The Photo Grid
13:24
Finishing The Photo Grid
10:05
Adding The Footer Content
16:07

Specificity and The Cascade

11 lectures
Section Introduction
00:45
The Sibling Combinator
04:35
Working With Pseudo-Classes
15:03
Styling Pseudo-Elements
04:41
CSS Selectors Pt. 2 Exercise
13:01
The Basics of Specificity
08:00
Inline Styles and Specificity
02:07
Calculating Specificity Values
09:48
!important and The Cascade
06:04
Wrapping Up The Cascade
06:27
Cascade & Specificity Quiz
5 questions

Blog Post Project

8 lectures
Introducing Our Blog Post Project
03:23
Centering The Main Content
06:33
Working on Typography
13:29
Creating the Headline Section
13:15
Implementing Our Headings
09:59
Adding In Code Styles
11:48
Creating the Footer
09:34
Writing The Full Size Hero
10:01

CSS Units

8 lectures
Absolute Units: Pixels, Centimeters, and More!
10:17
Working With Percentages
05:14
The Joy of Rem Units
07:43
Understanding The Em Unit
08:16
Vw and Vh Units
06:31
CSS Units Quiz
2 questions
Which Units Should You Use?
03:02
Working With Floats
07:07

Hazel CV Project

8 lectures
Introducing The Project
02:45
Setting Up The Navbar
07:34
Finishing The Navbar
05:04
Starting The Hero Content
06:51
Making The Skills Section
09:46
Creating The Blog Section
11:21
Adding The Events Section
06:59
Making A Simple Footer
04:58

Backgrounds, Gradients, & Filters

11 lectures
Working With Background Images
08:32
Controlling Background-Repeat
02:37
Sizing Our Background
05:50
Positioning Background
05:55
Working With Background-Clip
02:12
Background Exercise
05:41
An Important Note About Gradients!
00:51
Creating Linear Gradients
05:38
Radial, Conic, and Repeating Gradients
08:08
The Background Shorthand Property
04:31
Fancy CSS Filters
05:28

Positioning

10 lectures
Introducing Positioning
04:58
Relative Positioning
05:00
Controlling Layers With Z-Index
02:59
Absolute Positioning Pt 1
06:24
Absolute Positioning Pt 2
04:52
Creating A Button Badge
14:37
Fixed Positioning
04:35
Positioning Exercise #1
04:28
Positioning Exercise #2
06:04
Positioning Exercise #3
05:30

Transitions and Transforms

10 lectures
Introducing Transitions
04:23
The Basic Transition Syntax
06:32
Working With Multiple Transitions
03:21
Transition Timing Functions
05:39
Transition Delays
02:17
Understanding Animation Performance
09:51
Introducing Transforms
06:23
Other Types of Transformations
07:54
Transform Origin
02:35
Building Fancy Button Hover Effects
17:07

Flexbox: Part 1

13 lectures
Introducing Flexbox
06:31
Display: Flex and Flex Axis
05:37
Working With Flex-Direction
05:11
Flexbox Exercise 1
02:18
Flex-Wrap
08:13
Justify-Content
10:09
Flexbox Exercise 2
02:10
Align-Items
06:28
Flexbox Exercise 3
02:43
Align-Content
05:45
Flexbox Exercise 4
04:33
Align-Self
03:42
Flexbox Exercise 5
04:36

Flexbox Pt 2: Flex Items & Patterns!

9 lectures
The Flex-Grow Property
11:09
Controlling Shrinkage With Flex-Shrink
05:06
Flex-Basis: Important & Confusing
06:25
The Flex Shorthand Property
07:34
The Order Flex-Item Property
07:33
Flexbox Patterns: Building A Simple Navbar
09:11
Flexbox Patterns: Nested Flex Containers
05:10
Flexbox Patterns: Centering Content
04:32
Flexbox Patterns: Building A Card Layout
06:59

Cost Estimator Project

10 lectures
Introducing The Cost Estimator Project
02:32
Building Our Container
07:53
Creating The Top Tabs
08:06
Positioning The Tabs Underline
08:02
Creating The Active Tab Styles
11:56
Adding The Toggle Section
10:43
Building The Sessions Card
06:58
Creating The Slider
14:32
Creating The Two Price Cards
08:05
Finishing Up The Price Cards
11:34

Making Responsive Websites With Media Queries

12 lectures
Introducing Responsive Design
06:34
Our First Media Query
07:14
More On Media Queries
06:21
Working With Media Features
06:04
Media Query Logical Operators
03:06
Media Queries Exercise
05:31
Media Queries Level 4 & 5
05:17
Common Responsive Breakpoints
08:55
Creating a Simple Responsive Navbar
08:43
Responsive Flexbox Grid Demo
06:27
Mobile First vs. Desktop First Design
04:42
Building a Simple Mobile-First Layout
06:05

Making Our Projects Responsive

4 lectures
Making Cantilever Responsive
07:39
Making Potter Portfolio Responsive
09:25
Making Hazel CV Project Responsive
17:18
Making Cost Estimator Responsive
09:12

CSS Grid Part 1

11 lectures
Introducing CSS Grid
06:51
Enabling CSS Grid
05:29
Grid-Template-Columns
05:28
Grid-Template-Rows
05:10
Grid Exercise 1
02:51
Grid-Template Shorthand Property
04:05
The Minmax() Function
08:27
Working With Repeat()
03:32
Fit-Content
03:02
Controlling Grid Gaps
03:45
Grid Exercise 2
02:44

CSS Grid Part 2

10 lectures
Working with Grid Lines
05:17
Positioning Grid Items
07:42
The Span Keyword
03:22
The Grid-Area Shorthand Property
06:11
Naming Our Grid Lines
06:52
Grid-Template-Areas
07:52
Using Grid-Template-Areas With Rows & Cols
06:22
Grid-Auto-Flow
05:16
Grid Auto Columns & Rows
04:23
Autofit and Autofill
07:11

Grid Project

10 lectures
Introducing Our Grid Project
04:29
Creating Image Overlay Pt 1
10:31
Creating Image Overlay Pt 2
05:50
Adding In Our Images
05:38
Positioning Our Images On The Grid
07:33
Making Our Grid Layout Responsive
10:07
Fixing Our Image Overlays
03:05
Building The Navbar
10:07
Finalizing The Navbar and Footer
07:04
Creating The Hamburger Button
12:28

Building Animations

9 lectures
Introducing Keyframes Animations
04:18
Defining @keyframes
06:12
More Practice With @Keyframes
07:55
Animation Delay, Repeat, and More!
06:26
Reusing Animations
02:02
Animation Shorthand Property
04:22
Building A Simple Spinner Animation
04:13
Creating a More Complex Loader
08:54
The Animation Fill Mode Property
04:53

Building A Mobile Drawer Navbar

6 lectures
Introducing Our Animated Drawer
02:40
Writing The Individual Bar Animations
07:54
A Lightspeed Crash Course In JavaScript
09:04
Making Our Hamburger Button Work
06:37
Creating The Mobile Drawer Menu
06:56
Animating The Drawer Slide-Out
07:29

::before and ::after Pseudo-Elements

6 lectures
Introducing Before and After
05:04
Creating Decorative Quotes With Pseudo-Elements
07:35
Gradient Borders With Pseudo-Elements
06:29
Fancy Animated Buttons With Pseudo-Elements
08:20
Super Fancy Animated Spinner With Pseudo-Elements
07:30
Custom Form Controls With Pseudo-Elements
13:18

Modern CSS

8 lectures
Introducing CSS Variables
03:20
Writing CSS Variables
07:16
The :root pseudo-class
03:52
Variables and Media Queries
02:31
Using Variables For Sizes
04:39
Introducing Calc()
05:42
The Rules of Calc()
05:35
Another Example of Using Calc()
05:01

Swipe Mega Project

8 lectures
Introducing Swipe
07:49
Setting Up Our Font Variables
05:56
Defining Basic Heading Styles
07:24
Writing General Link Styles
05:15
Defining Body Styles
04:08
Creating our Text Classes - Subtitle, Secondary Text
11:34
Defining Our Button Styles - Primary & Secondary Buttons
12:51
Creating Our Buttons With Animated Icons
05:07

Swipe Project Pt 2

10 lectures
Building The Navbar
12:11
Defining Our Two-Column Layout Classes
11:55
Writing The Hero Markup
04:49
Styling The Page Hero
13:11
Building The Partners Grid Section
09:14
Adding The Unified Platform Section
15:00
Creating Our Graphic Photos Grid
08:05
Writing Our Reusable Card Class
07:20
Adding The Integrations Section
16:56
Defining The Why Swipe Section
09:19

Swipe Pt 3

11 lectures
Creating The Global Section
14:58
Positioning The Globe Image
05:59
Adding The Virtual Events Section Markup
07:50
Styling The Virtual Events Section
20:05
Building The Getting Started Section
12:20
Writing The Page Footer Markup
07:02
Styling The Page Footer
13:48
Adding The First Angled Stripe
08:18
Finishing The Angled Stripes
09:06
Creating The Animated Gradient Hero Background
11:11
Fixing An Issue With Our Angled Stripes
04:17

Swipe Pt 4: Making It Responsive

14 lectures
Starting To Make Swipe Responsive
07:42
Making The Partners Grid Responsive
08:22
Making The Unified Platform Section Responsive
05:58
Making The Integrations Section Responsive
09:00
Making The Why Swipe Section Responsive
06:49
Making The Global Section Responsive
05:39
Making The Virtual Events Section Responsive
08:37
Making The Bottom of The Page Responsive
10:33
Making The Page Hero Responsive
25:30
Adding Our Responsive Navbar
11:19
Responsive Tweaks To Background Stripes
14:37
Cleaning Up Our CSS
10:58
Fixing A Minor Issue With Border Radius
05:03
Fixing Another Minor Issue With Partners Grid
07:02

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

How To Create 2D Defender Game With Unity & C#

How To Create 2D Defender Game With Unity & C#

749.000 VND
50.000 VND
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
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