Responsive E-Portfolio Design

Verified

Added on 2020/04/01

AI Summary

This assignment focuses on the responsive design of an e-portfolio website using HTML and CSS. Students will develop six pages (Index, About, Gallery, Career, Skills, Sitemap) with a consistent view across various devices. The implementation includes viewport tags for optimal scaling, semantic HTML elements like , , , and styling techniques utilizing CSS properties such as padding and media queries. The assignment emphasizes creating a user-friendly and adaptable e-portfolio experience.

Contribute Materials

Your contribution can guide someone’s learning journey. Share your documents today.

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.

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.

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.

1 out of 4

+13062052269

info@desklib.com

Responsive E-Portfolio Design

Contribute Materials

Secure Best Marks with AI Grader

Related Documents

Desklib - Online Library for Study Material with Solved Assignments, Essays, Dissertations

Web Development Documentation

E-Commerce Website Invoice Generation

Securing Web Server with SSL

Tourism Website

Diary web application