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>
1. Green
2. Blue
3. Red
4. Purple
<web>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 <li> element
• Works for both ordered and unordered lists
<ul> <li>Item 1</li> <li> Item 2 <ul>
<li>Item 2a</li> <li>Item 2b</li>
</ul> </li>
</ul>
• Item 1
• Item 2
o Item 2a
o Item 2b
<web>ONE
Practice 2 – Having the following content …
List of states of the United States and their cities
Florida
Georgia
California
…
<web>ONE
Practice 2 – Create a page that looks like this
<web>ONE
Practice 2 – the code
<web>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
…
<web>ONE
Practice 3 – Create a page that looks like this
<web>ONE
Practice 3 – The Code
<web>ONE
Common Structural Elements (1)
• Commonly used to further subdivide the <body> of an HTML document
• <header>…</header> • Contains “visible” page headings • Title, banner image, etc.
• <nav>…</nav> • Contains the primary site navigation links
• <main>…</main> • Contains the main content
• <footer>…</footer> • Contains common page footer content
<body>
<header>
<nav>
<main>
<footer>
<web>ONE
Common Structural Elements (2) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title Goes Here</title>
</head> <body> <header> …
</header> <nav> …
</nav> <main> …
</main> <footer> …
</footer> </body>
</html>
<header>
<nav>
<main>
<footer>
<web>ONE
Key Elements – <div> and <span>
• A <div> element is a “generic” block element • Kind of like the <header> or <main> element
• Used to group together related content
• A <span> element is a “generic” phrase element • Likewise, kind of like an <i> or <b> element, but
• Used to add arbitrary style to a given phrase
• Both of these are used extensively, but
• Hang tight…really only useful when paired with CSS
<web>ONE
HTML “Special Characters” and Symbols
• Some characters are “special” because • They are used by HTML itself, or
• They are symbols not available on your keyboard
• If you want to show them on your web page, you insert them using a specific syntax: • &code; Ampersand followed by a code followed by a semicolon
• The most commonly used are: < < (less than)
> > (greater than)
& & (ampersand)
(non-breaking space)
© © (copyright symbol)
™ ™ (trademark symbol)
® ® (registered symbol)
— — (em dash)
<web>ONE
Summary
Things we learned:
The concept of “Semantic Meaning”
A lot of HTML elements, including ones that define the basic structure of an HTML document
How HTML handles “whitespace”
How to link to other HTML pages using anchor elements
Proper nesting of HTML elements
How and why to add attributes to HTML elements
A variety of HTML special characters and symbols
AIST2220 03 CSS.pdf
AIST 2220, Web Design
CSS Concepts
Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr
<web>ONE
Learning Outcomes
Describe the purpose of Cascading Style Sheets (CSS)
Describe the structure of a CSS rule block
Explain the syntax, purpose and function of a CSS selector
Explain the syntax, purpose and function of CSS declaration
Identify the main ways of including CSS rules on a web page
Add color to selected HTML elements
Explain how CSS rules are interpreted by the browser
Describe common types of CSS selector
<web>ONE
Overview of Cascading Style Sheets (1)
• KEY CONCEPT – STYLE IS SEPARATE FROM CONTENT
• HTML describes a document’s content • Each element has “default” styling
• CSS is used to add custom style to the document
• A “Style Sheet” is nothing new • A concept from the early days of print media
• A physical sheet of paper describing typography and spacing standards
• Later adopted in desktop publishing…e.g., MS Word paragraph styles
• CSS brings this concept to the web
<web>ONE
Overview of Cascading Style Sheets (2)
• CSS is a standard governed by the W3C • Supported by all browsers on all platforms • Currently at revision 3, or CSS3
• CSS is extremely flexible and powerful • E.g., http://www.csszengarden.com
• CSS style rules can be shared between many HTML pages • Maintain consistency of style between pages • Greatly eases web site maintenance
styles.css
index.html education.html contact.html…
<web>ONE
Applying CSS Rules
• Basic Syntax:
header { background-color: blue; }
Selector Rule Block Declaration Declaration Property Declaration Value
<web>ONE
CSS Syntax Rules
• The rule block for a selector can contain multiple declarations
• Each separate declaration must end with a semi-colon
• Like HTML, whitespace is ignored
• Guidelines: • Group all declarations for a given selector into a
single block • Selector and opening curly-brace on first line • Separate line for each declaration • Indent declarations within block • Separate line for closing curly brace
body { background-color: black; color: white;
}
header { background-color: blue; color: white;
}
nav { background-color: yellow; color: black;
}
footer { background-color: blue; color: white;
}
<web>ONE
Ways of Including Styles
•External CSS!!!
• also • Embedded CSS
• Inline CSS
<web>ONE
External CSS
• All rules exist in separate CSS file(s)
• Every HTML page “links” to that file
• Use <link> element in <head> section of ALL of your HTML files
body { background-color: black; color: white;
}
header { background-color: blue; color: white;
} …
mystyles.cssindex.html
<!DOCTYPE html> <html lang="en">
<head> &l
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.
