Web Design for Beginners: Real World Coding in HTML & CSS

Web Design for Beginners: Real World Coding in HTML & CSS

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 11 Hours | 2.47 GB

Launch a career as a web designer by learning HTML5, CSS3, responsive design, Sass and more!

You can launch a new career in web development today by learning HTML & CSS. You don’t need a computer science degree or expensive software. All you need is a computer, a bit of time, a lot of determination, and a teacher you trust. I’ve taught HTML and CSS to countless coworkers and held training sessions for fortune 100 companies. I am that teacher you can trust.

Don’t limit yourself by creating websites with some cheesy “site-builder” tool. This course teaches you how to take 100% control over your webpages by using the same concepts that every professional website is created with.

This course does not assume any prior experience. We start at square one and learn together bit by bit. By the end of the course you will have created (by hand) a website that looks great on phones, tablets, laptops, and desktops alike.

In the summer of 2020 the course has received a new section where we push our website live up onto the web using the free GitHub Pages service; this means you’ll be able to share a link to what you’ve created with your friends, family, colleagues and the world!

What you’ll learn

  • Create any website layout you can imagine
  • Support any device size with Responsive (mobile-friendly) Design
  • Add tasteful animations and effects with CSS3
  • Use common vocabulary from the design industry
Table of Contents

Welcome!
1 Course Introduction
2 Big Picture Overview of Course (What To Expect)

HTML Essentials
3 Why HTML is Exciting
4 First Look at HTML
5 The Easiest Way to Get Started
6 Hands On! Create your First HTML File
7 Russian Stacking Dolls Bulleted Lists
8 HTML Document Structure
9 First Look at Attributes Linking Pages Together
10 Section 1 Review

Adding Media to a Web Page
11 Images
12 Audio Files
13 Video Files
14 Vector Graphics & Illustrations (SVG & Figma)

Text Basics
15 Headings
16 Lists
17 Bold & Italic
18 Special Characters

Semantics & Organization
19 Semantic Structural Elements
20 Navigation
21 Non-semantic Elements (div and span)
22 HTML Comments
23 The Section Element

Forms
24 Forms
25 Different Types of Inputs
26 Choosing Between a set of options

Tables
27 How to Create a Table of Data
28 Do Not Use Tables for Layout

CSS Essentials
29 CSS Introduction
30 CSS Selectors
31 The Cascade
32 Box Model
33 Quick Note About CSS Floats
34 Creating a Page Layout with Floats
35 Beauty School! Apply What We’ve Learned

Intermediate CSS
36 Styling Navigation Menu
37 Overlapping Content & Transparent Backgrounds

Less Exciting Yet Still Necessary CSS Tasks
38 Styling Data Tables
39 Styling Forms

CSS Typography
40 CSS Typography
41 Using Custom Web Fonts

Developer Timeout!
42 Developer Tools Inspect Elements

CSS Backgrounds
43 Background Images
44 Gradient Backgrounds
45 CSS Sprites
46 Full Width Backgrounds – Fixed Width Content

Responsive Web Design
47 Chapter Introduction
48 Responsive Web Design
49 Responsive Grids
50 Responsive Grid with Flexbox

What is Flexbox in CSS
51 Flexbox (Part 1)
52 Flexbox (Part 2)

CSS3 Special Effects
53 Box Shadows
54 Rounded Corners
55 CSS Transform
56 CSS Transitions
57 CSS Animations

Leveraging JavaScript without Writing JavaScript
58 Chapter Introduction
59 Slideshow (Part 1)
60 Slideshow (Part 2)
61 Reveal & Hide Content on Click Tap
62 Open Image in Modal Window (Gallery)

What is Bootstrap
63 Bootstrap (Part 1)
64 Bootstrap (Part 2)

Sass
65 Getting Started With Sass
66 Sass Basics
67 Sass Continued

Pushing a Website Live Up Onto The Web
68 Going Live using GitHub Pages

Cross Browser Compatibility
69 Cross Browser Support & Feature Detection

Beyond This Course
70 Next Steps
71 Bonus Lecture