Skip to content

Latest commit

 

History

History
84 lines (55 loc) · 4.01 KB

README.md

File metadata and controls

84 lines (55 loc) · 4.01 KB

PROJECT 2

Build a News Site

This week’s project is to create a classic magazine or newspaper site. The site should contain a header with a name of the site, a logo and a navbar. This should also change depending on if you visit the site from a mobile, tablet or desktop. Further the site should have a big news section and a grid of cards with other news. On desktop sized screens, there should be four cards in a row, two in a row on tablets and on mobile, there should just be one card on each row.

Something like this: Design

The code folder contains a starter html file, a css file, and a Technigo logo to use if you want to.

Feel free to make a news site about whatever you like, it could be tech, sports, dinosaurs or avocados. The focus on this project is to practise what you've learned about responsive design and the layout technique flexbox

Design Inspiration 🎨

Not a designer? Get some design inspiration for your grid 👇

What you will learn 🧠

  • Structure webpages using boxmodel
  • Layout webpages using flexbox
  • Create responsive webpages for mobile, desktop and tablet

How to get started 💪🏼

  1. Fork this repo
  2. Clone this repo into your projects folder on your computer
  3. Open up VS Code and start coding!

Requirements 🧪

  • Use flexbox to layout the page.
  • Create a responsive design with the following views; Desktop 4 columns, tablet 2 columns, mobile 1 column.
  • Style your page.
  • Code follows Technigo’s code guidelines.
  • Site should have a header, a main news article, a grid of news articles.
  • Contribute by helping others with this project on Stack Overflow.
  • If selected; demo your solution for your team.

How to hand in the code 🎯

  • When you’re finished with the project, push your code to GitHub with these commands:

    git add .
git commit -m "your commit message"
git push origin master

  • Navigate to your repo and create a Pull Request into the Technigo repo

  • Wait for the code review from your teachers

How to get help 🆘

Ask for help and share your knowledge about this project with the 'news-site-project' tag on Stack Overflow. Talk to your team on Slack and help each other out. Do some research about your problem, you are surely not the first one with this problem, Google is your friend 🙂. And you can of course also reach out to your teachers.

Stretch Goals 🏃‍♂

Make sure you've commited and pushed a version of your project before starting with the stretch goals.

Design

  • Play around with hover effects, i.e. change colors, add or remove borders or flip the image upside down.
  • Add a box shadow to make the photos look like polariods
  • Try to add some animations on your project

Deep-dive

  • Align the cards to the center of the page
  • Originally, all images came in different sizes and ratios. As a developer that's a pretty common situation, for instance when you fetch images from an API or CMS you don't necessarily know what the ratio will be - you just have to make it work! How would you have solved this assignment if this was the case? Here you can find the original photos try and solve the assigment again but with these photos instead.

Other solutions

  • Did you create your project Mobile first? Great! that's the "modern way" of doing it. But, just to practise, try changing it to Desktop first. If you didn't write it Mobile first, do so 🙃
  • Another soulution to dealing with a photo collection like this would be to use CSS-grid. Check it out!

🚨 Don't forget to add, commit and push the changes to GitHub when you're done. 🏁