What will i learn?
- Build Multiple High Quality Website & UI Projects
- Flexbox & CSS Grid Projects
- Website Hosting & Deployment With FTP & Git
- HTML5 Semantic Layout & CSS Fundamentals
- CSS Variables, Transitions, Dropdowns, Overlays & More
- All Skill Levels
Curriculum for this course
154 Lessons
20:54:42 Hours
Introduction
5 Lessons
00:26:59 Hours
- Welcome To The Course 00:05:34
- How the web works (Summarized) 00:07:38
- The Roles Of HTML & CSS In Web Development 00:06:34
- Getting Setup With Visual Studio Code 00:07:13
- Testeaza ce ai invatat 00:00:00
HTML Basics
17 Lessons
01:52:04 Hours
- Section Intro 00:02:29
- Section Intro - Resources | htmlsandbox_starter.zip
- Section Intro - Resources | htmlsandbox_finished.zip
- Create & Open HTML Pages 00:08:47
- Doctype & Basic Layout 00:07:48
- Setting Up Live Server (VSCode Extension) 00:04:33
- Meta Tags & Search Engines 00:09:09
- Headings, Paragraphs & Typography 00:09:42
- Links, Images & Attributes 00:10:25
- Lists & Tables 00:08:47
- Forms & Input 00:17:25
- Block & Inline Level Elements 00:05:51
- Divs & Spans, Classes & Ids 00:09:59
- HTML Entities 00:07:56
- HTML5 Semantic Tags & Challenge 00:05:36
- HTML5 Semantic Tags & Challenge - Resources | html5_semantics_start.zip
- HTML5 Semantics Solution & Wrap Up 00:03:37
CSS Basics
19 Lessons
02:32:57 Hours
- Section Intro 00:03:03
- Section Intro - Resources | csssandbox_starter.zip
- Section Intro - Resources | csssandbox_finished.zip
- Implementing CSS 00:08:48
- Basic CSS Selectors 00:10:25
- Dev Tools Introduction 00:05:40
- Fonts In CSS 00:12:11
- Color Types 00:08:45
- Backgrounds & Borders 00:16:40
- Box Model, Margin & Padding 00:15:04
- Float & Alignment 00:13:15
- Link State & Button Styling 00:09:20
- Navigation Menu Styling 00:11:10
- Inline, Block & Inline-Block Display 00:08:14
- Positioning 00:10:32
- Form Style Challenge 00:04:55
- Form Style Challenge - Resources | form_styling_start.zip
- Form Style Solution 00:09:12
- Aside Visibility, Order & Negative Margin 00:05:43
Hotel Website
9 Lessons
01:35:22 Hours
- Project Intro 00:04:06
- Project Intro - Resources | image_resources.zip
- Project Intro - Resources | hotel_website.zip
- Aside Design & Ideas 00:03:40
- File Structure & Navbar 00:21:01
- Showcase & Home Info 00:22:24
- Features & Footer 00:12:14
- About Page 00:20:03
- Contact Page 00:11:54
Intro To Responsive Layouts
7 Lessons
01:08:05 Hours
- What Is Responsive Design 00:03:24
- What Is Responsive Design - Resources | csssandbox_updated.zip
- Getting Started With Media Queries 00:15:07
- Em & Rem Units 00:15:39
- Vh & Vw Units 00:14:45
- Making The Hotel Website Fully Responsive 00:19:10
- Making The Hotel Website Fully Responsive - Resources | hotel_website_responsive.zip
Intro To Flexbox
3 Lessons
00:24:12 Hours
- What Is Flexbox 00:03:09
- Flex Basics 00:09:11
- Flex Alignment & Order 00:11:52
EdgeLedger Website (Flexbox)
12 Lessons
01:49:51 Hours
- Project Intro 00:03:18
- Project Intro - Resources | image_resources.zip
- Project Intro - Resources | edgeledger_website.zip
- File Structure & Flex Navbar 00:16:38
- Showcase Header 00:13:40
- What We Do Section 00:11:22
- Who We Are & Clients Sections 00:14:18
- Contact Form, Map & Footer 00:18:07
- Smooth Scrolling With JS 00:11:33
- Widescreen & Tablet View 00:06:46
- Smartphone View 00:14:09
- COMMON ISSUES & FIXES.txt - Resources
Website Deployment - Shared Host
8 Lessons
00:34:26 Hours
- Types Of Web Hosting 00:08:00
- Shared Hosting Setup 00:09:51
- Setting Up Email 00:04:46
- Upload Your Site via FTP 00:05:36
- BONUS Contact Form Submission (PHP Script) 00:06:13
- BONUS: Contact Form Submission (PHP Script) - Resources | contact.zip
- BONUS: Contact Form Submission (PHP Script) - Resources | edgeledger_website_final.zip
- Hosting Company Links
More CSS Concepts - Advanced Selectors, Animation & More
11 Lessons
01:25:15 Hours
- Targeted Selectors 00:09:39
- Targeted Selectors - Resources | csssandbox2.zip
- nth-child Pseudo Selectors 00:06:53
- before & after Pseudo Selectors 00:10:51
- Box Shadows 00:08:20
- Text Shadows 00:05:35
- CSS Variables (Custom Properties) 00:10:49
- Keyframe Animation 1 00:10:44
- Keyframe Animation 2 00:07:16
- CSS Transitions 00:07:51
- Transform Property 00:07:17
Mini Projects With Keyframes, Transitions, etc
16 Lessons
02:13:42 Hours
- Presentation Website [1] - Intro & HTML 00:07:33
- Presentation Website [1] - Intro & HTML - Resources | presentation_website.zip
- Presentation Website [2] - Page CSS 00:09:03
- Presentation Website [3] - Text Animation 00:08:39
- Hamburger Menu Overlay [1] - HTML & Base CSS 00:20:19
- Hamburger Menu Overlay [1] - HTML & Base CSS - Resources | hamburger_overlay_menu.zip
- Hamburger Menu Overlay [2] - Creating The Hamburger 00:11:37
- Hamburger Menu Overlay [3] - Animating The Hamburger Lines 00:04:42
- Hamburger Menu Overlay [4] - Menu Overlay 00:15:01
- Knowledge Timeline [1] - HTML & Base CSS 00:07:55
- Knowledge Timeline [1] - HTML & Base CSS - Resources | knowledge_resume.zip
- Knowledge Timeline [2] - Boxes & Arrows 00:14:33
- Knowledge Timeline [3] - Responsive Media Queries 00:05:51
- Knowledge Timeline [4] - Scroll In Animation 00:09:45
- Quick Dropdown Menu Project 00:18:44
- Quick Dropdown Menu Project - Resources | dropdown.zip
CSS Grid
8 Lessons
00:40:19 Hours
- What Is CSS Grid 00:04:05
- What Is CSS Grid - Resources | grid_sandbox.zip
- Grid Basics & Columns 00:09:26
- Grid Rows 00:04:00
- Spanning Columns & Rows 00:06:47
- Auto-Fit & Minmax 00:03:40
- Grid Template Areas 00:07:18
- Media Queries & The Grid 00:05:03
NewsGrid Website
12 Lessons
01:54:44 Hours
- Project Intro 00:03:14
- Project Intro - Resources | image_resources.zip
- Project Intro - Resources | newsgrid.zip
- Setup & Favicon 00:07:13
- Core Styles, Variables & Navbar 00:13:23
- Showcase With Overlay & Button Styles 00:13:24
- Home Articles Grid 00:17:58
- Footer With Grid 00:11:55
- About Page & Page Container 00:08:16
- Article Page 00:09:01
- Responsive Media Queries 00:18:19
- Bonus Intro To Photoshop (NewsGrid Logo) 00:12:01
Website Deployment With Netlify (FREE)
5 Lessons
00:23:00 Hours
- How It Works 00:02:59
- Git & Pushing To Github 00:07:08
- Netlify Deploy & Form Submission 00:06:50
- Custom Domain Name 00:06:03
- Git Commands & Links
Learning Sass
8 Lessons
00:46:06 Hours
- What Is Sass 00:06:20
- What Is Sass - Resources | sass_sandbox_finished.zip
- Environment Setup With Node-Sass 00:05:42
- Koala Sass Compiler - GUI Alternative 00:04:44
- Variables & Partials 00:06:22
- Nesting & Structuring 00:06:32
- Inheritance & Contrast 00:05:09
- Functions, Mixins & More 00:11:17
Portfolio Website With Sass
13 Lessons
03:05:20 Hours
- Project Intro 00:03:38
- Project Intro - Resources | portfolio_website.zip
- Project Setup 00:14:14
- Project Setup - Resources | project_resources.zip
- Header & Main Nav 00:23:00
- Specialize & Stats Section 00:17:03
- Process Section & Footer 00:26:07
- About Page Info Section 00:13:22
- About Page Logos & Testimonials 00:14:28
- Work Gallery With Transitions 00:22:49
- Contact Page 00:15:41
- Responsive Media Queries 00:25:18
- Deploy & Contact Form With Spam Filter 00:09:40
Where To Go From Here
1 Lessons
00:02:20 Hours
- Where To Go From Here 00:02:20
Requirements
- This course is for any developer, beginner to advanced
+ View more
Description
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.
+ View more
Other related courses
About the instructor
- 1 Reviews
- 8 Students
- 17 Courses
Student feedback
Reviews
-
Thu, 25-Jul-2019Alexandru Ostrovschi
Write a public review