Web Engineering Lab 1: HTML & CSS - Responsive Web PDF

Web Engineering (Practical) – Spring 2025 – BE (Computer Systems) By Dr. Azhar Dilshad Name of Student: CMS ID: Total Marks: 10 Lab 1: HTML & CSS - Building a Responsive Web Page Objective: Create a responsive webpage using HTML5, CSS3, a...

Web Engineering (Practical) – Spring 2025 – BE (Computer Systems) By Dr. Azhar Dilshad Name of Student: CMS ID: Total Marks: 10 Lab 1: HTML & CSS - Building a Responsive Web Page Objective: Create a responsive webpage using HTML5, CSS3, and Bootstrap/TailwindCSS. The webpage will have:  Semantic structure using HTML.  CSS for styling the layout, animations, and responsiveness.  A flexbox/grid-based navigation bar. Materials and Equipment Required:  Text Editor: Visual Studio Code, Sublime Text, or any other text editor.  Web Browser: Google Chrome, Mozilla Firefox, or any browser.  Frameworks (optional): Bootstrap 5 or TailwindCSS (Ensure one is set up). Theory/Background:  HTML5: HTML5 introduces new semantic tags like , , , , and that improve the structure and accessibility of webpages.  CSS3: CSS3 allows for the creation of dynamic styles and layouts. The Flexbox and Grid layout systems enable flexible and responsive web designs.  Bootstrap/TailwindCSS: These CSS frameworks provide pre-built styles and components, allowing faster and more efficient styling and layout design. Procedure/Step-by-Step Instructions: Step 1: Set up the HTML Structure 1. Create the HTML file (index.html). Add the following structure:  Responsive Web Page My Responsive Web Page Introduction This is a responsive webpage using HTML5, CSS3, and Bootstrap/TailwindCSS. Content Section Here you will add some content for the page. © 2025 My Responsive Web Page 2. Explanation: o The contains the page title. o The section will be the navigation bar. o The will hold two sections, each with a heading and some content. o The contains copyright information. Step 2: Add Semantic Elements 1. Ensure all sections have semantic tags like , , , , , and for better accessibility and SEO. Step 3: Apply CSS Styling 1. Create the CSS file (styles.css). 2. Apply Styling for the Layout: o Use Flexbox or Grid for the navigation bar. Here’s an example of a Flexbox navigation bar: body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } header { background-color: #333; color: white; padding: 10px; text-align: center; } nav { display: flex; justify-content: space-around; background-color: #444; padding: 10px; } nav a { color: white; text-decoration: none; padding: 8px; } nav a:hover { background-color: #666; } footer { background-color: #333; color: white; text-align: center; padding: 10px; }  3. Responsiveness: o Use media queries to ensure the webpage adjusts for different screen sizes. o Example: @media (max-width: 768px) { nav { flex-direction: column; text-align: center; } } Step 4: Implement Flexbox/Grid-Based Navigation Bar 1. In the nav section, use the Flexbox model to arrange links in a row, with wrapping for smaller screens: Home About Services Contact 2. Flexbox Example for navigation: nav { display: flex; justify-content: space-between; padding: 10px; } nav a { flex: 1; text-align: center; } Step 5: Add Animation To animate elements like buttons or sections, use CSS3 animations: @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } main section { animation: fadeIn 2s ease-in-out; } Observations and Data Collection:  Observe: How the webpage adjusts when resizing the browser window.  Take notes on: How the CSS media queries change the layout for smaller screens (mobile view). Analysis and Interpretation:  Responsive Design: Analyze how using Flexbox and media queries improves the responsiveness of the navigation bar.  Accessibility: Discuss the role of semantic HTML tags in improving accessibility and SEO. Results and Conclusion:  The webpage is responsive and adjusts its layout for different screen sizes. (Yes/No)  The navigation bar changes to a vertical layout on smaller screens (mobile-friendly). (Yes/No)  CSS animations make the page more dynamic and engaging. (Yes/No) Post-Lab Assessment: 1. Review Questions: o What is the role of media queries in responsive design? o How does Flexbox help in aligning content within containers? o What are the benefits of using semantic HTML elements? 2. Exercise: o Create a section that changes its background color using a CSS animation when the user hovers over it. (Include the updated code(s) and screenshots of outcomes in a single PDF in the zip file of Lab1 solution) Grading Rubric:  20%: Correct use of semantic HTML tags.  30%: Proper layout using Flexbox/Grid.  20%: Responsiveness (working on mobile, tablet, desktop views).  20%: Implementation of CSS animations.  10%: Proper documentation and code clarity.