zforre / 2.1-sk8 Goto Github PK

Without fail, a web developer will need to convert a design comp into a fully functioning, responsive website.

For this assignment, you'll be turning the provided design comp into a site that not only renders well from a normal desktop size, but also transitions and is very usable on smaller viewports.

After completing this assignment, you should:

• Have solid understanding of HTML/CSS/Bootstrap
• Understand principles of RWD and be able to effectively execute a solid flow of content from desktop to mobile
• Be able to leverage developer tools to test on mobile devices

After completing this assignment, you will be able to effectively:

• Create an html prototype, with a degree of accuracy, from a high fidelity design comp
• Use @media queries
• Use Bootstrap grid system for layout

• Create a web page from the given Powell Peralta design comp
• The finished prototype must be responsive and adjust in a usable way to mobile devices
• The overall layout should be built using the bootstrap grid system

• Create a new repository
• Create index.html, images/, and css/styles.css
• Install Bootstrap
• Add structure using HTML
• Add the layout styles for the largest components
• Add all images and content
• Finish social buttons
• Finish nav
• Finish header
• Finish posts
• Finish skateboarders
• Finish skateboards
• Finish footer
• Add mobile styles for social buttons
• Add mobile styles for nav
• Add mobile styles for header
• Add mobile styles for posts
• Add mobile styles for skateboarders
• Add mobile styles for skateboards
• Add mobile styles for footer

• Add an image slider to the header and the skateboard section
• Add form validation to the contact form at the bottom of the page

Recreate one of the following three responsive layouts:

Responsive Full Width Tabs

Responsive Full Width Grid

Responsive Icon Grid