HTML CSS and SASS Bootcamp – Web Development Courses

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

Introduction To HTML

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

FLEXBOX

Grid System

Advanced CSS Concepts

CSS Animation

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

Website Challenge

Login UI Project

SASS

Conclusion and Next Step

Git and GitHub – BONUS SECTION

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

5.0

Total 1 Rating

2 Ratings

0 Rating

Okpola Ugbolochi

2 years ago

An excellent course for beginners and any person looking to improve on their HTML and CSS skills, what I liked about the course was it was project based so you get to practice along the way and build projects with the skills learnt.

About Course

Course Content

Introduction

1. Introduction

2.How to get the best from this course

Environment Setup

3.Environment setup – Installing necessary tools

4. Visual Studio Code Setup

5. Visual Studio Code Setup – EMMET Extension

6. Emmet Solution

7. RESOURCES AND COURSE FILES

Introduction To HTML

8. What is HTML?

9. HTML Syntax – Tags, Elements and Attributes

1O. Structure of an HTML Page

11. Comments

12. Header Tags

13.Paragraph Tags

14. Formatting text

15. Unordered List

16. Ordered List

17. Images and Favicon

18. Adding Audio files to a webpage

19. Adding Video files to a webpage

20. Forms

21. Table

22.Links

23. iFrames

24. Entities and Emojis

25. Icon Fonts

26.Types of Elements

27.How to layout HTML page semantically

Introduction to CSS

28. What is CSS?

29.CSS Syntax

30. Inline and Internal CSS

31.External CSS

32. CSS rule priority

33. CSS Comments

34. Colors

35. Selectors – Classes and id

36. Border

37. Border – CSS Challenge

38. Padding

39. Margins

40.Span Tag and Class

41. Challenge 2 – Basic Web Page

42. Challenge 2 – Basic Web Page – Solution Part 1

43. Challenge 2 – Basic Web Page – Solution Part 2

44. The Box Model – Part 1

45. The Box Model – Part 2

46. Universal selector

47.Formatting Text

48.Fonts

49. Google Fonts

50. Links and Pseudo-classes

51. Buttons

52. Absolute and Relative position

53. Fixed Position

54. Floats – We don’t use them in modern CSS

55. Replacing Floats with Flexbox

56. Background image

57. Units in CSS

58.Media Queries for Responsive Design

59. Debugging your code

60.Code Faster with EMMET Extension

PROJECT 1 – A Restaurant Website

61. Project Overview – What we would create

62. Project Environment Setup

63. Building the Header section – Markup

64. Adding some global styles

65. Building the Header section – CSS

66. Building the Intro section – Markup

67.Building the Intro section – CSS

68. Building the About section – Markup

69. Building the About section – CSS

70. Building the Menu section – Markup

71. Building the Menu section – CSS

72. Building the Testimonial section – Markup

73. Building the Testimonial section – CSS