This post is a follow up to our previous assignment http://www.webtrainingcentre.com/html-css/assignments/html-css-responsive-web-design-template/. This is our second html css responsive online resume assignment for our students who are under going our Online Front end development project guide program.
This is a little more complicated assignment as compared to previous one. This assignment is also helpful for aspiring web developers, web designers, front end developers and interface developers.
This is a good start for people who already know HTML, CSS and want to start working as front end developer or interface developer.
html css responsive online resume assignment – Requirements
html css responsive online resume assignment – Instructions
- Download the attached zip file. It has 3 .jpg files
- Screenshot has been taken using webpage screenshot
- Unlike the previous assignment this file has just 1 theme but more sections.
- Open the file in Photoshop or your favorite photo editing software and start building the page
This is how your resume will look.
Click the image to enlarge it. The template has been inspired from http://pixeldizajn.com/perfectcvwp/
HTML CSS Responsive Web design template assignment – hints and tips
- Start for mobile first but keep in mind the 2 columnar structure that you want in larger screens.
- Treat each element as a module what this means is. Your navigation is 1 element, contact details is one element, branding (name and objective) is 1 element. Develop and test and element level.
- Make use of CSS3 media queries to re organize the layout for larger screens (tablets and desktop).
- If you noticed there are 3 templates which means the project should have 3 break points.
- Make use of standard semantic html tags to build the page structure.
- Make sure to test your mark up through Markup Validation Service for html errors before starting the CSS.
- This will ensure your page is accessible even on a browser which does not supports css and images.
- Make use of Sprites for icons
- Pictures/photos should be stored in .jpg format
- Upload your page on a web server to test it using Responsinator
- Alternatively you can use Responsive layout which comes with Firefox web developer extension to test your pages in different screen locally
- Test your page in Internet Explorer 10, 9 and 8
So start building your second html css responsive online resume assignment.
Feel free to modify the content and sections as per your requirement. Upload this template on a web server and share the resume as a project with your prospective employer.
Kindly share the post with your friends who want to learn interface development or front end development.