logo

Assignment On Responsive Design of the E-portfolio Pages

   

Added on  2020-04-01

4 Pages750 Words121 Views
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 bedeveloped using responsive approach. Therefore, the ages of this site will have consistentview over different devices having varying screen sizes.All the pages of the E-portfolio will have viewport tag. Inclusion of a viewport Metatag dictates the browser of the device that, the web pages needs to be scaled or shrined to fitto the device screen. Even though there are various options to complete this, but use of theview port is considered as standard.Example<head> <meta name="viewport" content="width=device-width, initial-scale=2" </head>Different parts of the pagesFor 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 thecontent and contents (text, image) will be in this sections. It is suggested to not to use as ageneric element or for styling purposes on the pages. In those scenarios it is suggested to usea simple <div> tag.
Assignment On Responsive Design of the E-portfolio Pages_1
The <article> on then pages helps to define an independent part of content on thepages on which will be act as standalone on the pages and still make sense to the visitor ofthe pages.<Header>: This tag helps in defining a header for a complete web page or sectionheader 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 tagwill 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 websitemobile friendly. The following is sample code for this tag,@media only screen and (max-width: 420px) { body { background-color: grey; }}
Assignment On Responsive Design of the E-portfolio Pages_2

End of preview

Want to access all the pages? Upload your documents or become a member.

Related Documents
Desklib - Online Library for Study Material with Solved Assignments, Essays, Dissertations
|44
|9728
|199

Web Development Documentation
|17
|3450
|79

Code Snippets of Garden Center Online Shopping
|24
|3944
|220

ITC333 Server Maintenance and Administration
|13
|1404
|67

Tourism Website
|6
|503
|331

Diary web  application
|5
|1116
|16