All solutions

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

• First time using SASS/SCSS after learning from an online tutorial. I learnt how to implement the SASS file structure, variables, nesting, functions and mixins.
• First time using BEM methodology which turned out to be quite helpful and i quite like it.
• First time trying out a mobile first approach which helped me understand the strengths and weaknesses of such a workflow.
• Researching online helped me solve a lot of responsiveness issues i was facing, all hail stack overflow 💯. -Further improved my understanding of my base CSS knowledge especially CSS Grid & Flexbox.
• In short a lot of first time experiences 🥳.

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

• Initially struggled with figuring out the SCSS file structure that would be most suitable, i.e;
  • What should go in my main.scss, how many scss files do i need and for what purpose, and after some research i was able to find the base layout of what is usually done then went ahead from there.
  • Nesting was very confusing at first but quickly learnt what i was doing wrong and how i could leverage BEM to target exactly what i wanted.

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

• The preview looks good on small devices up to medium laptop screens but on large screens in my opinion the product card looks too zoomed in. I followed a mobile first approach and i guess that's where the issue is? I'm not sure, but I would've like the product card to look a bit smaller and centered on larger screens so that it looks a bit more aesthetically pleasing to the eyes. So if anyone has any tips on what i could do differently next time please feel free to share. -Also, since this is my first -time using SCSS, any tips/tricks would be much appreciated for example on how to optimize code / file structure, etc.

-Thank you in advance 🙂.

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

• Proud of being able to implement appropriate semantic HTML elements.
• Implementing new pseudo elements like ::marker to target bullet points so as to style them appropriately.

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

• Styling the list items and bullet points to appear as required was a bit confusing and required some researching and trial and error. I had to make use of padding, margin, and pseudo-element ::marker to style the lists as needed.

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

• I made sure to use the proper semantic HTML elements, if I have made a mistake any feedback would be appreciated.
• Any feedback regarding the structure of my code especially the CSS would be greatly appreciated.

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

I enjoyed working on this particular challenge and being able to implement what i learnt from previous challenges such as box-shadow as well as trying out the capabilities of the pseudo element :hover and implimenting gradient hover effects 🚀 I also opted to use CSS Grid instead of flexbox for the links as I just learnt CSS Grid very recently and wanted to gain a better understanding of it hands on which proved useful despite its challenges. 🔥

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

None in particular but any help / feedback would be greatly appreciated. 👍

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

-Particularly proud of quickly defining the structure and content as required as this was just simple CSS.💯

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

• First time implementing a local font / font file into my code so had to research how to do it correctly.
• Getting the smooth transition back to the original colour for the H1 when user stops hovering on the card and how to implement the shadow behind card using box-shadow.
  • To overcome this, after defining the pseudo code to target the H1; .container:hover > H1 {color: #f4d04e;}, simply had to add transition: color 0.5s ease-in-out; to the H1 in my CSS.

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

None in particular but any help / feedback would be greatly appreciated. 👍

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

• Being able to nest flexboxes and center aligning content.

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

• Implementing external fonts, but a quick read on the google fonts webpage quickly solved that issue.

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

• When styling my main element;

main {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffffff;
        width: 25rem;
        border-radius: 15px;
        padding-top: 20px;
        margin: 10px;
      }

Initially I had included a height property set to 80vh to try and achieve the required look and mainly to fit the content inside because I thought the contents would overflow and not fit in the element by default, however upon shrinking and expanding my website it didn't quite preserve the layout I wanted. On a whim, I deleted the height property and suddenly my content fit properly in contrast to what I originally thought and was also properly responsive as to my needs. I would like some insight on to why I did not need to set a height property and how my content seemed to fit perfectly automatically . I am new to flexbox so maybe it's just some oversight, but any help would be greatly appreciated :)