All solutions

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

99% using grid. Only centering the body html tag that I used flexbox.

For the profile header:

    display: grid;
    align-content: space-between;

For the overall layout:

    display: grid;
    grid-template-areas: 'danial danial jonathan kira'
      'jeanette patrick patrick kira';
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;

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

• Using grid properly, and lots of mdn, stackoverflow, and googling. I feel that in production or practical experience, everyone is more comfortable with flexbox than grid. This challenge forced me to use grid more effectively than ever before.

• Figuring out how to add the quotation into the background. Using svg as a background instead of a tag. This is cool ngl.

  background-image: url(../images/bg-pattern-quotation.svg);
  background-size: 7rem 7rem;
  background-repeat: no-repeat;
  background-position: top right 18%;

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

Using flex and grid together to match the design along with responsiveness. This was one of the toughest challenge I've done so far but looking back at my code, it's not that hard to implement.

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

Figuring out how to segment the html elements to then apply flex and grid. Mostly just brainstorming, and trial and error. I went through flexbox frogger and grid garden before attempting this challenge.

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

I felt like I overused display:flex and align-items:center A LOT in this challenge.

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

Learning to use:

• SASS as a CSS preprocessor
• media queries for responsive views
• mixins using SASS
• picture tag

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

Making different views for mobile and desktop, I never had to prepare screens for each with different pictures.

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

Changing hr into a single shade, you will need to add border-style:solid.

 hr {
    border-color: var(--stone-150);
    border-style: solid;
  }

Targeting the li marker specifically to change it's color

  ul ::marker {
    /* works */
  }

  li::marker{
    /* works */
  }

Adding border to the each rows

  tr:not(:last-child) td {
    border-bottom: 1px solid var(--stone-150);
  }

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

Mainly the learnings above, also just searching for the answers. I am using the codeium extension on vscode.

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

I used header tags just for the easy benefit of the padding and sizing, is there a better html element to use for headers?

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

Using :hover. I do want to explore tailwind soon.

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

Finding the correct color for the background by trying out different percentages to see which one matches the picture.

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

The font-weight on the name title and the location. I couldn't find the correct weight.

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

Using .ttf with variable font weights, using clamp function for font-size, implementing CSS reset (thank you Rupali), using rem instead of px (thank you again Rupali) and object-fit CSS property for the first time.

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

Making the font-size change according to the screen size without using media query. Litterally googled it and [this results] was returned.

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

Tips or rules for sorting the CSS properties. Right now I am just ordering it based on the time I added that property. Should I do it alphabetically or is there a tool/extension I could use.

Other general feedbacks like what I can do better are also welcomed.

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

• Using pure CSS, as I've been too reliant on component libraries

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

• Importing fonts, just read the docs or W3Schools

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

• Anyway to do this in pure CSS without flexbox?

• What did you find difficult while building the project?

Determining the styles based on the image. Shadow and border radius wasn't provided in the style guide.

• Which areas of your code are you unsure of?

None at the moment

• Do you have any questions about best practices?

Tailwind config in the script tag. Unsure whether there's a cleaner way to do things.