All solutions

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

I'm just glad that I got the project done, although this time I had to rely lots on YouTube tutorials and documentation to make my way through.

Next time, I'd want to focus on going through the documentation, as painstaking as it sounds, so that I can better understand the theory behind CSS Grid before applying it in my project.

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

This was one of the more tougher projects that I had to deal with, so much so that I had to rely on YouTube tutorials for a good chunk of this project, I will provide the link to the channel below. Despite the challenge, I learnt a lot more about CSS Grid and its utility when it comes to ordering your layouts of the cards in this project.

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

I definitely need help in writing better CSS Grid. If there are any suggestions that I could use to help me better understand the usage of CSS Grid, I'll greatly appreciate it.

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

Proud of being able to match the solution as closely as possible. I also started using SCSS which was nice to use.

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

Challenges encountered was having to use media queries and and tags to switch between images for mobile and desktop. A YouTube tutorial by Kevin Powell helped me immensely.

Another issue was the fact that on desktop view, the content took more width than the image so I had to force both image and the content to take up a width of 300px. The image wasn't filling up the tag so I had to force the height to be 450px, which seemed to fix the issue.

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

I'm not too happy with the way I dealt with my second issue, especially in setting the height of the image. If time permits, please look through my code and suggest whatever fixes I can implement rather than just explicitly setting the height of the image.

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

I'm proud of just being able to complete my solution and getting it to look as close as possible to the original.

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

Some challenges included just researching the right elements to be used for specific sections of the page. This included the use of and lots of elements. Another big challenge that I had to deal with was the horizontal scroll on mobile screen sizes. The best I could up with was reducing font size, adjusting padding and margin, and using an *{} selector for each media query. I'm not too confident in my solution though.

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

I would like help in dealing with the horizontal scroll that occured on mobile devices. What kind of paddings and margins should I implement in the desktop first? Then, when using media queries, how should I style them to prevent horizontal scroll?

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

I am proud of the fact that I was able to style the content appropriately using the CSS Flexbox styling without having to refer to YouTube videos as every turn and corner.

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

The main challenge is simply having to eyeball the paddings, margins, and font sizes. The only workaround that I could come up with rather than having to pay for the PRO is copying the image onto Paint.Net and trying my best to analyze the spacings and the size of the avatar

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

I need feedback regarding the optimization of my CSS styling. I did achieve the desired result but at the cost of having to refer to the same CSS selectors and dedicating one or two lines at a time rather than targeting multiple elements and styling them accordingly in one go.

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

I am most pleased with being able to match my solution with that of the preview to the best of my ability. The one I would do differently is starting with the HTML before moving on to the CSS portion as by not doing that I had to rework my solution from scratch.

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

The challenges I encountered had to do with the styling, fonts, and width of the card itself. The Figma design helped me greatly in this case, as I was able to get the appropriate margins, padding, and sizes to ensure that my solution closely resembles that of the preview.

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

Feedback regarding my font sizes and weights would be greatly appreciated, especially regarding the "Learning" text. I want to know how I can better match the font weights of the preview.

Also I would like some help on my avatar not showing up on Github pages even though it worked fine using Live Server on Visual Studio Code

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

I'm most proud of being able to complete my first ever project on this site.

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

The main challenges stemmed from CSS and using div elements to place the objects the way I wanted it to. Lots of trial and error and various YouTube videos later, I was able to get it right.

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

I would like feedback on the sizing and placement of the image as well as the text inside of my div element with a class of "box". Furthermore, I'd like to know how off I was with my paddings and if my alternative fonts are good enough to match the original in the design images.