Complete HTML and CSS with SCSS course ( 2 projects)
- Description
- Curriculum
- FAQ
- Reviews
This course is designed to introduce beginners to the fundamental concepts and techniques of web development using HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). It will equip students with the skills necessary to create and style visually appealing and fully functional websites. Through a hands-on, project-based approach, this course will guide learners through the process of building structured web pages and applying various design elements. By the end of the course, students will be able to develop basic websites, style them effectively, and understand the underlying technologies that drive web design.
Key Topics Covered:
Introduction to HTML:
Structure and syntax of HTML Common HTML elements (headings, paragraphs, links, images, etc.) HTML document structure (DOCTYPE, <html>, <head>, <body>) Lists, tables, and forms Embedding media (audio, video, iframes) HTML semantic tags (header, footer, article, section, etc.)
Introduction to CSS:
Basics of CSS syntax (selectors, properties, values) Inline, internal, and external CSS Color properties and text formatting (font-family, font-size, etc.) Box model (margins, padding, borders, content area) Styling links, buttons, and other interactive elements CSS positioning (static, relative, absolute, fixed) CSS layout techniques (Flexbox and Grid) Advanced CSS Concepts: Responsive web design (media queries) CSS transitions and animations Customizing typography and images (web-safe fonts, image optimization) Web Accessibility and Best Practices.
Writing clean and semantic HTML for improved accessibility CSS best practices and optimization Mobile-first design principles Practical Applications and Projects: Creating simple landing pages Building a personal portfolio website Designing responsive websites that adapt to various screen sizes Debugging and troubleshooting common issues Learning Outcomes: By the end of this course, students will:
– Understand how to structure a website using HTML.
– Be proficient in applying styling and layout techniques with CSS.
– Be able to create responsive web pages that work across devices.
– Understand best practices for clean, maintainable code.
– Develop the foundational skills needed for more advanced web development topics.
Prerequisites:
No prior experience in web development is required. This course is perfect for beginners. Course Delivery: Interactive lessons with practical coding exercises Projects and assignments to build real-world applications Quizzes and reviews to reinforce key concepts Tools and Resources: Text editor ( Visual Studio Code) Web browsers (Chrome, Firefox, etc.) for testing Access to online resources and community forums for support This course provides a strong foundation for anyone looking to pursue a career in web development or for those interested in learning how to create their own websites. Whether you are looking to build personal projects or develop professional web applications, the skills acquired in this course will be invaluable.
-
17
14 embedding audio and video on a web page -
18
15 anchor state soudo class
-
19
16 anchor soudo element
-
20
17 external styling linkage
-
21
First practice chanllenge1. Create a folder on your desktop
2. Open the folder with visual studio code editor or any related editor
3. Create a file and name the file index.html
4. Use exclamation mark to generate html boiler plate
5. Color the body with brown background by using inline css styling
6. Insert image into the page
7. Create heading (h3) and paragraph
-
22
First Challenges
-
23
19 part 1 css color
-
24
20 part 2 css color
-
25
21 background
-
26
22 border
-
27
23 margin
-
28
24 padding
-
29
25 css height and width
-
30
26 css box model
-
31
27 outline and outline offset
-
32
28 formatting text (text and box shadow)
-
33
29 css order and unorder list
-
34
30 positioning
-
35
31 float layout
-
36
32 css combinators (selection)
-
37
33 opacity and transparency
-
38
34 part 1 second challenges
-
39
35 part 2 second challenges
-
40
36 part 1 css units
-
41
37 part 2 css units
-
42
38 specificity
-
43
39 math functions and linear-gradient
-
44
40 radial-gradient
-
66
62 project one overview
-
67
63 resetting browser for page layout
-
68
64 creating navigation bar
-
69
65 wrap up navigation bar
-
70
66 applying background image to the home navbar
-
71
67 wrapping up home section
-
72
68 organizing files
-
73
69 service section heading and background
-
74
70 background overlay
-
75
71 wrapper service card part 1
-
76
72 wrapper service card part 2
-
77
73 roundup of service card part 3
-
78
74 building up gallery section
-
79
75 gallery grids layout
-
80
76 setting up data lightbox
-
81
77 finalizing data lightbox
-
82
78 about heading section
-
83
79 about section part 1
-
84
80 about section part 2
-
85
81 about section part 3
