- Level Foundation
- Duration 11 hours
- Course by NIIT
-
Offered by
About
Web content is accessed by millions across the globe every day. Attractive web pages help businesses grow and provide an omnipresent experience to the viewers. In this course you will get an understanding on how HTML5 is used to structure simple web pages from scratch and how CSS3 enhances their appearance. The customized learning environment and step-by step teaching approach of this course augments the learning experience. The real-world scenarios and challenges presented during the course will train you to resolve the different challenges that front-end engineers stumble upon in their work life.Modules
Context Setting
1
Videos
- Context Setting
1.1 Anatomy of a HTML element and a HTML document
2
Videos
- Anatomy of a HTML element and a HTML document
- Watch and Repeat : Create a HTML document in notepad/text editor
1.2 Create a Web page using commonly used HTML5 elements
4
Videos
- Create a web page using commonly used HTML5 elements
- Watch and Repeat : Downloading and Installing VS code
- Watch and Repeat : Creating header and paragraph elements in a HTML file
- Watch and Repeat : Creating image , anchor and list tags in a HTML file
1
Readings
- IDE for creating HTML documents and W3C Compliance
1.3 Install a HTTP server to deliver web pages
1
Videos
- Install a HTTP server to deliver web pages
1.4 Use Emmet Tool Kit and multi cursor feature in VS Code
2
Videos
- Use Emmet Tool Kit and multi cursor feature in VS Code
- Watch and Repeat : Emmet Toolkit and Multi-cursor
Practice
- The World Wide Web
- Pentogram Font Catalog Challenge
3
Videos
- Practice Brief 1
- Practice Brief 2
- Practice Debrief :: Develop a web page using HTML
1
Readings
- Instructions to upload the Programming Assignment Solution
Summary
1
Assignment
- Develop a web page using HTML5
1
Videos
- Learning Consolidation
1
Readings
- Develop a web page using HTML
Context Setting
1
Videos
- Context Setting
2.1 Differentiate between non-semantic and semantic elements
2
Videos
- Differentiate between non-semantic and semantic elements
- Watch and Repeat : Semantic and Non-Semantic Elements
2.2 Identify the benefits of using semantic elements
1
Videos
- Identify the benefits of using semantic elements
2.3 Explain the use of semantic markup by screen readers for page navigation
2
Videos
- Explain the use of semantic markup by screen readers for page navigation
- Watch and Repeat : Aria Lables
2.4 Structure a web page using semantic HTML elements
3
Videos
- Structure a web page using semantic HTML elements
- Watch and Repeat : Popular semantic HTML5 elements
- Watch and Repeat : Semantic elements like Footer, Figure and Details
Practice
- Positive Work Environment Task Force Challenge
2
Videos
- Practice Brief
- Practice Debrief
Summary
1
Assignment
- Structure a Web page using Semantic and HTML5 elements
1
Videos
- Learning Consolidation
1
Readings
- Structure a Web page using Semantic and HTML5 elements
Context Setting
1
Videos
- Context Setting
3.1 Use CSS to style a HTML page
2
Videos
- Use CSS to style a HTML page
- Watch and Repeat : Different ways of applying styles
3.2 Select HTML elements using CSS selectors
2
Videos
- Select HTML elements using CSS selectors
- Watch and Repeat : Select HTML elements using CSS selectors
3.3 Apply styles to an HTML element using CSS properties
2
Videos
- Apply styles to an HTML element using CSS properties
- Watch and Repeat : Apply styles using CSS properties
Practice
- Pentogram Font Catalog Preview
2
Videos
- Practice Brief
- Practice Debrief
Summary
1
Assignment
- Style a Web page using CSS properties
1
Videos
- Learning Consolidation
1
Readings
- Style a Web page using CSS properties
Context Setting
1
Videos
- Context Setting
4.1 Create layouts by using the CSS box model
1
Videos
- Create layouts by using the CSS box model
4.2 Apply margin, border and padding to add more breathing space to the design
3
Videos
- Apply margin, border and padding to add more breathing space to the design
- Watch and Repeat : CSS Box Model
- Watch and Repeat : Standard and Alternate box model
4.3 Manage grouping of elements using the CSS display property
2
Videos
- Manage grouping of elements using the CSS display property
- Watch and Repeat : CSS display property
4.4 Apply CSS specificity
2
Videos
- Apply CSS specificity
- Watch and Repeat : CSS specificity
4.5 Use BEM syntax while creating the CSS class names
1
Videos
- Use BEM syntax while creating the CSS class names
Practice
- Sam Anderson's Portfolio
2
Videos
- Practice Brief
- Practice Debrief
Summary
1
Assignment
- Style a Web page using CSS box model
1
Videos
- Learning Consolidation
1
Readings
- Style a Web page using CSS box model
Auto Summary
Unlock the potential of web development with our engaging course, "Introduction to Building Web Pages using HTML5 and CSS3." This foundational course in IT & Computer Science offers a comprehensive journey into the world of web design, perfect for beginners looking to create visually appealing and functional websites. Guided by expert instructors from Coursera, you'll master the essentials of HTML5 for structuring web pages and CSS3 for enhancing their visual appeal. The course's step-by-step approach ensures a smooth learning curve, while real-world scenarios and challenges provide practical experience in tackling common issues faced by front-end engineers. With a duration of 660 minutes, the course is designed to fit into your schedule, offering flexible subscription options including Starter and Professional plans. Ideal for aspiring web developers and those looking to strengthen their foundational skills, this course will equip you with the knowledge and confidence to build stunning web pages from scratch. Join us and start your journey towards becoming a proficient web developer today.

NIIT