@rinoraj6
Latest solutions
Latest comments
- @john-mirage
Hello, nice work
Here some ways you can improve your project:
- The button has no hover effect
- The social media links have no hover effects
- You should add a feature that close the tooltip when you click outside of it.
- You should add a button for the share button instead of a div so users can select and open the tooltip with a keyboard.
- @kaoutar-ouadihWhat are you most proud of, and what would you do differently next time?
I proud of completing this challenge!
What challenges did you encounter, and how did you overcome them?how to make the row height dynamic and fit the content.I solved that using grid-auto-rows: auto
What specific areas of your project would you like help with?Anything that can help me improve.
@john-mirageHello, nice work
Here some ways you can improve your project:
- You should consider moving your css in a different file, it is more clean this way.
- You should add a container for the cards so the width is fixed and the cards dont stretch.
- In the <head> you forget to rename the <title>
- To help you start a project, you can add a css reset file. It defines some rules to ease your workflow.
- You can add meta tags in your <head> element to display informations and an image for Google and the social medias like facebook and twitter.
- The images can be converted in webp format, webp format compress images more so you get less loading time.
- @lij110397What are you most proud of, and what would you do differently next time?
1. How to use flex box and grid to build responsive layout
- Use flex box. Be familar with attributes like "flex-wrap","align-items","justify-content" and so on.
form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; } .name { flex-grow: 1; flex-basis: 160px; } .email { flex-grow: 3; flex-basis: 200px; } button { flex-grow: 1; flex-basis: 80px; }- Use fluid type and space This makes the font size changing accordingly. It is based on a useful tool - utopia. But in this case, I only use "--step-0".
:root { --step--2: clamp(0.6rem, 0.5032rem + 0.4128vi, 0.8748rem); --step--1: clamp(0.75rem, 0.629rem + 0.5161vi, 1.0935rem); --step-0: clamp(0.9375rem, 0.7863rem + 0.6451vi, 1.3669rem); --step-1: clamp(1.1719rem, 0.9829rem + 0.8063vi, 1.7086rem); --step-2: clamp(1.4648rem, 1.2286rem + 1.0079vi, 2.1357rem); --step-3: clamp(1.8311rem, 1.5358rem + 1.2599vi, 2.6697rem); --step-4: clamp(2.2888rem, 1.9197rem + 1.5749vi, 3.3371rem); --step-5: clamp(2.861rem, 2.3996rem + 1.9686vi, 4.1714rem); }- Use relative unit like rem
- Use media quires when necessary.
How can I develop the desktop design without using media quires, but using flex box or grid only?
I added one media query and in larger screen I used grid and specifically put different elements in different columns.
What specific areas of your project would you like help with?How can I develop the desktop design without using media quires, but using flex box or grid only?
@john-mirageHello, nice work !!
Why do you want to avoid using media queries ?
- @Thedgmz98What are you most proud of, and what would you do differently next time?
I'm proud the way I did this and the excellent time management doing this. That was great!!
What challenges did you encounter, and how did you overcome them?I have some problems with the H1 because in desktop was supposed to be with some line jumps, and on mobile just two. But i barely fixed showing another H tag to make it work.
What specific areas of your project would you like help with?Responsive design and font styling
@john-mirageHello, nice work !!
Here some ways you can improve your project:
- In the <head> of your project, you loaded more fonts than the project need, you can remove the links who are not needed.
- To help you start a project, you can add a css reset file. It defines some rules to ease your workflow.
- You can add meta tags in your <head> element to display informations and an image for Google and the social medias like facebook and twitter.
- The product images can be converted in webp format, webp format compress images more so you get less loading time.
- Check out the BEM methodology, it can help you for the naming of your classes
- You forget to add a favicon in the <head> element.
Marked as helpful - @TimelessgreedWhat are you most proud of, and what would you do differently next time?
It's a great project
What challenges did you encounter, and how did you overcome them?The margins and paddings
What specific areas of your project would you like help with?the margins and paddings
@john-mirageHello, nice work !!
Here some ways you can improve your project:
- Your card has a fixed width, you can make it responsive by adding a relative width of 100% and a max-width of 460px so the card will shrink when the screen width in under 460px
- To help you start a project, you can add a css reset file. It defines some rules to ease your workflow.
- You can add meta tags in your <head> element to display informations and an image for Google and the social medias like facebook and twitter.
- The omelette image can be converted in webp format, webp format compress images more so you get less loading time.
- Your page overflows on the right (on my screen) because your wrapper has a width of 100vw, removing this rule fix the issue.
- For the nutrition section, you can use a <table> element.
- There is a left padding on the lists by default, you can remove them by adding
padding: 0on the <ul> or <ol> elements. - Your project do not contains media queries, you can add some to make your project fully responsive.
- @bhuvandev16What are you most proud of, and what would you do differently next time?
- I'm most proud of the clean and visually appealing design I created for the social link web page
- One challenge I encountered was aligning elements properly across different screen sizes. I overcame this by utilizing CSS Flexbox to ensure responsive design.
- I would appreciate help in improving the user experience through advanced CSS techniques, such as animations or transitions, to make the page more engaging.
@john-mirageHello, nice work !!
Here some ways you can improve your project:
- You can remove the underlines of your links by adding the
text-decoration: none;rule. - Your card has a fixed width, you can make it responsive by adding a relative width of 100% and a max-width of 350px so the card will shrink when the screen width in under 350px
- There is no paddings around the card, you can add some horizontal paddings to make the card breathe on mobile device
- To help you start a project, you can add a css reset file. It defines some rules to ease your workflow.
- The card has lower paddings on mobile than on desktop, you can add a media querie to reflect this behavior.
- The social links can be placed in <li> elements surrounded by an <ul> element.
- You can add meta tags in your <head> element to display informations and an image for the social medias like facebook and twitter.
- You can define the inter font on the <body> element so the font spread accross all the children elements.
- The hover effect should only be applied to the devices who have hover feature, you can add a media querie to target those devices with
@media screen and (hover: hover) {}
