Scribd
Upload
2 views

Html and css exercise

This document outlines an enhanced lab for CS/INF2215 focusing on HTML, CSS, and web technologies. It includes tasks and challenges across multiple parts, such as HTML structure, DOM exploration, forms, CSS styling, responsive design, and using the Bootstrap framework. Each section contains specific tasks, challenges, and questions aimed at deepening understanding of web development concepts.

Uploaded by

babuamuri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Html and css exercise

This document outlines an enhanced lab for CS/INF2215 focusing on HTML, CSS, and web technologies. It includes tasks and challenges across multiple parts, such as HTML structure, DOM exploration, forms, CSS styling, responsive design, and using the Bootstrap framework. Each section contains specific tasks, challenges, and questions aimed at deepening understanding of web development concepts.

Uploaded by

babuamuri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like