HTML & CSS From Scratch in 30 Days
FREE CODE:
by Jonathan Grover
Who Should Take This Course
This class is perfect for anyone with a great website idea or just an interest in learning how to code. This is a beginner-level class so if you have basic computer literacy and an internet connection, you're all set. Learn at your own pace.You'll leave this class with the skills to create your very own stylish, professional, and responsive website.
What You Will Learn
Made lovingly with HTML5 & CSS3,- Site planning
- Text formatting
- Lists, Forms, Tables, and Links
- Embedding audio and video
- Styling and page layouts
- Responsive layouts for mobile devices via media queries
- Organization and professional workflow
- Publishing your site using FTP
- Best practices
- Search engine optimization.
Lectures consist of 56 videos ranging from 6 - 40min in length, covering slides, and follow along example code exercises (totaling 11 hours worth throughout the entire course). You also will have access to over 16 hours of prerecorded office hours videos Q & A where I answer common questions and show additional bonus exercises, share books, and demonstrate debugging on students issues.
Code Challenges
Code Challenges are opportunities for you to put what you've learned to practice by coding on your own or in small groups. A continuous project will be built out of the code challenges adding more to your site project with each challenge; allowing you to develop your own website start to finish in just 4 weeks.
Handouts and Resources
You will be provided with extensive handouts and suggested reference materials to continue your learning even after the course.
What People Are Saying
“It's really from zero to hero - you are certainly able to set up your basic webpage. Can't wait for the follow up class. Thank you Jonathan for your great teaching." -Stephan Kardos“Great teacher and a great class, I totally recommend it. Learned to built a website from 0 to 100. Its a good starting point if you want to master web programming. After the 4 weeks I can look at web code and not feel scared. ” -Mark Henninger
“Jonathan is a GREAT teacher. He really knows his stuff and unlike most techies he has great people skills and knows how to teach!... Walking into this class I had zero knowledge of HTML and CSS. I tried using WordPress to create my site with no success. I now am enjoying this so much I want to get good at it and hopefully someday do this on the side for some extra cash!” -Dan Norcott
“This class was amazing. I have struggled to learn HTML and CSS for many years, but he was able to break it down into simple tutorials that allowed me to progress slowly. The videos are easy to understand and follow at your own pace, and the activities give you a chance to put what you learned to practice. I highly recommend this course or any future courses that Jonathan teaches. ” -Hannah Tran
"Jonathan goes at a nice pace and allows you to understand things very easily. I recommend his classes to anyone. I knew nothing of the subject material when I signed up for his class and feel very good about it now.” -Ben Terry
“Such good classes and great, thorough explanations! Loved the lectures!” -Christine McSchneider
“Html/Css from scratch in 30 days is the best online course in learning html/css coding. I built my website www.ponyprintpress.com in 30 days! ... ” -Sandra Relf
“This has been one of the best class I've ever taken in my life. I learned from the basics to the advanced. Each class is very enjoyable, and very well organized, I have learned a lot... The teacher is a true expert. I look forward to enroll in new classes from him. Thank you very much Jonathan. You are the best!” -Javier Hurtado
SECTION 1: Course Orientation & Setup
Text
Lecture 1:
Course Orientation
Text
Lecture 2:
Setup Your Computer
SECTION 2: HTML & Web Fundamentals - 1h 49m
Text
Lecture 3:
1.1 Starting Code
10:30
Lecture 4:
1.1.0 Web Fundamentals
02:17
Lecture 5:
1.1.1 Getting Started
16:34
Lecture 6:
1.1.2 Document Structure
24:13
Lecture 7:
1.1.3 Text Formatting
12:37
Lecture 8:
1.1.4 Images
21:59
Lecture 9:
1.1.5 Links
06:29
Lecture 10:
1.1.6 Validating HTML
13:59
Lecture 11:
1.1.7 Site Publishing
Text
Lecture 12:
1.1 Completed Code
Text
Lecture 13:
1.1 Code Challenge
SECTION 3: Tables, Forms, & Iframes - 43m
Text
Lecture 14:
1.2 Starting Code
19:22
Lecture 15:
1.2.0 Introducing Tables, Forms, &...
10:13
Lecture 16:
1.2.1 Tables
04:46
Lecture 17:
1.2.2 Iframes
08:30
Lecture 18:
1.2.3 Forms
Text
Lecture 19:
1.2 Completed Code
Text
Lecture 20:
1.2 Code Challenge
20 questions
Quiz 1:
HTML Fundamentals
SECTION 4: HTML5 Elements - 1h 3m
Text
Lecture 21:
2.1 Starter Code
23:25
Lecture 22:
2.1.0 Introducing HTML5 Media,...
11:01
Lecture 23:
2.1.1 Video
10:40
Lecture 24:
2.1.2 Prep for HTML5
13:19
Lecture 25:
2.1.3 HTML5 Semantic Elements
04:13
Lecture 26:
2.1.4 Meta Data
Text
Lecture 27:
2.1 Completed Code
Text
Lecture 28:
2.1 Code Challenge
SECTION 5: CSS Fundamentals - 1h 44m
Text
Lecture 29:
2.2 Starter Code
09:58
Lecture 30:
2.2.0 Styling the Front-end
04:23
Lecture 31:
2.2.1 Setting up an External Style Sheet
14:28
Lecture 32:
2.2.2 Type Selector
15:11
Lecture 33:
2.2.3 Color Systems
02:45
Lecture 34:
2.2.4 Font Shorthand
06:35
Lecture 35:
2.2.5 Web Fonts
07:50
Lecture 36:
2.2.6 Class Selector
08:44
Lecture 37:
2.2.7 ID Selector
06:58
Lecture 38:
2.2.8 Descendent Selector
14:52
Lecture 39:
2.2.9 Psuedo Selector
11:48
Lecture 40:
2.2.10 Developer Tools (part 1)
Text
Lecture 41:
2.2 Completed Code
Text
Lecture 42:
2.2 Code Challenge
20 questions
Quiz 2:
HTML5 Semantic Elements & CSS Selectors
SECTION 6: Building Page Layouts - 3h 10m
Text
Lecture 43:
3.1 Starter Code
09:29
Lecture 44:
3.1.0 Element Display
37:59
Lecture 45:
3.1.1 Box Model
17:48
Lecture 46:
3.1.2 Box Aesthetics
37:01
Lecture 47:
3.1.3 Floating
08:24
Lecture 48:
3.1.4 Prep Layout
06:40
Lecture 49:
3.1.5 Applying Box Properties
06:44
Lecture 50:
3.1.6 Styling Tables
06:29
Lecture 51:
3.1.7 Styling Forms
01:42
Lecture 52:
3.1.8 Styling Iframes
04:29
Lecture 53:
3.1.9 Centering Content
03:28
Lecture 54:
3.1.10 Applying Box Shadows
04:06
Lecture 55:
3.1.11 Applying Gradients
03:26
Lecture 56:
3.1.12 Styling the Logo
06:31
Lecture 57:
3.1.13 Styling Main Sections
01:44
Lecture 58:
3.1.14 Styling Details Section
26:41
Lecture 59:
3.1.15 Creating Column Structure
06:45
Lecture 60:
3.1.16 Developer Tools (part 2)
Text
Lecture 61:
3.1 Completed Code
Text
Lecture 62:
3.1 Code Challenge
SECTION 7: Positioning & Sprites - 54m
Text
Lecture 63:
3.2 Starter Code
11:00
Lecture 64:
3.2.0 Positioning Techniques
04:49
Lecture 65:
3.2.1 Z-Index Layering
04:49
Lecture 66:
3.2.2 Sprite Rollovers
16:14
Lecture 67:
3.2.3 Styling Navigation
16:46
Lecture 68:
3.2.4 Styling the Social Media Bar
Text
Lecture 69:
3.2 Completed Code
Text
Lecture 70:
3.2 Code Challenge
20 questions
Quiz 3:
CSS Page Layout
SECTION 8: Responsive Layout - 1h 14m
Text
Lecture 71:
4.1 Starter Code
12:21
Lecture 72:
4.1.0 Responsive Layout Techniques
11:41
Lecture 73:
4.1.1 Setting Up Local Responsive Testing
08:47
Lecture 74:
4.1.2 Prep HTML for Responsive Layout
40:24
Lecture 75:
4.1.3 Applying CSS3 Media Queries
Text
Lecture 76:
4.1 Completed Code
Text
Lecture 77:
4.1 Code Challenge
SECTION 9: Finishing Touches & Onward - 27m
Text
Lecture 78:
4.2 Final Code
16:13
Lecture 79:
4.2.0 Adding PHP Mailer Script
10:01
Lecture 80:
4.2.1 Resets, Grid Systems, & Templates
Text
Lecture 81:
4.2 Code Challenge
10 questions
Quiz 4:
CSS Positioning & Responsive Layout
Text
Lecture 82:
Final Words
