All solutions

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

The pseudo elements for the hover effects on the nft image. I also tried to follow the cube css methodology for this challenge.

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

Combining the pseudo elements to create he hover effect for the svg view icon and the color overlay simultaneously

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

I tried using the css cube method along with bem for the naming conventions. I am still new to this methodology so any tips or critiques on my html and css structure would be really helpful.

Thanks! :)

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

Combining both CSS Flex and Grid styles to utilize their strengths

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

Keeping my code to a minimum while adding custom styling to each Summary type

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

Any advice on being smarter with the amount of css and html I'm writing. What custom properties could I use to reduce the code I've written.

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

The setup of the desktop layout using grid, and the positioning of the svg quote using a pseudo element along with absolute positioning.

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

The main challenges I encountered were in most effectively grouping and naming elements with css classes. I wanted to keep my code as dry, readable, and as reusable as possible. I also found it a challenge to exactly match the box-shadows of the cards, and tried to use the figma design, but ultimately just ended up eyeballing it.

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

I would really appreciate any guidance on the HTML organization and CSS classes I used for the cards. Specifically:

• What is the most efficient and semantic way to name the cards with different colors
• What is the most efficient and semantic way to name the cards for the grid template needed to position them in the desktop view
• What is the best strategy for taking a box-shadow in a design, and converting that to CSS so that color, spread, blur and x/y positioning are accurate.

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

The use of CSS Grid to complete the desktop version of the page, with the offset columns and rows.

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

Creating the offset rows and columns, which I overcame by using CSS Grid.

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

Any help me with my HTML markup and CSS styles to make them more concise and efficient.

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

Using the picture tag along with the srcset attribute to switch between my images depending on the screen size.

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

Setting up the image correctly for the desktop version. I ran into a problem with the image not being the right height and leaving empty space below. I changed my approach to use CSS Grid and the gap property for the right hand side of the card.

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

I would like to know if there is anything I can improve in my HTML setup, is it both efficient and semantic.Similarly for the CSS could I make it more concise or efficient in any way.

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

I used the picture element along with srcset for the first time to load in the mobile, tablet, and desktop image sizes.

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

The most challenging part of this challenge was the hero image. The combination of loading the correct image depending on the screen size as well as positioning it correctly.

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

The hero image, it's not perfect at every screen size. I was able to match it according to the figma design sizes of 375px, 768px, and 1440px. However there are some sizes in between that need fixing still.

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

Using SASS instead of vanilla CSS, however I can make more improvements with my implementation and am open to feedback

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

Setting up and using media queries correctly. I referenced MDN, as well as some content from Kevin Powell. I ended up signing up for his free Conquering Responsive Layouts course to learn more.

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

Setting up SASS, and pushing it to a repo where the scripts for it can be ran. If anyone has more feedback on my setup, or links to resources I would love for you to share. Thanks

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

Matching the final challenge as closely as possible to the designto

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

Knowing which heading levels to use, and if they are semantically correct. I resubmitted by challenge to it no having an h1 tag. I decided to wrap the anchor link with an h1.

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

When it comes to a simple card design, what are the appropriate heading levels to use? My submission was flagged initially for not having an h1 tag.

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

Matching the final challenge as closely as possible to the design

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

This project didn't present many challenges in writing my HTML and CSS. I would like to return to it potentially to refactor using SASS

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

Are there any areas that can be approved for code efficiency and conciseness

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

Following a design from start to finish

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

No challenges for this particular project

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

Writing semantic and efficient code