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 and 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 form validation to the contact form at the bottom of the page
- Add an image slider to the header and the skateboard section
- Add custom Bootstrap form validation messages to the contact form
Recreate one of the following three responsive layouts: