HTML and CSS Essentials With Bootstrap

This page organises learning activities into Lab Activities, Individual Activities, and Quiz. Each item links to its own dedicated page for instructions, submission, and references.

Back to Topic Jump to Activities

Lecture Slides

View-only presentation • Click to navigate
Slides by Notes Chapter 2 Open Slides in New Tab

ACTIVITIES FOR CHAPTER 2

In-Class Practical

Guided

Guided activities during class to build understanding before lab submission. Complete together with lecturer support.

Practical 2A (Part 1)
HTML Quick Build
Open
Practical 2A (Part 2)
HTML Quick Build
Open
Practical 2B (Part 1)
Displaying Webpages with CSS (Inline, Internal & External)
Open
Practical 2B (Part 2)
Types of CSS Selectors (Element, Class, ID, Group, Descendant, Universal)
Open
Practical 2B (Part 3)
Categories of CSS Properties
Open
Practical 2C
Bootstrap grid system and responsive design
Open
Tip: Stop after each step and show output before continuing.

Lab Activities

Submission

Individual lab work for assessment. Apply what you practised in class.

Lab Activity 2A
Perform Web Page Using HTML
Open
Lab Activity 2B
Perform Web Page with Cascading Style Sheet
Open
Lab Activity 2C
Apply Bootstrap grid techniques to produce responsive web interfaces.
Open
Lab Activity 2D
Develop responsive layouts using Bootstrap’s predefined CSS classes.
Open
Tip: Screenshots are compulsory for selected steps.

Exercise

In Class Exercise

Check your understanding of certain concepts of this chapter.

HTML Text Formatting
Test your understanding of HTML text formatting elements.
Open
Types of CSS Selectors
Analyse the usage of different CSS selectors in web page styling.
Open
Categories of CSS Properties
Test your understanding of different categories of CSS properties and their roles in styling web elements.
Open
Keyboard Shortcuts for Web Development
This page allows students to share useful keyboard shortcuts while also serving as a reference for everyone during web development activities.
Open
Tip: Emphasise conceptual understanding for this topic.

Quiz

Assessment

Check your understanding of concepts before moving to the next chapter.

Quiz 2A
Intro to HTML
Open
Quiz 2B
HTML and CSS Essentials
Open
Quiz 2C
HTML and CSS Essentials with Bootstrap
Open
Tip: Focus on concepts, not memorisation.