Web Track Week 1: Basic HTML, CSS

Getting your Dev Environment ready:

Required Software:
● A web browser (preferably Google Chrome)
● A text editor (preferably VSCode or Atom)
○ Do note the difference between a text editor and an IDE
○ Download link for VSCode - https://code.visualstudio.com/download
○ https://www.youtube.com/watch?v=6jFPyVEDZic if you wish to know more about
text editors and IDE
● A video about VSCode installation: https://www.youtube.com/watch?v=MlIzFUI1QGA

Intro to the Web:

1. The Http and the Web | Http Explained | Request-Response Cycle
https://www.youtube.com/watch?v=eesqK59rhGA

2. Web pages, Websites, and Web Applications

https://www.youtube.com/watch?v=ylbQrYhfa18

Basics Of HTML:
1. Basic boilerplate HTML, Intro to tags:
https://www.youtube.com/watch?v=pQN-pnXPaVg
Excellent resource to get started with HTML, and understand the basic structure of an
HTML document. We don’t recommend watching the entire video in one sitting, study it
slowly and in parts.
Contents :
(0:0:00) Introduction
(0:01:54) Choosing a Text Editor
(0:08:13) Creating an HTML file
(0:20:31) Basic Tags
(0:36:47) Comments
(0:48:07) Formatting a Page
(0:59:16) Links
(1:07:33) Images
(1:23:00) Lists
(1:28:53) Tables
(1:37:21) Divs & Spans
(1:57:21) Meta Tags
 2. Bold and Italics tags
Old style:
Bold tag - https://www.w3schools.com/tags/tag_b.asp
Italics tag - https://www.w3schools.com/tags/tag_i.asp

New style:
Bold tag - https://www.w3schools.com/tags/tag_strong.asp
Italics tag - https://www.w3schools.com/tags/tag_em.asp

3. Details about inline and block elements

https://www.youtube.com/watch?v=bOh9WjucNsA

4. Semantic HTML and why its required

https://www.youtube.com/watch?v=kGW8Al_cga4

Exercises to test understanding:

● Headings:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/headli
ne-with-the-h2-element
● P tag:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/inform
-with-the-paragraph-element
● Img tag:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/add-i
mages-to-your-website
● A tag
○ https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html
5/link-to-external-pages-with-anchor-elements
○ https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html
5/link-to-internal-sections-of-a-page-with-anchor-elements
● Lists
○ https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html
5/create-a-bulleted-unordered-list
○ https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html
5/create-an-ordered-list
● Tables: https://www.w3schools.com/html/exercise.asp?filename=exercise_html_tables1
Basics of CSS:
1. Ways of specifying CSS (Cascading Style Sheet)
https://www.youtube.com/watch?v=ArUL-He_AN0

2. Classes/IDs
https://www.youtube.com/watch?v=4C_-y9dIc54

3. CSS selectors
https://www.youtube.com/watch?v=TbfIyjNTXbA
https://web.dev/learn/css/selectors/

4. Colors
https://web.dev/learn/css/color/

5. Box Model
https://www.youtube.com/watch?v=5koxb4JaDqc
https://web.dev/learn/css/box-model/
https://web.dev/learn/css/borders/

6. Shadows, Opacity
https://www.youtube.com/watch?v=kZAlp-MDvlI
https://web.dev/learn/css/shadows/

7. Fonts
https://www.youtube.com/watch?v=Bc6tss3gEvU