I'm most proud of how the design adapts to different sreen sizes. I used a combination of grid-areas and media queries to make it happen.
What challenges did you encounter, and how did you overcome them?It was hard to think how I wanted the tablet design to be, at the end, I think I made it look good.
What specific areas of your project would you like help with?For the moment, nothing.
Hello @joacomenda, nice job with your solution. It's nice and responsive, and I see you used the clamp function for fluid font sizes. It's working really well.
There seems to be an bug somewhere in your JS, because I am not getting the correct json data when clicking on your different tabs. If you open your console, you will see there is an issue with your for loop at line 21. I hope that helps put you in the right direction for debugging.
Asking user to enter the details and checking them correctly with the help javascript something which I can be proud of.
What challenges did you encounter, and how did you overcome them?Making it responsive and showing the successful page to the user Used third party website to overcome from that.
What specific areas of your project would you like help with?Handling event listener and showing successful page.
Hi, I came across a couple of functionality issues:
I also noticed you used pixels for font sizes in your CSS. It is best to use rem units for accessibility.
Your solution is looking good, I think you'll need to work on the functionality and definitely learn about rem units. Good luck!
Hi Nizi, your functionality isn't working for me. When I click the button, the menu does not open. I see you are using sass, which I have only just started learning - I wish I could be more help with that. Your html looks good. Visually your solution is spot on. I think you are very close to an excellent solution once you resolve the javascript functionality.
Getting it responsive was not fun, tried following some of Andy Bell's 'every layout' principles.
What challenges did you encounter, and how did you overcome them?Had to learn more about the CSS clamp function.
What specific areas of your project would you like help with?I just need to practice more.
Hi Achara, really nice solution. Good job using custom properties and the clamp function too. If I could suggest only a couple minor things, you could maybe add a little transition for your button hover. And you can use rem units for your media queries too. Great job.
Deploying the site in grid
What challenges did you encounter, and how did you overcome them?Using grid, having mainly designed in flexbox previously.
What specific areas of your project would you like help with?Any improvements on the grid layout
Hi Martin, super nice job! Good use of custom properties and semantic html. One minor UI difference I noticed is that on desktop, the "quote" mark background image in the violet card should be a little further than the right edge, compared to the mobile version. If you want to match this a little closer you can easily adjust the distance in your media query. I noticed you used rem's, but you can also play with percentage for this.
I'm proud that I actually understood how the Grid works - it took me so long to actually understand how that works and hopefully in the future this becomes easier and easier.
*I redid the project after I saw that while my mobile version was ok, Desktop version just not good - I didn't really paid attention to the desktop measurements that they gave and made all the divs way too big. Took me another 2 days to finish this again
What challenges did you encounter, and how did you overcome them?Working with media queries was probably the most challenging part - but practice makes perfect. Another issue I faced is actually creating more space in the main body of the page, while mobile wasn't really an issue I still don't know how to create more space horizontally without redoing the whole project again.
What specific areas of your project would you like help with?Hi Dan,
I'm getting horizontal scroll on mobile and the cards are and your text above the cards is not responsive. I'm wondering if having min-width:100vh on your container is causing that. Maybe try using a max-width on your container. I also don't think you need to set heights for the different components here (except for the icons). Sometimes that too causes issues. Desktop is looking great, I think I would recommend working on the responsiveness.
Hello Lucas, I noticed you made the main image of the perfume a background image. I think for this one a semantic image tag makes more sense since it is an important image of the product. It should have alt text too.
I don't think you need sections or articles inside your card component. If you want to divide your content into different sections like this, you can use div's.
I would check your padding around the card content as well. The text to me looks a little too close to the edge. I also don't see a solid border around the card itself. It might be a stylistic choice if you like that.
All in all it looks good, I hope some of this information helps.
Your solution looks good, but on my phone it is really skinny. I think it might be your margin for the container is 60px all around. Maybe if you lower the left and right margins it will look better. I would also avoid using px for your font sizes and use rem instead. I think in the table, Calories, Carbs, Protein and Fat would the table headers and with scope of row. Hope this helps, nice job!
I'm happy of how smoothly it went, nothing more.
What challenges did you encounter, and how did you overcome them?Nothing was really challenging.
What specific areas of your project would you like help with?None really. But if someone has something to say, i'll gladly listen
Nice job. I'm wondering though why you chose id's instead of classes for your selectors. There a a couple videos that explain the difference.
https://www.youtube.com/watch?v=CAPPO0r0DIQ
https://www.youtube.com/watch?v=69m_rC4UxYY
You might also consider changing your h3s to paragraphs. Having the h3 before your h2 is out of order, and the name doesn't need to be a header.
Speaking of the h2, the text inside should be a link to the blog post, using a nested <a> tag. This video helped me immensely when I was working on this challenge.
https://www.youtube.com/watch?v=nM78am-FC9Q
Proud for completing the project.
I have a few suggestions that I hope you will consider:
Inside of your h2, you'll want to wrap the text in an <a> tag. This is the link where the user would navigate to the blog post.
I don't think you necessarily need to use extra divs for the image and content.
The 'Learning' text can just be a paragraph. You have an h2 below this, so having an h5 there is out of order.
Use rem units instead of pixels for font sizes and sizing.
Your solution looks good but I think with these adjustments it will be more semantically correct. I hope this helps.
You have a good start but it seems like your project is unfinished. I have a few suggestions that I hope will be of help moving forward if you choose to continue improving it:
Create a style.css file in your root project directory and use a link tag in the head rather than writing your css in the html file. Your html is missing a <main> element. You can change your section tag to main. Since this is a card and typically cards are often repeated on web pages, you might want to change your h1 to an h2 or h3. I would make the location a p instead of an h4. Your list items should contain anchor tags <a>, since they are linking the user to your different profiles. If you would like to match closer to the design, check your stylings again compared to the design files and see what could be tweaked to more closely match.
I feel way better working with flexbox thanks to the practice. This project felt way easier than the previous ones.
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?Everything's good so far.
Nice work on your solution. I see a few improvements that might help. Your h2 title should contain a <a> tag inside, which would serve as a link to the blog in real life. You've also used pixels instead of rem units for your font sizes, which is a problem for accessibility. You might also want to take a look at the differences in the design files for the box shadow between active and inactive states. I hope this helps.
