All solutions

What specific areas of your project would you like help with?

I decided against wrapping the buttons in the ID card section and giving them their own state (for highlighting them when selected). Instead, I have updated their class when the header is re-rendered. In this case there doesn't seem to be much of a difference to me. I'd appreciate any feedback on this though.

Cheers

What are you most proud of, and what would you do differently next time?

This was my first solution using React. I learnt a lot and I am happy that my component is de-coupled from the webpage as a whole - meaning it should be easy to re-use the component elsewhere with very little work.

Next time, I might look into something such as CSS Modules or perhaps Styled Components to help organise my styling and prepare me for larger projects.

What challenges did you encounter, and how did you overcome them?

I was very confused with how CSS is imported into JS when using React. I was not sure what was a native JS feature and what was not. I did some reading and found that importing CSS is a feature of the bundler which React invokes. It makes sense doing this because it associates a component with its dependencies, making it easy to figure out exactly where the styling for the component is coming from. I still feel that it is a little bit confusing overloading the import keyword in this way though - as it isn't really an import in the sense that we usually use it.

What specific areas of your project would you like help with?

Up until now, I have always used a link element in my page head to include fonts. The problem is, I want my React components to be encapsulate all of their related dependencies so they are properly modular. Reading around online, people seem to warn against using a CSS @import as it is slower than a element. I have gone ahead and used the @import because it keeps my font dependency for the component together with the component itself. Is this the recommended way with React? Does the bundler do some magic with the CSS @import when using React? I'd greatly appreciate if anyone could explain this a bit better or generally give me some advice.

Cheers

What are you most proud of, and what would you do differently next time?

This was my largest project using JavaScript, and my first time in a while using the language. As such, I am happy that I managed to quickly pick up the basics again.

Next time, I would plan better beforehand, as well as look into using a framework such as React to better organise my code.

I would also consider keeping an internal representation of the cart, rather than reading the state directly from the DOM.

What challenges did you encounter, and how did you overcome them?

Linking product information between the product list, cart and modal display. I passed state between the elements by reading directly from the DOM. As previously mentioned, a better solution might have been to hold an internal representation of the state and build the elements from this, rather than building them based on other DOM elements.

What specific areas of your project would you like help with?

Any advice would be appreciated.

What are you most proud of, and what would you do differently next time?

I feel like I am becoming more conscious of when styles are required, and when the default layout manager can take care of them with a bit of added margin.

If I were to do this project again, I would change how I achieved the full-bleed effect on the middle section. I implemented it by applying padding to all sections other than this section, and then individually giving the elements inside the padding to match that of the other sections. Whilst this worked fine for this somewhat simple webpage, this added complexity would have been a pain for larger pages. Instead of this, I would use a grid layout for the body, splitting it into three columns. The middle column would house the normally-padded content, whilst the full-bleed content could be set to span columns right up until the edge. The effect of this would be that I would no longer have to individually pad certain areas - new content could be added by default to be 'padded' by the surrounding columns and content could optionally be full-bleed.

What challenges did you encounter, and how did you overcome them?

I was tripped up on changing the the SVG button colours. I remembered that inline attributes within an SVG element would take precedence over CSS styles. Removing these attributes allowed me to change the colour using CSS.

What are you most proud of, and what would you do differently next time?

I wrestled with using SVGs before remembering about using font icons. I am proud of how the social media icons turned out, whilst learning a bit more about SVGs and their merits/downsides in the process.

What challenges did you encounter, and how did you overcome them?

One thing that tripped me up was perhaps trying to go too far with the separation of styling and content. For me, it made sense for the navigation links in the footer to be one list - there was nothing semantically differentiating the two columns. My first approach was then to have them all in one list. Creating the small gap between the two separate lists for the mobile version was easily done using bottom-margin. Splitting the lists for the desktop version seemed to be more trouble than it was worth. I thought of individually targeting members of the list and giving them a grid column. In the end, I decided it was much easier to simply split the list into two in the markup.

A similar problem came about when trying to place the background curve using pseudo-elements. Again - trying perhaps a little too much to separate style and content. I could only place the curve as a pseudo-element of the second large section - in this case it was of course within the section's content box which had padding around it. To get it to span the entire width of the screen, the methods I was thinking of all seemed quite hacky. I ended up including it as an image in the content which allowed it to fit in nicely with the flow of the document (which hacks including position: absolute would have broken), and setting aria-hidden would hide it from screen-readers.

One last thing relates to SVGs. I found that using a font icon allowed me to do simple colouring of the entire icon. I was originally looking at doing this with SVGs but it seems overkill for this simple use case. Using an inline SVG creates a large bloat in the markup making it less readable in my opinion.

What specific areas of your project would you like help with?

I saw somewhere that it is possible to include an inline SVG by referencing it from another place in your markup - say, at the bottom. We then have the advantages of inline SVG without the bulk in the middle of the markup. I'd be grateful if anyone could give me some tips on best practice about doing this sort of thing?

Thanks!

What are you most proud of, and what would you do differently next time?

I managed to complete the project with few problems. Next time, I would hopefully spend less time on those few problems having gained experience from them.

What challenges did you encounter, and how did you overcome them?

Three challenges here:

1. Background image for the first card. I had never used these before. The effect was achieved using a few CSS properties which were easy to find using MDN.
2. Layout of the student information (image, name etc). I resolved this by removing the default margin from the paragraph elements so I could put the grid cells closer together, and then adjusted their distance using row-gap.
3. The most confusing problem occurred when I gave each of the cards a grid area. My idea was to give the cards a grid area in their styling but only use the grid area later in a media query. Before I added the grid areas, the cards sat nicely in the single column I created, each getting an automatic row. After giving the grid area (but not using it), the automatic rows did not work and all of the cards sat on top of each other.

What specific areas of your project would you like help with?

My problem relates to point number 3 above. It seems it would be nice to give an element a grid area with the intention of using it only later in a media query. This however seems to have stopped the automatic assignment to rows happening. I tried also assigning grid-auto-rows: auto and this fixed it but then broke my desktop layout when I wanted to use the grid areas in a media query.

My question is: am I right in thinking that once a grid-area is assigned, the layout must be done using the grids areas? Or was something else causing this? My solution was to assign the grid areas only in the media query, but if you look at my CSS, it seems better to put the area names in the styles before the media query.

Thanks

What are you most proud of, and what would you do differently next time?

I finished this project with relative ease. I am happy that I was able to recognise to use grid immediately, whilst being able to consider why flexbox might not be an ideal approach.

What challenges did you encounter, and how did you overcome them?

I first used a 3x2 grid and was confused as to how I could centre the two outer cards vertically. I overcame this by realising that I should divide the rows further - this way I could target the block start and end to be in the middle of the two inner cards.

What specific areas of your project would you like help with?

My solution always has a vertical scroll-bar. I would appreciate it if someone could give me an overview of roughly how they would go about eliminating this where possible.

What are you most proud of, and what would you do differently next time?

This was my first project with a responsive layout. I am happy about learning to use picture and multiple image sources in conjunction with changing layouts.

Next time, I would like to be more sure about the dynamic spacing and text sizes to use.

What challenges did you encounter, and how did you overcome them?

At first I was attempting to apply an image with a source set to change between completely different images given different image sizes. I discovered that the more explicit way of defining breakpoints using pictures better suited this scenario.

What specific areas of your project would you like help with?

I am still unsure of the best way to make text size dynamic. I have thought about using clamp along with view height units for the font size. Would it be best to set the root element font size in this way and then use rem units everywhere?

Thanks