English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 323 lectures (31h 53m) | 20.2 GB
Learn How To Make Websites – HTML – CSS – Flexbox – Transitions – Animations – SVGs – The Box Model – CSS Specificity
ou can learn to build websites quickly and easily if it is taught correctly.
This course will show you how to build websites. It will give you a solid foundation in building websites.
By the end of this course, you will have strong skills in creating websites with HTML & CSS. As with any craft, the fundamentals are essential. If you have a strong foundation in the fundamentals, you will be poised to grow and develop professionally as a craftsperson who knows their craft.
My name is Todd McLeod and I began creating websites in 1997. I began teaching how to create websites in 2001. I am tenured faculty in California and I have taught individuals of all ability levels how to create websites.
After completing this course, you will have mastered the fundamentals of creating websites with HTML & CSS.
Here are the highlights of what you will learn in this course:
- Learn the art of building websites
- Understand what it takes to succeed
- Discover Google’s Teapot, how to change the news, and how to play the Dinosaur video game
- Gain insight into the history of the Internet and the World Wide Web
- Learn about the best documentation for building websites
- Understand how the World Wide Web works
- Discover new ways to use your web browser
- Acquire the ability to highlight webpages
- Learn all about developer tools
- Gain the ability to use an IDE (integrated development environment)
- Acquire the ability to use git and github for version control
- Learn how to code in HTML and CSS
- Gain a solid foundation in HTML and CSS
- Acquire the ability to use emmet
- Understand relative and absolute URLs
- Learn about CSS rule-sets and CSS selectors
- Learn how to link CSS documents to HTML documents
- Learn all about the layout of webpages including the box-model and flexbox
- Gain the ability to work with older layout modalities such as position and float
- Master the nuances of CSS specificity
- Gain the ability to correctly structure HTML documents
- Acquire mastery over media-queries
Learn the “above the fold” design pattern
Master using SVG’s to optimize your images and make your sites more performant
Acquire the ability to work with advanced techniques such as transitions and animations
If you want to learn how to create websites, the first place to begin is with the fundamentals of HTML & CSS. The first place to begin is with this course. This class is guaranteed to teach you how to build websites. Once enrolled, you will have access to this Excel course for the rest of your life.
Described as “fun” and “amazing” and “life changing,” Todd McLeod’s website course will forever transform your life. Try this course for yourself and see how quickly and easily you too can learn to build websites.
What you’ll learn
- Build beautiful webpages using today’s best practices
- Understand the importance of performance and build performant websites
- Acquire an outstanding foundation in the fundamentals of web programming
- Taught by a professor with 20 years of experience teaching individuals of all abilities
- Achieve mastery in the understanding and application of HTML & CSS
- Apply cutting-edge techniques such as Flexbox and SVGs
Table of Contents
Introduction
1 Welcome English
2 Course outline English
3 Code resources English
4 How To Succeed English
5 The Art of Building Websites English
Getting Started
6 Having Fun 1 English
7 Having Fun 2 English
8 Having Fun 3 English
Understanding The Internet & World Wide Web
9 History of the Internet English
10 History of the World Wide Web English
11 Who Controls the Internet & WWW English
12 Web Documentation English
13 Highlighting Webpages & Chrome Extensions English
14 How The Web Works English
An Introduction to HTML
15 Your First Webpage English
16 Anatomy of an HTML Page English
17 HTML Terminology English
An Introduction to CSS
18 A Separation of Concerns English
19 CSS Rule English
20 Linking CSS to HTML English
21 Multiple CSS Selectors English
Configuring Your Environment
22 Integrated Development Environments English
23 WebStorm English
24 Atomio English
25 Sublime English
26 Dreamweaver English
Becoming Skilled with Github
27 Github Overview English
28 Git & Github English
29 Setting up git and github on Windows English
30 Setting up git and github on Mac English
31 Terminal Essentials English
32 Creating a Master Local Git Repository English
33 Creating an OriginMaster Remote Github Repository English
34 Using Github English
35 Using Github English
HTML Essentials
36 Section Overview English
37 FIle Naming Conventions English
38 Folder Naming Conventions English
39 Opening A Project in Webstorm English
40 Essential Tags English
41 Emmetio English
42 Modifying Webstorm Formatting English
43 Tag Attributes English
44 Relative URLs English
45 Absolute URLs English
46 Comments English
47 Hands English
48 Hands English
CSS Essentials
49 Section Overview English
50 All HTML Tags & Attributes All CSS Selectors & Properties English
51 border Property English
52 border English
53 display Property English
54 padding & margin Properties English
55 Box Model English
56 box English
57 Review English
58 Hands English
59 Hands English
CSS Selectors
60 Section Overview English
61 CSS Resets English
62 CSS Selectors element class id English
63 Selectors attribute English
64 Selectors pseudo English
65 Selectors pseudo English
66 Selectors pseudo English
67 Selectors pseudo English
68 Selectors pseudo English
69 Selectors nested selectors English
70 margin 0 auto & The Display Property English
71 Hands English
72 Hands English
73 Hands English
74 Hands English
75 Hands English
76 Review English
CSS Order & Specificity
77 Section Overview English
78 The Browsers Application of CSS English
79 Challenge & Solution 1 English
80 Challenge & Solution 2 3 4 English
81 Challenge & Solution 5 6 English
82 Hands English
83 Hands English
84 Review English
Formatting Text
85 Section Overview English
86 font Property English
87 font English
88 font English
89 font English
90 font English
91 line English
92 letter English
93 Google Fonts English
94 text English
95 text English
96 text English
97 Hands English
98 Hands English
99 Review English
Structuring Documents
100 Section Overview English
101 Document Structure English
102 Semantic HTML English
103 Hands English
104 Hands English
105 Semantic HTML English
106 Semantic HTML English
107 Semantic HTML English
108 Semantic HTML English
109 Semantic HTML English
110 Semantic HTML English
111 Hands English
112 Hands English
113 Hands English
114 Review English
Layout Fundamentals Box Model & Display
115 Section Overview English
116 Layout Resources & Review English
117 Display Property Review English
118 Hands English
119 Hands English
120 HandsOn Exercise Horizontal Menu
121 Hands English
122 Taco Shop English
123 Review English
Layout with Flexbox
124 Section Overview English
125 Understanding Flexbox English
126 Containers & Creating A Flex Container English
127 Container Property flex English
128 Container Property flex English
129 Container Property flex English
130 Container Property justify English
131 Container Property align English
132 Container Property align English
133 Item Property align English
134 Item Property order English
135 Item Property flex English
136 Item Property flex English
137 Item Property flex English
138 Item Property flex English
139 Hands English
140 Hands English
141 Hands English
142 Hands English
143 Review English
Media Queries
144 Section Overview English
145 Understanding Media Queries English
146 Min English
147 Print Media Query English
148 Media Type & Expressions English
149 Taco Shop & Scaling Font English
150 Responsive Design & Mobile First Design English
151 Hands English
152 Hands English
153 Review English
Flexbox Design Patterns
154 Section Overview English
155 Googles Flexbox Design Pattern 1 English
156 Googles Flexbox Design Pattern 2 English
157 Googles Flexbox Design Pattern 3 English
158 Hands English
159 Hands English
160 Flexbox Example 1 English
161 Flexbox Example 2 English
162 Flexbox Example 3 English
163 Flexbox Example 4 English
164 Hands English
165 Review English
Layout with Position
166 Section Overview English
167 Layout Essentials English
168 Position Overview English
169 Position Fixed English
170 Position Relative English
171 Position Absolute English
172 Taco Shop English
173 Hands English
174 Hands English
175 Review English
Layout with Float
176 Section Overview English
177 Float Images & Overflow Auto English
178 Float Layout & Clearing Floats English
179 Float Example English
180 Taco Shop English
181 Hands English
182 Hands English
183 Review English
Background
184 Section Overview English
185 Background Color English
186 background English
187 background English
188 background English
189 background English
190 Hands English
191 HandsOn Exercises Solutions
192 Review English
Refactor Challenge
193 Section Overview English
194 Analyzing The Starting Files English
195 inline English
196 flexbox Refactor English
FullPage AboveTheFold
197 Section Overview English
198 Step 1 HTML Structure English
199 Step 1 HTML Structure English
200 Step 2 Layout English
201 Step 2 Layout English
202 Step 3 background image English
203 Step 3 background image English
204 Step 4 Format Text English
205 Step 4 Format Text English
206 Step 5 Style The Button English
207 Step 5 Style The Button English
208 Step 6 Mobile English
209 Step 6 Mobile English
210 Review English
Expanding Your Skillset
211 Section Overview English
212 q blockquote & cite elements cite attribute English
213 pre samp code kbd abbr elements English
214 HTML Entities English
215 Linking Images & Bookmarks English
216 box English
217 vertical English
218 mobile devices English
219 mobile devices English
220 mobile devices English
221 meta viewport English
222 Review English
Graphics
223 Section Overview English
224 Colors English
225 Picking Color Combinations English
226 Image Types English
227 Font Awesome English
228 Font Awesome English
229 Font Awesome English
230 Font Awesome to SVG English
231 Understanding SVG English
232 SVG Terminology English
233 SVG Path Element English
234 SVG Path English
235 SVG Stroke & Fill English
236 SVG English
237 SVG English
238 Styling SVGs with CSS English
239 SVG English
240 Symbol Use & CSS English
241 Symbol with Multiple Paths English
242 Leave Room For Strokes English
243 Stroke English
244 symbol & use vs img English
245 Review English
FullPage Background
246 Section Overview English
247 Fixed Header English
248 Fixed Header English
249 Header Containers English
250 Header Containers English
251 Make SVGS English
252 Make SVGS English
253 Insert SVGs English
254 Insert SVGs English
255 Style SVGs English
256 Dev Tools Styling & Company Naming English
257 Adding Links & Style English
258 Responsive Mobile English
259 Responsive Mobile English
260 Mobile Menu English
261 Mobile Menu English
262 Review English
Favicon
263 Section Overview English
264 Create An Image English
265 Generate Favicon English
266 Generate Favicon English
267 Generate Favicon English
268 Generate Favicon English
269 Favicon Essentials English
270 Full Page Background English
271 Review English
Flexbox Practicum Part 1
272 Section Overview English
273 Counter English
274 Counter English
275 Tab Menu English
276 Tab Menu English
277 Header Menu English
278 Header Menu English
279 Review English
Transitions & Animations
280 Section Overview English
281 Transitions English
282 Transition Examples English
283 Animations English
284 Animation Examples & Hands English
285 Hands English
286 Hands English
287 Transform & Animations English
Flexbox Practicum Part 2
288 Section Overview English
289 Footer Saving English
290 Sidebar Menu English
291 Welcome Page English
292 Dial Icon English
293 Feature List English
294 Card English
295 Card Group English
You Are A Hero
296 Section Overview English
297 Above English
298 Side English
299 Linear English
300 Audio & video English
301 Markdown English
302 Vendor Prefixes AutoPrefixer Task English
303 Publishing Your Site English
304 Publishing Your Site English
305 Publishing Your Site English
306 Publishing Your Site English
307 Review English
Forms
308 Section Overview English
309 The Form Element English
310 The Input Element English
311 The Label Element English
312 The Input Element English
313 textarea select option optgroup English
314 fieldset & legend English
315 Form Examples progress meter English
316 Review English
Now Go Build It
317 Overview of Three Projects English
318 Game Plan English
319 Starting Files English
320 Game Plan English
321 Starting Files English
Farewell & Next Steps
322 Congratulations English
323 Bonus lecture English
Resolve the captcha to access the links!