Made to create a responsive webpage showcasing your cake business, based on two provided wireframes.
Build the mobile wireframe first, then adapt it for larger screens.
Make a template for the three screen scenarios
_Template for mobile ipad and desktop _
completed sites for mobile iPad and desktop
- Choose 1-2 fonts to use (lots of free fonts here)
- Choose 2-3 colours that you think go together well, and try to limit yourself to those in your CSS (look here for inspiration)
- Select some nice cake pictures to replace the placeholders in the wireframes (good photo source here).
- Page designed with a mobile first design approach
- Then write your CSS for everything to look great on mobile
- Following the mobile first approach the page was adjusted with media queries larger screen layouts and sizing of elements so they make better use of a wider screen
- breakpoint 1 --> 700px
- breakpoint 2 --> 701px
Then our CSS code will be split into 3:
- "default": default styles, should implement the mobile design (no media query used for these). These styles will apply to all screen sizes by default.
- "medium and large": The second media query `@media (min-width: 701px) with no upper limit
Deploy your work to Netlify!
Remember to follow this naming convention when creating your custom URL in Netlify: https://cyf-[your-Github-username]-cakes.netlify.app/