Design And Develop A Killer Website With Html5 And Css3

  1. Home
  2. Css
  3. Design And Develop A Killer Website With Html5 And Css3

Tags: CSS , HTML5

Learn modern HTML5, CSS3 and web design by building a stunning website for your portfolio! Includes flexbox and CSS Grid

Last updated 2022-01-10 | 4.7

- Become a modern and confident HTML and CSS developer
- no prior knowledge needed!
- Design and build a stunning real-world project for your portfolio from scratch
- Modern
- semantic and accessible HTML5

What you'll learn

Become a modern and confident HTML and CSS developer
no prior knowledge needed!
Design and build a stunning real-world project for your portfolio from scratch
Modern
semantic and accessible HTML5
Modern CSS (previous CSS3)
including flexbox and CSS Grid for layout
Important CSS concepts such as the box model
positioning schemes
inheritance
solving selector conflicts
etc.
A web design framework with easy-to-use rules and guidelines to design eye-catching websites
How to plan
sketch
design
build
test
and optimize a professional website
How to make websites work on every possible mobile device (responsive design)
How to use common components and layout patterns for professional website design and development
Developer skills such as reading documentation
debugging
and using professional tools
How to find and use free design assets such as images
fonts
and icons
Practice your skills with 10+ challenges (solutions included)

* Requirements

* No coding or design experience necessary
* Any computer works — Windows
* macOS or Linux
* You don’t need to buy any software — we will use the best free code editor in the world

Description

  • Become a modern and confident HTML and CSS developer, no prior knowledge needed!
  • Design and build a stunning real-world project for your portfolio from scratch
  • Modern, semantic and accessible HTML5
  • Modern CSS (previous CSS3), including flexbox and CSS Grid for layout
  • Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
  • A web design framework with easy-to-use rules and guidelines to design eye-catching websites
  • How to plan, sketch, design, build, test, and optimize a professional website
  • How to make websites work on every possible mobile device (responsive design)
  • How to use common components and layout patterns for professional website design and development
  • Developer skills such as reading documentation, debugging, and using professional tools
  • How to find and use free design assets such as images, fonts, and icons
  • Practice your skills with 10+ challenges (solutions included)

Course content

11 sections • 150 lectures

Welcome and First Steps 8 lectures

Course Structure and Projects Preview 05:34

Read Before You Start! Preview 00:52

Migration Guide to v2 Preview 02:16

A High-Level Overview of Web Development Preview 11:01

Setting Up Our Code Editor Preview 08:52

Your Very First Webpage! Preview 09:55

Downloading Course Material Preview 04:21

Watch Before You Start! Preview 05:44

HTML Fundamentals 12 lectures

Section Intro Preview 00:40

Introduction to HTML Preview 04:18

HTML Document Structure Preview 11:46

Text Elements Preview 16:20

More Text Elements: Lists Preview 10:59

Images and Attributes Preview 12:45

Hyperlinks Preview 14:49

Structuring our Page Preview 10:56

A Note on Semantic HTML Preview 06:27

Installing Additional VS Code Extensions Preview 07:14

CHALLENGE #1 Preview 11:50

CHALLENGE #2 Preview 17:11

CSS Fundamentals 24 lectures

Section Intro Preview 00:56

Introduction to CSS Preview 04:06

Inline, Internal and External CSS Preview 12:12

Styling Text Preview 15:31

Combining Selectors Preview 09:12

Class and ID Selectors Preview 15:23

Working With Colors Preview 24:07

Pseudo-classes Preview 10:00

Styling Hyperlinks Preview 09:43

Using Chrome DevTools Preview 08:04

CSS Theory #1: Conflicts Between Selectors Preview 17:23

CSS Theory #2: Inheritance and the Universal Selector Preview 14:36

CHALLENGE #1 Preview 17:40

CSS Theory #3: The CSS Box Model Preview 08:05

Using Margins and Paddings Preview 22:07

Adding Dimensions Preview 08:03

Centering our Page Preview 07:56

CHALLENGE #2 Preview 10:59

CSS Theory #4: Types of Boxes Preview 22:19

CSS Theory #5: Absolute Positioning Preview 16:04

Pseudo-elements Preview 16:51

Developer Skill #1: Googling and Reading Documentation Preview 12:15

Developer Skill #2: Debugging and Asking Questions Preview 22:16

CHALLENGE #3 Preview 19:37

Layouts: Floats, Flexbox, and CSS Grid Fundamentals 21 lectures

Section Intro Preview 01:18

The 3 Ways of Building Layouts Preview 05:18

Using Floats Preview 17:22

Clearing Floats Preview 07:22

Building a Simple Float Layout Preview 08:46

box-sizing: border-box Preview 11:12

CHALLENGE #1 Preview 20:14

Introduction to Flexbox Preview 09:43

A Flexbox Overview Preview 07:35

Spacing and Aligning Flex Items Preview 10:51

The flex Property Preview 11:34

Adding Flexbox to Our Project Preview 19:57

Building a Simple Flexbox Layout Preview 12:15

CHALLENGE #2 Preview 14:13

Introduction to CSS Grid Preview 10:57

A CSS Grid Overview Preview 09:39

Sizing Grid Columns and Rows Preview 13:54

Placing and Spanning Grid Items Preview 13:00

Aligning Grid Items and Tracks Preview 13:46

Building a Simple CSS Grid Layout Preview 15:46

CHALLENGE #3 Preview 07:47

Web Design Rules and Framework 20 lectures

Section Intro Preview 02:18

Project Overview Preview 06:13

Overview of Web Design and Website Personalities Preview 12:36

Web Design Rules #1: Typography Preview 16:17

Implementing Typography Preview 23:23

Web Design Rules #2: Colors Preview 13:40

Implementing Colors Preview 18:12

Web Design Rules #3: Images and Illustrations Preview 14:57

Web Design Rules #4: Icons Preview 12:59

Implementing Icons Preview 21:33

Web Design Rules #5: Shadows Preview 13:04

Implementing Shadows Preview 12:08

Web Design Rules #6: Border-radius Preview 04:54

Implementing Border-radius Preview 06:40

Web Design Rules #7: Whitespace Preview 13:10

Web Design Rules #8: Visual Hierarchy Preview 22:58

Implementing Whitespace and Visual Hierarchy Preview 15:43

Web Design Rules #9: User Experience (UX) Preview 20:37

The Website-Personalities-Framework Preview 30:59

The Missing Piece: Steal Like An Artist! Preview 10:26

Components and Layout Patterns 14 lectures

Section Intro Preview 01:00

Web Design Rules #10 - Part 1: Elements and Components Preview 27:48

Building an Accordion Component - Part 1 Preview 25:30

Building an Accordion Component - Part 2 Preview 19:24

Building a Carousel Component - Part 1 Preview 21:25

Building a Carousel Component - Part 2 Preview 29:41

Building a Table Component - Part 1 Preview 10:04

Building a Table Component - Part 2 Preview 13:16

CHALLENGE #1: Building a Pagination Component Preview 24:19

Web Design Rules #10 - Part 2: Layout Patterns Preview 21:52

Building a Hero Section - Part 1 Preview 22:11

Building a Hero Section - Part 2 Preview 21:21

Building a Web Application Layout - Part 1 Preview 15:12

Building a Web Application Layout - Part 2 Preview 15:56

Omnifood Project – Setup and Desktop Version 29 lectures

Section Intro Preview 01:02

The 7 Steps to a Great Website Preview 20:29

Defining and Planning the Project (Steps 1 and 2) Preview 24:36

Sketching Initial Layout Ideas (Step 3) Preview 07:36

First Design and Development Steps (Step 4) Preview 15:21

Responsive Design Principles Preview 08:37

How rem and max-width Work Preview 16:06

Building the Hero - Part 1 Preview 16:12

Building the Hero - Part 2 Preview 29:26

Building the Hero - Part 3 Preview 23:57

Building the Header Preview 15:15

Building the Navigation Preview 15:55

Setting Up a Reusable Grid Preview 21:23

Building the How-It-Works Section - Part 1 Preview 29:16

Building the How-It-Works Section - Part 2 Preview 35:12

Building the Featured-In Section Preview 19:45

Building the Meals Section - Part 1 Preview 26:35

Building the Meals Section - Part 2 Preview 21:01

Building the Meals Section - Part 3 Preview 29:42

Building the Testimonials Section - Part 1 Preview 18:14

Building the Testimonials Section - Part 2 Preview 24:38

Building the Pricing Section - Part 1 Preview 24:00

Building the Pricing Section - Part 2 Preview 25:57

Building the Features Part Preview 19:06

Building the Call-To-Action Section - Part 1 Preview 26:12

Building the Call-To-Action Section - Part 2 Preview 24:45

Building the Call-To-Action Section - Part 3 Preview 29:09

Building the Footer - Part 1 Preview 19:15

Building the Footer - Part 2 Preview 27:58

Omnifood Project – Responsive Web Design 9 lectures

Section Intro Preview 00:47

How Media Queries Work Preview 14:23

How to Select Breakpoints Preview 04:47

Responding to Small Laptops Preview 15:33

Responding to Landscape Tablets Preview 19:24

Responding to Tablets Preview 25:24

Building the Mobile Navigation Preview 37:58

Responding to Smaller Tablets Preview 18:56

Responding to Phones Preview 26:42

Omnifood Project – Effects, Optimizations and Deployment 11 lectures

Section Intro Preview 00:50

A Short Introduction to JavaScript Preview 18:48

Making the Mobile Navigation Work Preview 08:32

Implementing Smooth Scrolling Preview 29:24

Implementing a Sticky Navigation Bar Preview 28:02

Browser Support and Fixing Flexbox Gap in Safari Preview 19:06

Testing Performance With Lighthouse Preview 08:45

Adding Favicon and Meta Description Preview 12:24

Image Optimizations Preview 18:26

Deployment to Netlify Preview 08:20

Making the Form Work With Netlify Forms Preview 07:49

The End! 1 lectures

Where to Go from Here Preview 04:32

[LEGACY] Old Course Version 1 1 lectures

Download the Old Course Version Preview 00:40