Tag: Model Answer

Assignment Prompt & Instructions

Description:

Design a responsive web page with three sections: a bio section, a hobbies section, and a contact me

section. All these sections must be implemented in one page. The page must be responsive for two

states. First, for standard screens, and second, for cell phone screens whose screen width is less than

450 pixels.

In the first design, you should have a fixed left-side menu, which expands from the top to the bottom of

the viewport and remains there all the time. On top of the menu, you must put your profile picture, then

three buttons that are actually three links, one for each section. Whenever you click on one of these

links, it must navigate to the corresponding section on the page.

On cell phones, the menu must be on top of the page, and the content must be shown underneath the

menu. In this state, the menu is sticky. That means the menu remains at the top whenever you scroll the

page. Again, the corresponding section must be shown when you click these buttons. In this case, the

content might be shown underneath of the menu. This problem can be solved but not with the stuff that

you have learned. So, you do not need to fix this problem.

About the content of each section, you should implement at least something similar to mine, but feel

free to add more content.

Check the video for more detail at https://youtu.be/8YGYQ3jVNDI.

To get credit:

To earn credit, your grade will be based on the following criteria:

 Making the page responsive (20%).

 Implementing the menu for each state (30%).

 Ensuring your page is visually appealing (20%).

 The content of the page, including images, text, links, lists, etc (25%).

 On time submission (10%)

Yes, it sums up 105%. The extra 5% is a bonus. ????

To Submit:

Zip all the files and upload the zip file  before the deadline. You only must upload one ZIP file

containing all the images, HTML, and CSS files, nothing more, nothing less. Make sure that you include

the images in your zip file.

Note

 Do NOT go beyond the course materials. If you use something that we have not talked about yet,

you will lose the credit of the assignment.

 You may need to add some margin to the target of menu options in Mobile view. In that case, you

may need to add the following CSS rule to your Mobile View CSS rules.

Explanation

What is :target?

The :target pseudo-class selects an HTML element that matches the current URL fragment identifier (the

part of the URL that comes after the # symbol).

For example, if you have:

<h2 id="section1">Section 1</h2>

<a href="#section1">Go to Section 1</a>

When you click the link, the URL becomes yourpage.html#section1, and the <h2> element with

id="section1" becomes the :target.

What is scroll-margin-top?

This property sets a top margin used when scrolling an element into view (e.g., via anchor link

navigation like #section1). If a fixed header is covering the top of your content when jumping to a

section, scroll-margin-top is a solution.

What This Rule Does

When you navigate to an element via an anchor (#id), this rule adds 200px of space above that target

element during scrolling. So, the element won’t be flush with the top of the page — it will appear 200px

lower (leaving room, for example, for a sticky header). Change 200px to the height of your own menu.

Why Use It?

It's helpful when:

– You have a fixed/sticky header

– You want to avoid the header overlapping your anchor target

– You want to control scroll behavior for better UX

only use syntax and code types found in the zip  file

create another word document or pdf where you cite where i nthe document you pdfs in the zip you got your code

– [\
\
acceptablesyntax.7z](https://www.sweetstudy.com/files/acceptablesyntax-7z "acceptablesyntax.7z")

– 2 years ago