The aim of this exercise is to create a responsive webpage showcasing your cake business.
Two wireframes are provided down below (scroll to the bottom).
Press Ctrl + Shift + P (Cmd + Shift + P on mac) and type: CodeSwing: Open Swing...
Press Enter, when you see /workspaces/htmlcss-cake/, press Enter again. You should see the website preview on the right!
- Write the HTML following the mobile design
- Then write your CSS for everything to look great on mobile
- Remember to link your CSS file to your HTML file inside the
<head>inindex.html - You don't need to use any media queries yet, because we're following a Mobile First approach!
-
Now add media queries to your CSS, and change the layout and sizing of elements so they make better use of a wider screen (see the desktop wireframe design below).
-
To follow Mobile First principles, we will only be using
min-widthin our media queries (no max-width!) -
You should use 2 different breakpoints, meaning you should have 3 different variants of your layout. Here's an example.
If we have the following 2 breakpoints:
- breakpoint 1 --> 540px
- breakpoint 2 --> 900px
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": Our first media query
@media (min-width: 540px) {...}will overwrite our default styles for screens at least 540px wide. Screens below 540px will apply the styles from the "default". - "large": Our second media query
@media (min-width: 900px) {...}will overwrite our default AND medium styles for screens at least 900px wide (no upper limit).
- 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).
- Get creative! Can you add some cool hover effects to buttons and images?
- It's up to you to find a solution for any elements that are visible in desktop and not on mobile - and vice versa.
- Commit and push your code often so you get into the habit and you avoid losing any code that you write if your machine crashes for example.
- Once you're ready to submit your homework for review, do a final push.
Build the mobile wireframe first, then adapt it for larger screens.
Mobile wireframe:
Desktop wireframe:
Source: CodeYourFuture ❤️