HTML CSS and SASS Bootcamp
About Course
Learn web design & web development from scratch using HTML, CSS & Sass. We cover CSS Animation, Grid, FlexBox and Git.
This course is for beginners who want to learn web design and web development, as well as for existing web designers/developers who want to sharpen their understanding and skill in creating responsive and great websites.
In this web design course, we begin by going over the fundamentals of HTML and CSS, after which we look at the essentials of page layout.
We then create a mini project to test our understanding.
We also cover Flexbox, Grid layout, CSS Animation, SASS and some advanced CSS topics which you need for a good foundation in web design and web development. This would enable us to build a big project where we implement all the topics discussed.
We then proceed to teach about the COMMAND LINE, GIT and GITHUB, which is a tool every web developer should be familiar with.
WHAT IS THE GOAL OF THIS COURSE?
At the end of this course, you would be confident about creating responsive real-world websites with HTML and CSS and your understanding of all the essentials would be solidified. Your web design and web development skills would also be sharpened.
WHAT IS COVERED IN THIS COURSE?
1. Introduction and VSCode setup
2. HTML and CSS Fundamentals
3. Build a simple Page with HTML and CSS Basics
4. How to code HTML and CSS faster with EMMET
5. Build a Restaurant Website
6. FlexBox
7. Grid Layout – With Mini project
8. Advanced CSS Concepts
9. CSS Animations – transitions, transforms, and Keyframes.
10. Build a Wed Design Agency Website using many advanced concepts learned.
11. Optimize and Host the website on Netlify.
12. SASS – Syntactically Awesome Stylesheet
We are confident that at the end of this course, your web design and web development skills with HTML, CSS and SASS would be greatly improved.
This course is project-based.
We believe the best way to learn web design and web development is by practicing and that is why we build several projects including real-world responsive websites from scratch with HTML CSS and SASS. With the projects you build in this web design and web development course, you would be able to approach and any web design or web development project with clarity and confidence.
Lecture Approach
This web design and web development course with HTML, CSS and SASS take a beginner-friendly approach. We explain many advanced CSS concepts in an easy to understand manner. We cover the important basics of web development before delving into advanced areas in web development.
Course Content
Introduction
-
1. Introduction
01:26 -
2.How to get the best from this course
01:58
Environment Setup
-
3.Environment setup – Installing necessary tools
01:25 -
4. Visual Studio Code Setup
02:07 -
5. Visual Studio Code Setup – EMMET Extension
02:38 -
6. Emmet Solution
01:58 -
7. RESOURCES AND COURSE FILES
00:00
Introduction To HTML
-
8. What is HTML?
01:59 -
9. HTML Syntax – Tags, Elements and Attributes
03:54 -
1O. Structure of an HTML Page
06:12 -
11. Comments
01:43 -
12. Header Tags
03:53 -
13.Paragraph Tags
01:58 -
14. Formatting text
03:31 -
15. Unordered List
04:37 -
16. Ordered List
02:12 -
17. Images and Favicon
04:59 -
18. Adding Audio files to a webpage
03:34 -
19. Adding Video files to a webpage
03:26 -
20. Forms
11:08 -
21. Table
02:44 -
22.Links
08:58 -
23. iFrames
03:43 -
24. Entities and Emojis
04:04 -
25. Icon Fonts
04:31 -
26.Types of Elements
03:33 -
27.How to layout HTML page semantically
07:41
Introduction to CSS
-
28. What is CSS?
01:24 -
29.CSS Syntax
02:48 -
30. Inline and Internal CSS
06:04 -
31.External CSS
03:50 -
32. CSS rule priority
04:35 -
33. CSS Comments
02:01 -
34. Colors
05:45 -
35. Selectors – Classes and id
04:18 -
36. Border
07:15 -
37. Border – CSS Challenge
05:49 -
38. Padding
05:08 -
39. Margins
05:33 -
40.Span Tag and Class
02:54 -
41. Challenge 2 – Basic Web Page
02:40 -
42. Challenge 2 – Basic Web Page – Solution Part 1
06:07 -
43. Challenge 2 – Basic Web Page – Solution Part 2
10:59 -
44. The Box Model – Part 1
05:23 -
45. The Box Model – Part 2
05:39 -
46. Universal selector
01:55 -
47.Formatting Text
07:09 -
48.Fonts
02:56 -
49. Google Fonts
02:43 -
50. Links and Pseudo-classes
07:18 -
51. Buttons
08:37 -
52. Absolute and Relative position
13:26 -
53. Fixed Position
03:26 -
54. Floats – We don’t use them in modern CSS
04:18 -
55. Replacing Floats with Flexbox
03:39 -
56. Background image
08:10 -
57. Units in CSS
05:07 -
58.Media Queries for Responsive Design
10:42 -
59. Debugging your code
04:50 -
60.Code Faster with EMMET Extension
12:34
PROJECT 1 – A Restaurant Website
-
61. Project Overview – What we would create
03:30 -
62. Project Environment Setup
07:14 -
63. Building the Header section – Markup
05:07 -
64. Adding some global styles
07:51 -
65. Building the Header section – CSS
07:30 -
66. Building the Intro section – Markup
03:51 -
67.Building the Intro section – CSS
17:38 -
68. Building the About section – Markup
03:14 -
69. Building the About section – CSS
06:33 -
70. Building the Menu section – Markup
06:29 -
71. Building the Menu section – CSS
15:42 -
72. Building the Testimonial section – Markup
03:16 -
73. Building the Testimonial section – CSS
09:48 -
74.Building the Order section – Markup
11:10 -
75. Building the Order section – CSS
12:56 -
76. Building the Footer section – Markup
02:02 -
77. Building the Footer section – CSS
06:01
FLEXBOX
-
78. Flexbox Part 1
17:33 -
79. Flexbox Part 2
11:59
Grid System
-
80. CSS Grid System – Part 1
21:07 -
81. CSS Grid System – Part 2
08:01 -
82. CSS Grid System – Part 3
10:52
Advanced CSS Concepts
-
83. Pseudo Classes
07:35 -
84. Pseudo Elements
05:35 -
85. Using the before Pseudo Elements
05:57 -
86. Box Shadow
05:46 -
87. CSS Variables
05:13 -
88. Background
15:53
CSS Animation
-
86.Transition
17:12 -
90. Transform – Translate Property
09:03 -
91. Transform – Scale Property
03:20 -
92. Transform – Rotate Property
04:17 -
93. Transform Origin
01:38 -
94. Transform – Skew Property
02:00 -
95. Keyframes
06:08
Project 2 – Design Agency Website
-
96.Project Overview – What we would create
03:54 -
97.Environment Setup
02:52 -
98. Building the Header section – Markup
06:50 -
99.Building the Header section – CSS – Part 1
23:40 -
100. Building the Header section – CSS – Part 2
22:17 -
101. Building the Intro section – Markup
07:24 -
102. Building the Intro section -CSS
30:31 -
103. Building the About section – Markup
04:21 -
104. Building the About section -CSS
12:11 -
105.Building the Service section – Markup
09:04 -
106.Building the Service section – CSS
23:08 -
107. Building the Pricing section – Markup
08:37 -
108. Building the Pricing section – CSS
30:06 -
109. Building the Testimonial section – Markup
09:32 -
110. Building the Testimonial section – CSS
14:13 -
111. Building the Contact section – Markup
15:54 -
112. Building the Contact section – CSS
22:49 -
113. Fixing the contact us section image
01:31 -
114. Building the Footer section – Markup
07:50 -
115. Building the Footer section – CSS
09:42 -
116. Linking up various sections
02:50
Host Your Website With Netlify
-
117. Host Your Website With Netlify
06:11
Website Challenge
-
118. Easybank Website Challenge
04:07 -
119. Link to Challenge Starter Files and Solution
00:00
Login UI Project
-
120. Project Overview – What we would create
02:14 -
121. Setting up our work environment
03:38 -
122. Header section Markup
05:36 -
123. Header section CSS
21:38 -
124.Content Section HTML Part 1
02:37 -
125. Content Section CSS Part 1
03:15 -
126. Content Section HTML Part 2
05:58 -
127. Content Section CSS Part 2
08:17 -
128.Completing the login section
16:47 -
129. Creating the Register and Reset Section HTML
06:30
SASS
-
130. What is SASS?
05:02 -
131. Install Sass with NodeJSDraft Lesson
07:56 -
132. Install Sass with VSCode extension
07:46 -
133. Methods for naming CSS classes
04:25 -
134. Variables
13:05 -
135. Nesting and Mixins
09:17 -
136. Nesting, Mixins and Functions
16:52 -
137. Extends
14:12 -
138. Footer styles
03:04 -
139. CSS Architecture
03:29 -
`140. CSS Architecture With Partials and Imports
28:55 -
141.Prefix Your Css Using AutoPrefixer
03:29 -
142. Compress your css code
03:04 -
143. Browser Testing
02:28
Conclusion and Next Step
-
144. Conclusion
02:33
Git and GitHub – BONUS SECTION
-
145.Introduction to Git
06:30 -
146.Set username and password
05:01 -
147. Command Line Basics
03:28 -
148. Git Initialization
03:54 -
149. Staging and Making Commit
03:45 -
150.Express Commits
06:05 -
151. Git Log and Show
03:49 -
152. Git Checkout
03:10 -
153. Git Alias
02:32 -
154. Git Branch
07:52 -
155. Git Merge
01:59 -
156.Connecting to GitHub
04:47