You will make a news site and it's up to you what it will be about: it could be tech, sports, dinosaurs or avocados. This project focuses on practising what you've learned about responsive design and the layout techniques of CSS Grid and Flexbox.
In this repository, you will find a folder called code. This folder includes an HTML file called index.html, this will be your main content file. You will also find style.css, which is your stylesheet. Here you will write all code for styling. There is also a folder in there called assets, where you can place all images you wish to use.
Before you get started, we want you to take a step back from the screen, grab a pen and paper, and start sketching out your page. Have the box model in mind, and create wrapping boxes for the different elements on your page.
Start by drawing an outer wrapper, a box wrapping the entire page. Then, continue by filling this box with content: A header box, a main box, a box for navigation, etc. The final sketch should consist of a box, within a box, within a box, within a box.
Tip! Use markers to highlight the different boxes to clarify which box is wrapping the other. See example below 👇
Once you finish sketching, you’ll have a ‘recipe’ for your HTML document! Every box on your sketch represents a container, a div/section/main, or other element. Add your containers and content from the sketch into your HTML document, starting from the top and the outside, going in. Continue to add content by creating the HTML elements you need. Don't forget to start thinking about classes already to be able to style more easily when it comes to that.
A common question this week is "When should I use Flexbox and when should I use Grid?". It's up to you, but a good rule of thumb is to use Grid for the page layout and flexbox for smaller components, such as how stuff should align within a card. Again - this is up to you, so feel free to play around.
Don't be afraid to try things out and have fun in this process! Go wild with colours, borders, filters etc.
- Want to find some nice images to use? Check in the Image resources from the Toolbox.
- Want to see some examples of former students’ projects? Have a look at Nadia’s Maple News, Åsa’s Therapy a la Gucci or Christoffer’s Daily Ziko.
- Not a designer? Get some design inspiration for your grid 👇
- Style your page.
- Use both CSS Grid and Flexbox to layout the page.
- Create a responsive design with the following views: Desktop 4 columns, tablet 2 columns, mobile 1 column (it should look good on devices from 320px width up to 1600px).
- The site should have a header, a main news article, and a grid of news articles.
- Deploy your page to Netlify and add it to the Readme file of the repository
Make sure you've committed and pushed a version of your project before starting on the stretch goals. These are just suggestions, if you want to add something else go ahead. We want you to be creative!
- Add a box-shadow to make the photos look like polaroids
- Align the cards to the centre of the page
- Add some CSS animations to your project