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:

Section 1

Go to Section 1
When you click the link, the URL becomes yourpage.html#section1, and the

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

Save Time On Research and Writing

Hire a Pro to Write You a 100% Plagiarism-Free Paper.

Get My Paper

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

AIST 2220, Web Design

HTML Concepts

Slides mainly provided by Dr. Paul York
Adopted and Edited by Dr. Reza Rahaeimehr

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

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

ONE

Key Elements – Headings :

…

• Headings are numbered
•

,

,

,

,

,

• 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

•

is “big” and

is “smaller” but do
NOT use these simply to make bigger text
• Again, CSS will be used for formatting

ONE

Key Element – Paragraph :

• 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

element

• It puts some spacing at the top and bottom
of the paragraph
• But do NOT use a

element just to get spacing
•

elements are only for honest-to-goodness paragraphs
• If you need spacing, it can be added to other elements later…again using CSS

This is a paragraph.
It is only a paragraph.

But it isn’t the ONLY
paragraph. ‘Cause THIS
is a second paragraph.
BOO YAH!

REMINDER
All visible elements go
INSIDE OF the

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

ONE

Key Concept –“Whitespace” exception

•

 tag preserves whitespaces

                ONE
                Key Element – Line Break : 
                • If you DO need to force a line break at a

specific location within a paragraph, you

can use a 
 element
                • This is a self-closing tag
                • Do NOT “abuse” 
 elements

• Generally only used inside of other elements
                • Only to override default word wrapping

My name is Herman Munster.

My address is:
1313 Mockingbird Lane

Mockingbird Heights, CA
                My name is Herman Munster. My 
                address is:
                1313 Mockingbird Lane
                Mockingbird Heights, CA
                ONE
                Key Element – 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

Abraham Lincoln once said:

                Four score and seven years

ago, our fathers...

                Abraham Lincoln once said
                Four score and seven years ago 
                our fathers...
                ONE
                Key Elements – Bold / Italic Phrase :  / 

                • Used within other blocks of text (e.g.,

within a paragraph)
                •  used to highlight a word or phrase in

a bold font

• Can also use  element

                •  used to highlight a word or phrase in

an italicized font

• Can also use  element


Do you really not

understand? I said

eat your broccoli!
                Do you really not understand? I said 
                eat your broccoli!
                ONE
                Horizontal line 

                • 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

A heading



                A paragraph.

                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
                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
This is a paragraph.
                • The word “paragraph” is:

• Part of a paragraph,
                • Displayed using a bold font, and
                • Displayed using an italicized font
                This is a paragraph.
                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

This is a




                paragraph.


                


This is a




                paragraph.


                

                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!
                ONE
                Practice 1– Create a page that looks like this
                ONE
                Practice 1– the code
                ONE
                Key Element – Anchor Tag : 

                • 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)
                Education Education
                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"
                
                
                

Education

                
                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., 

                • Loads a resource on the current web site (more on this later)
                • ABSOLUTE URL : e.g., 

• Loads a resource from another web site

                • EMAIL URL : e.g., 

• Creates a new email message and fills in the specified address

                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
                

                • 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!!
                

                ONE
                Key Element – Unordered List : 
 + 


                • A bulleted list
                • Use when order does not matter
                • 
 is a “container” element

                • 
 are “list items” inside of container

John
Paul
George
Ringo

                • John
                • Paul
                • George
                • Ringo
                ONE
                Key Element – Ordered List : 
 + 


                • A numbered list
                • Use when order or rank matters
                • 
 is a “container” element

                • 
 are “list items” inside of container

Green
Blue
Red
Purple

                1. Green
                2. Blue
                3. Red
                4. Purple
                ONE
                Key Concept – Nested Lists
                • Use when you want to

• Embed one list
                • Inside another list

• Just
                • Like
                • This…
                • Nested list goes INSIDE of an 
 element
                • Works for both ordered and unordered

lists

Item 1

Item 2


Item 2a
Item 2b



                • Item 1
                • Item 2
                o Item 2a
                o Item 2b
                ONE
                Practice 2 – Having the following content …
                List of states of the United States and their cities
                Florida
                Georgia
                California
                ...
                ONE
                Practice 2 – Create a page that looks like this
                ONE
                Practice 2 – the code
                ONE
                Practice 3 – Having the following content …
                List of states of the United States and their cities
                Florida
                Tallahassee
                Jacksonville
                Georgia
                Atlanta
                Augusta
                Evans
                California
                Sacramento
                Los Angeles
                San Diego
                ...
                ONE
                Practice 3 – Create a page that looks like this
                ONE
                Practice 3 – The Code
                ONE
                Common Structural Elements (1)
                • Commonly used to further subdivide the

 of an HTML document
                • 
…
• Contains “visible” page headings

• Title, banner image, etc.
                • 

• Contains the primary site navigation links
                • 
…


• Contains the main content

                • 

• Contains common page footer content