HTML, CSS, and the Web (CS/INF2215 Lecture 1)
This enhanced lab is based on Lecture 1 of CS/INF2215 Web Technologies
It includes extended tasks, hands-on challenges, and critical thinking questions to deepen
your understanding of HTML, CSS, DOM, responsive design, and Bootstrap.
Part 1: HTML Structure and Tags
Tasks:
1. Create a file `index.html` with a basic HTML structure.
2. Add headings (h1-h6), paragraphs, horizontal rules, and line breaks.
3. Create an unordered and ordered list of your top 5 favorite books and hobbies.
4. Add images and use the alt attribute properly.
5. Create links to your favorite websites.
Challenge:
- Create a table displaying your weekly schedule (Mon–Fri). Include at least 3 rows and 3
columns.
Questions:
- What is the purpose of the <head> section in HTML?
- Why do we use semantic tags like <section>, <article>, and <footer>?
Bonus:
- Try using a favicon in your page.
Part 2: Understanding and Exploring the DOM
Tasks:
1. Open your HTML file in Chrome or Firefox.
2. Use the developer tools to inspect elements.
3. Modify a paragraph’s text directly in the browser.
4. Highlight and explain the nested structure of elements in the DOM.
Questions:
- How is the DOM different from the HTML file?
- What happens in the browser when you add or delete nodes in the dev tools?
Part 3: Forms in HTML
Tasks:
1. Create `form.html` with input fields: Name, Email, Password, Gender (radio), and
Interests (checkbox).
2. Add a dropdown to select your country.
3. Add a submit button.
Challenge:
- Use fieldsets and legends to organize the form logically.
Questions:
- What is the difference between GET and POST methods in forms?
- What happens when a form is submitted without a required input?
Bonus:
- Create an HTML form that allows uploading a profile picture.
Part 4: CSS Styling
Tasks:
1. Create `style.css` and link it to your HTML files.
2. Style text color, fonts, background, spacing, and alignment.
3. Add hover effects to links and buttons.
Challenge:
- Use class and ID selectors to style different parts of your site.
Questions:
- What’s the difference between inline, internal, and external CSS?
- How do you resolve conflicting styles between selectors?
Part 5: Responsive Design
Tasks:
1. Add a viewport meta tag to your HTML head.
2. Use media queries to change styles on screens < 600px.
3. Set image widths using percentages and use max-width.
Challenge:
- Hide/show a navigation bar depending on screen size.
Questions:
- What problems does responsive design solve?
- Why is mobile-first design considered best practice?
Part 6: Bootstrap Framework
Tasks:
1. Create `bootstrap.html` and link the Bootstrap 5 CDN.
2. Use the grid system to create a 2-column layout.
3. Add a Bootstrap navbar, buttons, and a responsive card.
Challenge:
- Build a small portfolio site using only Bootstrap components.
Questions:
- What are the benefits of using a CSS framework like Bootstrap?
- What is the difference between container, container-fluid, and row in Bootstrap