The assignment is to make a news page using flexbox and making it responsive.

I've added an animation on the logo, box-shadow including a discreet hover effect on the cards. The navbas is sticky.

https://stackoverflow.com/c/technigo/questions/1952

https://stackoverflow.com/c/technigo/questions/1970

Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?

I attacked the challenge in a fairly practical matter and had a functioning page pretty fast. My biggest issue was that I didn't take time beforehand to make a design to follow when coding. So after everything worked perfectly but didn't look to stylish I started making adjustments for the style. This of course messed up a lot of things and created a lot of issues to be solved in terms of sizing and responsoveness. So the time I was planning on spending on just prettifying and adding cool features ended up being put on making it work all over again. Thankfully the dev tool in the browser sped this up a bit. Playing around there is a lifesaver many times instead of changing in VSC.

I managed to fix everything but I've learned that without planning beforehand you end up losing a lot of time fixing things, and it is avoidable. Next time I'm gonna make not just a structure sketch on Figma but rather a more comprehensive design.

If I had more time I would add more features and try to make it come alive a bit more designwise. I find the design a bit "flat" and uninteresting. But I suppose that when we start adding JS and learn better and subtler approaches to designing a website through experience that will improve. It's hard to know where to stop and move on to the next project. I wanted to make a pop out menu from the hamburger. But as I started playing around with that it started messing things up again. I decided that it was a better strategy, since I have a decent result now, to not mess things up now and spend a lot of time fixing things again. Rather I will move on to the next project and do that fold-out hamburger menu with JS in another project.

I also learned that the responsiveness in the dev tool and in the browser is not always the same. It works perfect for me in the dev tool and I went on a google expedition to dig deeper into this. What I read was that you should trust the dev tool and not the browser. So I focused on the results in the dev tool.

Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.