The assignment is to create responsive website based on the idea of a news site. It is to include a header with a logo, name of site and navbar. As well as a big news section and a grid of cards for other news articles. The layout is to change when views on mobile: 1 card, tablet: 2 cards and desktop: 4 cards applications.
My idea for the news site is based on an actual website called positive news. I took inpiration regarding images, text and some layout. I looked at the code in the inspector for that wesite a few times, but I didn't copy anything straight off the website. It was great to get a visual idea of what I wanted to achieve to help guide me towards that objective.
I enjoyed figuring out how to make the site responsive and certain elements. In order for the amount of cards to be different from application to application, but also when thinking about other elements on the site. For example thinking about how the image and text in the main article would wrap around when views on a tablet and desktop. I also enjoyed getting to know more html elements and semantics as well as css how to structure up my html and css in order to follow what I am doing.
As previously mentioned I referred to a website to get a bit of inspiration where they had a similar layout as to what the task required. with all the images and info collected I then started to sketch out on the big pads we were sent what html elements would be needed to structure that based on the requirements. I then went on to write the html in vsc and start to get to grips with flexbox. Once this was done I started to style more in css which was alot of fun, but alot to look through to what I had already defined etc. I found that it was working well with flexbox, but then realised when I was scaling up to tablet that in the beginning of that media querie I had one card and not two. But after a few more pixels I got two. Then I looked at the noops code along I did and tried to figure out how to fix it. By this point I saw the lesson with Maxymillian whom mentioned 100%, 50% and 25% and I got a bit confused as to how I should approach my site in terms of flexbox. I changed each width of the card in relation to the application it was going to be viewed in and I couldn't get any margins to seperate the boxes. I grasped the concept of flexbox in terms of definifg the display, direction, spacing in between etc, but I hadn't realised that I would need to specify a width on each application view in order to get the amount of cards required. I watched a video on flexbox layout and things started to fall into place a bit more and discovered box-sizing which helped to condense the padding inside the element so I could easier set margins between my cards. I'm not sure if I have it 100% but I have learnt alot from trial and error. It would however have been great with a basic step by step video, visual or lecture showing just how to size containers and how to think in terms of parent size in relation to child size. Despite that hiccup I think that it went ok. I googled alot, read on stack overflow, and as I mentioned before watched a few videos.
Next time I would focus more on getting the basic layout down, before diving into css and styling everything. Also I will try to design both landscape and portrait views over the dfferent devices so I can gain a better understanding of that. And I will ask my teammates more for help as they're all so good!