HTML and CSS: Designing Responsive E-portfolio Web Pages

Verified

Added on 2020/04/01

AI Summary

This assignment details the development and design of responsive e-portfolio web pages using HTML and CSS. The project involves dividing the pages into standard segments such as header, footer, navigation, and content body, and creating six specific pages: Index.html, About.html, Gallery.html, Career.html, Skills.html, and Sitemap.html. The design emphasizes a responsive approach to ensure consistent viewing across different devices by incorporating a viewport meta tag. The assignment explains the use of various HTML tags like , , , , , , and , along with their attributes. It also covers the application of CSS properties, including media queries and padding, to style the pages and support responsive navigation controls. The document concludes with a bibliography referencing relevant web development literature.

Responsive Design of the E-portfolio pages
In order to developed and design the webpages using HTML and CSS for the e-
portfolio it is important to divide the pages into different standard segments such as header,
footer, navigations and content body.
The web pages of this e-portfolio will have following pages, Index.html, about.html,
Gallery.html, Career.html, Skills.html, and Sitemap.html. The webpages of the site will be
developed using responsive approach. Therefore, the ages of this site will have consistent
view over different devices having varying screen sizes.
All the pages of the E-portfolio will have viewport tag. Inclusion of a viewport Meta
tag dictates the browser of the device that, the web pages needs to be scaled or shrined to fit
to the device screen. Even though there are various options to complete this, but use of the
view port is considered as standard.
Example
<head>
<meta name="viewport" content="width=device-width, initial-scale=2"
</head>
Different parts of the pages
For navigational controls we are using the <nav> tag on the pages.
The <section> tag or element defines some part of the webpage that is related to the
content and contents (text, image) will be in this sections. It is suggested to not to use as a
generic element or for styling purposes on the pages. In those scenarios it is suggested to use
a simple <div> tag.

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

The <article> on then pages helps to define an independent part of content on the
pages on which will be act as standalone on the pages and still make sense to the visitor of
the pages.
<Header>: This tag helps in defining a header for a complete web page or section
header on the web page.
<Footer>: This tag is used to define the footer of a section or a web page in the e-
portfolio site.
<a href>: This tag is used to redirect to different pages from a page.
<img src>: As the pages of the e-portfolio site will consist of different images this tag
will help to place them in the specific positions. Along with this, the “height” and “width”
attribute of this tag will be used to specify the dimension of the images on the web pages.
CSS properties
The pages of the site will also use the Media query technique to make the website
mobile friendly. The following is sample code for this tag,
@media only screen and (max-width: 420px) {
body {
background-color: grey;
}
}

In addition to that, the style sheet will also include, the “padding” property. This is
used to provide space around some content on the web pages.
In addition to that, to support and style the navigation controls on the pages the CSS style
sheet will contain styling techniques similar to the following sample.
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href=" about.html ">About</a></li>
<li><a href=" Gallery.html ">Image Gallery</a></li>
<li><a href=" Career.html ">About</a></li>
</ul>
The <ul> be designed by the following CSS stylesheet.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Bibliography
[1]L. Ennis, "A Review of “The Modern Web: Multi-Use Web Development with
HTML5, CSS3, and Javascript”", Journal of Web Librarianship, vol. 8, no. 1, pp. 109-110,
2014.
[2]J. Yun, J. Park, H. Hwang, G. Phyo and I. Moon, "HTML5 Analysis and Research
for the Reduction of the Initial Load Time of a Web Browser", The Journal of Korea
Navigation Institute, vol. 19, no. 5, pp. 440-445, 2015.