Scribd
Upload
2 views3 pages

Spring 2025 - CS420 - 1

This assignment requires students to design a responsive web page using HTML and CSS, focusing on Flexbox layout and media queries. Students must submit an .html file named with their student ID, ensuring it adheres to specific guidelines, including a mobile-first design approach. The assignment will not be accepted if submitted late, in an incorrect format, or if it contains copied content.

Uploaded by

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

Spring 2025 - CS420 - 1

This assignment requires students to design a responsive web page using HTML and CSS, focusing on Flexbox layout and media queries. Students must submit an .html file named with their student ID, ensuring it adheres to specific guidelines, including a mobile-first design approach. The assignment will not be accepted if submitted late, in an incorrect format, or if it contains copied content.

Uploaded by

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

Assignment No.

01 Total Marks: 20
Semester: Spring 5 Week 1-3
CS420 Web Development for Portable Due Date: May-02-2025
Devices

Instructions:

Please read the following instructions carefully before submitting assignment. It should be clear that your
assignment will not get any credit if:

 The assignment is submitted after due date.


 The submitted assignment does not open or file is corrupt.
 Assignment is copied (partial or full) from any source (websites, forums, students, etc.)

Note:
1) You have to just upload .html file which will have the code of HTML. Assignment in any other format
(extension) will not be accepted and will be awarded with zero marks.

2) In case of any issue, if the system does not accept .html file then zip your.html file in a zip folder and
upload it on LMS.

Objectives:
The objectives of this assignment are:
 To learn, practice, and creation of a responsive web page
 Usage of flexible units, Flexbox layout, and media queries

Note:

 This assignment is a Graded Assignment.


 The assignment submitted through email will not be accepted.
 This assignment is covering Week 1 to week 3

Guidelines:
 Code should be properly indented.
 You can use the following tools/software:
o Notepad or Adobe Dreamweaver
 You will not use any other software to make .html file

For any query about the assignment, contact at [email protected].


Assignment Statement:
Design a responsive web page that adapts to different devices, ensuring a consistent and user-friendly experience.
The layout should scale smoothly on different screen sizes, ensuring both text size and image dimensions adjust
appropriately.

1. HTML Structure:

 Create a basic HTML file named as (Your Student ID.html) with the following content:
o A header section with a site title (e.g., "Your Student ID and Your name") and a navigation bar with
at least 3 links (Home, About, Contact).
o A main content section with two columns: one for text (about 200-300 words) and the other for an
image (any image of your choice).
o A footer section with the text “© 2025 Your Student ID”.

2. CSS Styling:

 Use Flexbox to create a responsive layout for the main content section (text and image).
 Ensure the page layout adjusts appropriately based on the screen size.
 Make sure the layout is fluid, and uses relative units like percentages, vw, vh, and em for flexible sizing.
 The two columns in the content section should stack vertically on smaller screens (e.g., mobile) and be
displayed side by side on larger screens (e.g., desktop).

3. Viewport & Mobile-First Design:

 Use the correct viewport meta tag to ensure the page is mobile-friendly.
 Design the page mobile-first (default styles should be for mobile, and then adjust using media queries for
desktop).
 Set a fluid width for the image and ensure it resizes with the screen.

4. Media Queries:

 Write at least two media queries:


o One for screens smaller than 600px (mobile screens).
o One for screens larger than 600px (tablet or desktop screens).
 In these media queries, adjust the layout to ensure a good user experience on different devices. Ensure that:
o The text in the content section should adjust its font size based on the screen width.
o The image should adjust its size to fit the container properly.

Solution Instructions:
 Use the concepts which you have learned till week 3
 No other layout techniques (such as float, grid, or absolute positioning) are allowed.
 Frameworks like Bootstrap are not permitted. Only pure HTML and CSS are acceptable.

Solution Output:
BEST OF LUCK!

You might also like