The task was to create a news site using responsive techniques, such as Flexbox or CSS Grid. My news site is called Villa Vibes, and it's a site showcasing news related to owning a house and/or a garden. The texts are fictive, and the images are from Unsplash.
I started by making a sketch with simple wireframes using Figma, regarding the layout of the page on mobile, tablet and desktop. I did this to ensure I would fulfill the criteria with 4 columns on desktop, 2 on tablet and 1 on mobile. I wanted to split the site into three sections to be able to make a navbar with a few links in it. I then started to code the site in VS Code. I used CSS grid for the most part, because I found it easier. I did however also use Flexbox on some parts, mostly where I wanted the content to simply flow from left to right.
One part of the task was to ensure the navigation changes depending on the viewports width, I solved this by making the links into icons on mobile. The icons may, however, not be all that obvious for the user at this point. If I ahd more time I would spend it researching/creating better icons as well.
I also descided to make some hover-effects to images and buttons, so that it would become clear for the user that those elements are "pushable". I added some box-shadow to the images, as well as border-radius, for a graphically better look.
If I had more time I would keep making the site even prettier, by also taking the time in the sketching fase to also sketch out the looks of the site, rather than only skething on the layout. If I had more time (and knowledge) I would also create JavaScript functions for some parts, perhaps add in the "real" time, rather than hard coding it etc. I would also create "real" subpages, so that the links would actually lead somewhere.
The site can be viewed on via this Netlify link: https://sunny-moonbeam-ed8a3f.netlify.app/