All solutions

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

I'm proud of getting the solution done and making the grid layout responsive to different screen sizes.

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

This project pushed my knowledge about CSS Grid and I learned a lot about grid template and grid area during the challenge. I recommend this video to anyone struggling with CSS Grid: Learn CSS Grid - A 13 Minute Deep Dive

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

Any tips about CSS Grid or general code quality are welcome!

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

This is my first project using SASS, I wanted to give it a try so this project was a great opportunity to learn the fundamentals.

This project was also a great opportunity to learn more about CSS Grid when aligning the cards for desktop view.

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

Learning SASS in general and using grid to align the cards.

These videos helped me overcome them:

• Sass in 100 Seconds
• Learn CSS Grid - A 13 Minute Deep Dive

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

Any tips regarding SASS or CSS Grid will be highly appreciated. I would also appreciate feedback about my code quality, if you find anything that could be improved please let me know!

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

I learned how to adapt to different screen sizes using CSS Flexbox. I achieved this by separating the image from the rest of the card content inside a flexbox and changing the flex-direction property depending on the screen size.

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

• "Flexbox item widths are affected by padding" on stackoverflow and "CSS flex Property" by w3schools - This helped me when evenly distributing the items inside the flexbox for desktop viewing because of the added padding by the content.
• "Changing Image depending on Mobile or Desktop HTML & CSS" on stackoverflow - This helped me when changing the perfume image depending on screen size.

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

Nothing specific. However I'm open to feedbacks about code quality or anything I can improve. If you find anything please let me know! 🙏

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

Getting the project done using semantic HTML elements.

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

Styling unordered lists, table and page margin.

1. For the unordered lists I used a combination of grid and flexbox to separate the list bullet from the text.

2. As for the table I used border-collapse: collapse; otherwise tr creates no single block.

3. When first styling the page margin I wanted the top margin to grow based on the device width for desktop users, but it can't be too big. At first I used a "fake" margin with divs at the top/bottom of the document to make use of the max-height property in CSS. But later I styled the page margin using padding: min(calc((100svw - 736px) / 2), 8rem); to the document body. The min function takes the first value separated by a comma as the preferred value and the second as the maximum value.

Useful resources:

1. "how to align marker to center of the image lists HTML" on stackoverflow
2. "Why TR not taking style?" on stackoverflow
3. "Can we define min-margin and max-margin, max-padding and min-padding in css?" on stackoverflow

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

I would like to know if my code follow best practices. This could be anything from code quality to accessibility. I'm open to feedbacks!

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

With this project I was able to better understand concepts like the CSS Box Model and also CSS Grid.

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

Aligning the social buttons was difficult. I started by using Flexbox on button elements but later decided to use Grid instead. This is where I learned more about the Box Model and CSS Grid, I used tags instead and managed to align the elements using CSS Grid

.socials {
  display: grid;
  row-gap: 1rem;
  width: 100%;
}

These are the following resources that helped me:

• Grid Layout: CSS Grid Layout Module by w3schools

• Box Model: CSS Box Model by w3schools and Learn Box Model by web.dev

• CSS Reset: A (more) Modern CSS Reset on Piccalilli

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

I am looking to get feedback about the quality of the code that I've written, I tried my best to code while following best practices but maybe I missed something. I'm open to feedbacks for accessibility tips and code quality. Any advice will do! Thank you :)

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

With this project I was able to learn about using custom fonts using CSS as well as using media query. I also experimented using CSS Flexbox.

This is also my first time using Figma when designing the page and I tried my best to get as close to the design as possible.

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

• During this project I had trouble when spacing elements evenly inside the content div when using p and h1 elements. After experimenting with my code for a while, what worked for me was using the following CSS code:

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.category, .publishdate, .title, .description {
  margin: 0;
  display: inline-flex;
}

• I also had trouble changing the card style when hovering the title. This involves changing the parent element when hovering a child element, in this case the title. What worked for me was using the following CSS selector: .card:has(.title:hover)

Useful links:

CSS Flexbox formatting with p element on stackoverflow

CSS :hover Selector by w3schools

How to style the parent element when hovering a child element? on stackoverflow

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

• In this project I wasn't able to use the custom downloaded fonts (Figtree) when deploying my project to GitHub Pages when it works just fine locally.

This is the code I was using when importing fonts locally:

@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/Figtree-VariableFont_wght.ttf');
}

I managed to make it work by importing the fonts from the html document using google fonts with the following code:

• Also I'd appreciate any tips about improving my workflow when using Git as I'm quite new to version control.

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

I'm proud of how the code turned out, this helped me practice writing CSS by trying to get as close to the solution as possible.

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

These are the following challenges I encountered during this project:

• Center div using CSS, what helped me: How TO - Center Elements Vertically by w3schools.
• Box shadow using CSS: CSS Box Shadow by w3schools.
• Position a div at the bottom of the document for the attribution: How can I position my div at the bottom of its container? on stackoverflow.

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

I would like to know how to better approach aligning elements using CSS.