Skip to content

Latest commit

 

History

History
61 lines (36 loc) · 2.18 KB

readme.md

File metadata and controls

61 lines (36 loc) · 2.18 KB
Raw

Cakes Co

Challenge: "Responsive landing page (CSS Grid)"

Completed project

Responsive mobile

alt text

Tablet and desktop

alt text

Challenge Overview

Made to create a responsive webpage showcasing your cake business, based on two provided wireframes.

Wireframes

Build the mobile wireframe first, then adapt it for larger screens.

Approach

Make a template for the three screen scenarios _Template for mobile ipad and desktop _ alt text

completed sites for mobile iPad and desktop alt text

Define your own style

  • 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).

mobile first

  • Page designed with a mobile first design approach
  • Then write your CSS for everything to look great on mobile

larger screens

  • 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

breakpoints

  • breakpoint 1 --> 700px
  • breakpoint 2 --> 701px

Then our CSS code will be split into 3:

  1. "default": default styles, should implement the mobile design (no media query used for these). These styles will apply to all screen sizes by default.
  2. "medium and large": The second media query `@media (min-width: 701px) with no upper limit

Deployment (optional)

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/