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 p
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
AIST2220 02 HTML1-1.pdf
AIST 2220, Web Design
HTML Concepts
Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr
<web>ONE
Learning Outcomes
Describe the concept of “Semantic Meaning” as applied to HTML
Identify and use many of the most common elements used in HTML
Explain how HTML handles “whitespace”
Be able to link to other HTML pages using anchor elements
Describe the difference between block and phrase elements
Identify the HTML elements commonly used to structure a document
Explain proper nesting of HTML elements
Describe the nature and purpose of HTML element attributes
Identify a variety of HTML special characters and symbols
<web>ONE
Key Concept – “Semantic Meaning”
• HTML “describes” a document structure
• Most HTML elements correspond to specific layout elements common to document formatting
• You want to use the “right” elements to properly describe your document • Even if using the “right” element does not change the formatting
• AND even if using it makes it have the wrong formatting
• We’ll be able to use CSS (Cascading Style Sheets) to make each element look exactly the way we want it to
<web>ONE
Key Elements – Headings : <h1> … <h6>
• Headings are numbered • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• Headings represent different “levels” within a document • Think: Title Chapter Section • NOT necessarily sequential • Can have many of the same level of heading within
a single document
• <h1> is “big” and <h2> is “smaller” but do NOT use these simply to make bigger text • Again, CSS will be used for formatting
<web>ONE
Key Element – Paragraph : <p>
• Paragraphs are as you learned in grammar school…like paragraphs in an essay • Groups of related sentences • Related to a common concept or thought
• Each separate paragraph in a document belongs in a separate <p> element
• It puts some spacing at the top and bottom of the paragraph • But do NOT use a <p> element just to get spacing • <p> elements are only for honest-to-goodness paragraphs • If you need spacing, it can be added to other elements later…again using CSS
<p> This is a paragraph. It is only a paragraph.
</p> <p>
But it isn't the ONLY paragraph. ‘Cause THIS is a second paragraph. BOO YAH!
</p>
REMINDER All visible elements go INSIDE OF the <body>
<web>ONE
Key Concept – Ignored “Whitespace”
• Extra spaces and newlines (known as “whitespace”) in HTML code is completely ignored by a browser when it renders a page
• REALLY useful for helping us to format our HTML code • Can indent without inserting extra spaces in our web page
• Can add extra lines between sections
• Etc.
• Nice because the text on your page always “wraps” correctly according to the size of the browser (desktop vs. mobile, etc.)
• BUT can be a bit confusing if you are expecting to have lines in your page break at the same place they do in your HTML code
<web>ONE
Key Concept –“Whitespace” exception
• <pre> tag preserves whitespaces
<web>ONE
Key Element – Line Break : <br>
• If you DO need to force a line break at a specific location within a paragraph, you can use a <br> element
• This is a self-closing tag
• Do NOT “abuse” <br> elements • Generally only used inside of other elements
• Only to override default word wrapping
<p> My name is Herman Munster. My address is:<br> <br> 1313 Mockingbird Lane<br/> Mockingbird Heights, CA
</p>
My name is Herman Munster. My
address is:
1313 Mockingbird Lane
Mockingbird Heights, CA
<web>ONE
Key Element – Blockquote : <blockquote>
• Used to denote a quoted passage of text
• Indents the entire passage
• Remember, this is describing the semantic meaning of the text • Do not use it simply to indent text that is not
actually a quotation
<p> Abraham Lincoln once said:
</p> <blockquote>
Four score and seven years ago, our fathers…
</blockquote>
Abraham Lincoln once said
Four score and seven years ago
our fathers…
<web>ONE
Key Elements – Bold / Italic Phrase : <b> / <i>
• Used within other blocks of text (e.g., within a paragraph)
• <b> used to highlight a word or phrase in a bold font • Can also use <strong> element
• <i> used to highlight a word or phrase in an italicized font • Can also use <em> element
<p> Do you <i>really</i> not understand? I said <b>eat your broccoli</b>!
</p>
Do you really not understand? I said
eat your broccoli!
<web>ONE
Horizontal line <hr>
• An HR element shows a horizontal line on your web page
• It’s a self-closing tag • Can’t have any content
• Does not have an End tag
<h1> A heading
</h1> <hr> <p>
A paragraph. </p>
<web>ONE
Key Concept – Block vs. Inline(Phrase) Elements • Block Elements start and end with new line
on a page • E.g., paragraphs, headings, blockquotes, etc. • Each subsequent block is “stacked” under the
prior one
• Inline Elements are the elements that occupies the space needed to show them and allows other elements to be on their left or right sides • usually used to mark up words or phrases within
a block element • Do NOT necessarily start and end with new lines
Four score and seven years ago our fathers
brought forth on this continent, a new
nation, conceived in Liberty, and dedicated
to the proposition that all men are created
equal.
Now we are engaged in a great civil war,
testing whether that nation, or any nation so
conceived and so dedicated, can long
endure. We are met on a great battle-field of
that war. We have come to dedicate a
portion of that field, as a final resting place
for those who here gave their lives that that
nation might live. It is altogether fitting and
proper that we should do this.
BLOCK
BLOCK
PHRASE
PHRASE
<web>ONE
Key Concept – Proper Nesting (1)
• As noted, elements are often nested inside of one another
• Can be used to add additional semantic meaning or styling
<p>This is a <b><i>paragraph.</i></b></p>
• The word “paragraph” is: • Part of a paragraph,
• Displayed using a bold font, and
• Displayed using an italicized font
This is a paragraph.
<web>ONE
Key Concept – Proper Nesting (2)
• BE CAREFUL!!!!
• Remember elements contain other elements, forming a parent/child relationship
• Cannot close a parent element before closing it’s children
<p> This is a <b> <i>
paragraph. </i>
</b> </p>
<p> This is a <b> <i>
paragraph. </b>
</i> </p>
<web>ONE
Practice 1– Having the following content …
Introduction to Web Design
Course Description
Acquaints students with HTML, Cascading Style Sheets (CSS), and design concepts for creating web pages. Students will be exposed to common HTML tags, CSS rules and properties, appropriate format and page layout, adding and manipulating visuals and images, and creating web forms.
Instructor Information
Professor: Dr. Reza Rahaeimehr (Raha)
Office: GCC 2807, Georgia Cyber Center
Course Delivery
This is a face-to-face, hands-on course. This means we will hold face-to-face classes during the scheduled class periods and practice the materials in the classes right after learning each topic. Attendance to the lectures is mandatory!
<web>ONE
Practice 1– Create a page that looks like this
<web>ONE
Practice 1– the code
<web>ONE
Key Element – Anchor Tag : <a>
• THE most fundamental element of HTML • Puts the “hyper” in Hypertext
• Content of an anchor element is “clickable”
• Clicking the element causes the browser to navigate to a new: • Web page on your site
• Web page on another site
• Location on the current page (more on this later)
<a href="education.html">Education</a> Education
<web>ONE
Key Concept – Attributes
• Every tag has some Attributes
• Can be used to: • Uniquely identify an element
• Classify an element
• Changes the default setting of the element
• An element can have many attributes
• Added to the opening tag only
• (almost) Always follows convention: • attribute_name="attribute_value"
<html lang="en">
<meta charset="utf-8">
<a href="education.html"> Education
</a>
<web>ONE
Anchor Tag Attribute – href
• Hyperlink Reference attribute
• URL of the resource (page, image, video, etc.) to load when clicked
• MUST BE SPECIFIED to make a link “clickable”
• Commonly one of: • RELATIVE URL : e.g., <a href="education.html">
• Loads a resource on the current web site (more on this later)
• ABSOLUTE URL : e.g., <a href="http://www.augusta.edu"> • Loads a resource from another web site
• EMAIL URL : e.g., <a href="mailto:[email protected]"> • Creates a new email message and fills in the specified address
<web>ONE
Anchor Tag Attribute – target
• Controls where the link opens when clicked
• Leave it off to open the link in the current tab • Default…replaces the current page • Most commonly used when navigating between pages within a single site
<a href="education.html">
• Set to “_blank” to open the link in a new tab • Most commonly used when navigating to a page on another web site • The _ (underscore) is important!!
<a href="http://www.augusta.edu" target="_blank">
<web>ONE
Key Element – Unordered List : <ul> + <li>
• A bulleted list
• Use when order does not matter
• <ul> is a “container” element
• <li> are “list items” inside of container
<ul> <li>John</li> <li>Paul</li> <li>George</li> <li>Ringo</li>
</ul>
• John
• Paul
• George
• Ringo
<web>ONE
Key Element – Ordered List : <ol> + <li>
• A numbered list
• Use when order or rank matters
• <ol> is a “container” element
• <li> are “list items” inside of container
<ol> <li>Green</li> <li>Blue</li> <li>Red</li> <li>Purple</li>
</ol>
Collepals.com Plagiarism Free Papers
Are you looking for custom essay writing service or even dissertation writing services? Just request for our write my paper service, and we'll match you with the best essay writer in your subject! With an exceptional team of professional academic experts in a wide range of subjects, we can guarantee you an unrivaled quality of custom-written papers.
Get ZERO PLAGIARISM, HUMAN WRITTEN ESSAYS
Why Hire Collepals.com writers to do your paper?
Quality- We are experienced and have access to ample research materials.
We write plagiarism Free Content
Confidential- We never share or sell your personal information to third parties.
Support-Chat with us today! We are always waiting to answer all your questions.
