All solutions

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

I like the layout and design of the card and would customise the elements to test different design outcomes.

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

I didn't encounter any challenges so far, the project was simple enough.

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

I am open to any feedback from the community, I'm sure there's always room of improvement even simple projects.

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

Getting used to the idea of creating components first which is very useful for real world projects that tent to increase in scale.

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

I encountered challenges with getting the negative spacing right, especially around the card content. I was able to adjust the widths and padding to a degree which solved the issue however, I think it would be more reasonable to figure out how to go about it from the start of the project.

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

I would appreciate any feedback on how to style the background image to look exactly like the design as looking at the solution and design side by side, I can tell they are a few pixels off looking similar.

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

I am becoming more fond of searching for solutions online rather that relying on memory.

It also helped to inspect the webpage to know exactly how things line up; sometimes, the solution can be discovered by analysing the page through the browser dev tools.

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

There were a few challenges I encountered;

1. The syntax for linear-gradient as I very rarely use the property, which is crazy as it looks so cool, a quick search on the MDN web docs page and I found the syntax.
2. Trying to keep content on the left and right side of the card on the desktop design equal in size. I searched for solutions on flexbox and got things like flex-basis and flex as properties to make them equal, however, the issue lied in my CSS, the left and right boxes had different padding on the their left and right sides, and I found this out by inspecting the elements using dev tools.
3. I rarely use box-shadows as well so forgot how the content looked. The MDN web resource was also helpful and because I loved how the shadow looked on the reference design, I copied and saved the code for quick implementation in the future.

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

I would like help with feedback on the structure of some of the elements I used in the project including; the 'paragraph' and 'span' elements which I used to create the different categories that were on the right or bottom side of the card.

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

I am proud of how quickly it took me to set up the page and write markup for the layout. I think it is a simple project with few elements so there are no significant changes I could implement differently, except may be customising the design to suite my style preferences

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

None so far, the project was simple and had few elements and required styling so no challenges encountered

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

None so far, but I am open to critique and feedback on how to approach the project better or new things I could have implemented.

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

I am proud of how I designed the layout and how easy things fell into place because of it. For this challenge, there 2 areas I would like to improve on;

• How I plan the layout from the get go so I don't end up making last minute changes
• write up the media queries a bit differently considering the minimum width condition and the elements to place in them

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

There were three challenges I encountered in this project;

1. I did not know how to style bullet points or the numbers in html list items, I learnt about the solution watching Kevin Powell's video on how to style html lists using the pseudo-selector '::marker'.

2. The overall layout of the page, considering both the desktop and mobile design and how the elements would scale up and down was a challenge as well as I didn't go through all the elements in detail.

3. Tables were always a quirk for me when it came to laying out content and I was not at ease when I saw it at first, however, learning about the table elements on by one, how they work, what structure to have them in proved useful and relatively easy.

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

There are a couple of ways I have seen other developers plan their layout and use media queries effectively and so that is an area I could really use help with. Using max-widths and heights for content like the div tags is also an area I need help with.

I'm trying to use different layout options, any ideas and feedback are welcome

Feedback is always welcome

Feel free to drop your feedback, I know there are a couple of things I could improve

Any feedback on this project is welcome

I would like to know what the best way to implementing media queries with sass is plus feedback is welcome.

Any feedback is welcome