All solutions

I used this challenge to build upon my existing knowledge of HTML5, CSS, JavaScript, and React especially. I took it as an opportunity to get some practice with using props to pass information between components. I also learnt how to render SVG's in React as a component. I also learnt how to use the .map() function to render multiple components to save from repeating code.

I learnt that when making a choice on whether to use Flexbox or Grid for layout, it is often not a case of one or the other, they work very well together. I also faced a significant challenge whilst styling. The problem was that I did not respect the order in which elements appeared in my HTML file. I tried to place the element which appeared second in my HTML file in the second column of my CSS grid without placing the element which appeared before it first, not unknowing that this would cause the Grid to automatically create a row. The element which appeared first was placed in the first column on the second row. I only wanted one row with two columns. It took me a while, but through the help of the Discord community, I solved the problem.

I would like feedback on best practices when writing media queries. Is there such thing as 'too many' media queries. Also what is the best practice on building a responsive page? I start with mobile first then jump straight to desktop. Is this bad??

Please can I have some feedback with regards to making my HTML more accessible.

Also some advice on how I could have used more semantic HTML.

Any feedback on my CSS would be appreciated also.

I have already had some very positive feedback that will help me with future challenges. Particularly about not creating separate html code for mobile view, but rather use CSS to design for mobile. I realised my mistake when I noticed that my JavaScript code was not working whilst viewing on a mobile.

I now also understand the theory behind mobile first design, which is all about CSS and not HTML. (Correct me if I'm wrong)

Other than than that, please can I have some more feedback and advice on my attempt and code. I take everything on board and this will help me improve going forward.

Should I have used Id's instead of classes??

Should I have used a section tag in my html file instead of main??

How do you link fonts directly into the Css file using import??

Any other general tips would be much appreciated.