All solutions

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

This was the biggest project I have done so far with HTML/CSS and I am proud of how responsive I made it, especially as we had different designs for mobile, tablet and desktop.

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

I initially had issues with the two images and the header displaying only on desktop, however with the use of flexbox I managed to resolve it.

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

I would like help with my HTML - I think it could be organised better and possibly even adapted better for accessibility/those with screen readers.

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

My use of CSS grid in order to create the design layout, easily switching between mobile and desktop.

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

Wasn't sure initially how to best structure the HTML, but I think it looks good.

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

The responsive nature of my design and the use of CSS grid.

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

Proud of my use of the CSS grid, which I only learnt an hour before embarking on this project. I worked out the number of rows and columns needed beforehand in order to meet the design, which looks pretty accurate now.

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

Initially had challenges centering both the top part and the blocks on the page using CSS grid, with them slightly to the left and right, however flexbox worked.

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

I would like someone to check over my CSS grid usage and check it is as responsive as possible, matching the brief.

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

Use of flexbox in order to easily make the layout shift from vertical to horizontal as the browser size increases (to a desktop view).

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

It was difficult initially to create the switch to a desktop view (horizontal) after initially designing mobile first. However, once I was able to make the content wrap and adjust the margins, it met the design.

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

Feedback on the media queries used in order to make this responsive. Should it be done in this way?

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

I am proud of my semantic html, involving researching the different elements and how they should be used, such as the section tags and also the article tag for the recipe.

I am also proud of my ability to make the design responsive, where it switches from the desktop/mobile view with the use of media queries.

I believe the end result is pretty good and matches the figma design.

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

I encountered challenges with the various padding and spacing within elements, such as between the bullet point on the lists and the list item, having to add classes in order to achieve the right spacing as per the figma file.

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

I would like some feedback on both my semantic HTML and also the responsive element of my design. Should I be using pixels for media queries and have I done it in the right way? What other changes should I make to have this as responsive as possible?

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

The overall design and the use of figma in order to perfectly calculate the sizes for padding, divs and margins. I also used media queries to make it responsive for tablets, desktops and mobiles (as per the figma design files).

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

I encountered problems initially trying to make it responsive for mobile and desktop without the use of media queries. However, once I added media queries I was able to use the Chrome Developer tools to assist me in resizing them with the use of rems.

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

I would like help with my use of media queries. I am not sure if this is the best way to do it in order to follow best practices of responsive websites and whether pixels are the best units to do this.

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

Started to use Figma this time, using it as a tool to get information on border radius, padding, element sizes and everything - so hopefully this has shown positively in the design. I have converted pixels to rem and used that to size the main blog card, however I am still learning with CSS units and working out when best to use them.

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

The only challenge I encountered was positioning the author's name at the bottom central virtually, in line with the photo of the author. In the end, I utilised Flex box to do this.

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

I would like help with my use of CSS units and overall design responsiveness, whether I have used the correct units in the right places and also made it as responsive as possible.

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

Using flex box as a beginner to centre the content and arrange the image/text in a column.

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

Positioning the card central vertically was challenging, however once I had set a min-width on the property, it worked.

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

I would like help on making this more responsive, including through the use of units (such as svh and rem which I have read about online) and also making the structure of the card stay in place, even on small mobile display sizes.