P
@joshcesanaSubmitted 3 months ago
What specific areas of your project would you like help with?
Should I be hardcoding the widths?
hitmorecode
@hitmorecodeAll comments
- @hitmorecodePosted 3 months ago
Congratulations looks really good. The answer to your question is yes. Most of the times hard coding the width and height of a card is the way to go. I do have a few tips.
- When working with different images for different screen sizes the way to go is by using the picture element. These videos srcset and picture element explains really well how it works and what it does.
- I would change the
h2to apand keep theh1as it is. - As for the price, change the 2nd
spanto<s></s>
I hope you find this helpful. Keep it up 👍👌
Marked as helpful1 - @sabreen01Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@hitmorecodePosted 3 months agoNice well done. The size of the card is a bit of, but it looks nice. Just a few tips.
- You should change
h2toh1a web page must have one h1 tag. - You use
brto break the header, you don't need to do that. You can remove the br tag. - Don't add
font-familyon the CSS reset.font-familyshould be added on the body. - You should change
pfor the price to<s></s>. - You should look into semantic html.
I hope you find this helpful. Keep it up👍👌
Marked as helpful0 - You should change
- @cosminbordianuSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I learned a lot during this project and I’m proud of myself for seeing it through to completion.
What specific areas of your project would you like help with?I would greatly appreciate help with a few aspects of my project:
- Does * {margin:0; padding:0;} affect the web site's performance? If yes, what is an alternative for resetting browser default styles?
- Should you avoid using too many elements? I used three divs inside component and looking back I could have achieved the same result with fewer div elements.
- Why there are so many fonts in the project files? I only used the variable font for all elements.
- At some point the blog card doesn't stretch no more. Why it happens? (This question is optional. If you have some time to answer, I would gladly appreciate your help.)
@hitmorecodePosted 3 months agoCongratulations well done.
- CSS reset is used to remove unnecessary things from a web page. This does not affect the performance of a page.
- Yes you could have done it with less elements, but also you should start looking at semantic html.
<body> <main> <img src="" alt=""> <button></button> <p></p> <h1></h1> <p></p> <footer> <img src="" alt=""> <p></p> </footer> </main> </body> or (semantic html) <body> <main> <section> <img src="" alt=""> </section> <section> <button></button> <p></p> <article> <h1></h1> <p></p> </article> </section> <footer> <img src="" alt=""> <p></p> </footer> </main> </body>- Those are just different variations of the same font, you shouldn't pay to much attention to that.
- The card is not supposed to stretch, so the end result that you have is correct.
I hope you find this helpful. Keep it up 👍👌
Marked as helpful1 - @Andiko-KSubmitted 3 months ago@hitmorecodePosted 3 months ago
Congratulations looks good. Just one tip.
- When switching to small screen size the image changes before the card adjust to small screen size. Change the
max-widthin the media query to the same size as themax-widthon the picture element.
I hope you find this helpful. Keep it up👍👌
0 - When switching to small screen size the image changes before the card adjust to small screen size. Change the
- @AbigirlMuchineripiSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud because I managed to do the mobile view without any assistance. The design is almost or the same with the figma design.
What challenges did you encounter, and how did you overcome them?The desktop design almost made me cry lol, but I tried my best.
The challenge I have is that my button text is not turning white.
What specific areas of your project would you like help with?-
My button text is not responding to the color set to white.
-
And this text (Your performance exceed 65% of the people conducting the test here!) in the desktop design is slightly bigger.
@hitmorecodePosted 3 months agoCongratulations looks good. I see you converted pixels to rem's. I'll show you a simple trick to preventing you from having to grab a calculator every time you want to convert pixels to rem's.
/* add this on the root */ :root { font-size: 62.5%; } /* add this on the body */ body { font-size: 1.6rem; }This is going to convert pixels into a base 10 system. This means that to convert pixels to rem's all you have to do is divide the number of pixels by 10 and you'll have the rem value. For example
font-size: 32px;will befont-size: 3.2rem;and so on.I hope you find this helpful. Keep it up👍👌
Marked as helpful0 -
- @hkaur108Submitted 3 months agoWhat specific areas of your project would you like help with?
I have fixed semantics and bit of styling, any feedback is welcomed.
@hitmorecodePosted 3 months agoCongratulations well done. Just a few tips.
- when you have classes or/and id's and you want to target a specif class or id. You don't have to make the selection through the parent.
Here you want to target the class top-container, but you started with the class main-container. You don't have to do this .main-container .top-container { width: 100%; border-bottom-left-radius: 30px !important; border-bottom-right-radius: 30px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; margin: 5em auto; } You can do it like this. .top-container { width: 100%; border-bottom-left-radius: 30px !important; border-bottom-right-radius: 30px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; margin: 5em auto; }- Your CSS is kind of hard to read it feels like it's all over the place. For a better structure write your CSS the same way as your html markup. Start from top to bottom, meaning the first element in your markup is the first element you style in CSS.
- You forgot to remove the border on the button.
- On the left panel, to center the circle, use flexbox instead of margin.
I hope you find this helpful. Keep it up👍👌
Marked as helpful0 - @hkaur108Submitted 3 months agoWhat specific areas of your project would you like help with?
I have fixed semantic and styling, Please advise any feedback to improve the styling in the future.
@hitmorecodePosted 3 months agoCongratulations well done, looks good. Just a few tips
- The card shadow has soft edges, you need to make hard.
- For a simple card like this, you don't have to use this many layers div's.
- You could have done something like this:
<body> <main> <img src="" alt=""> <button></button> <p></p> <h1></h1> <p></p> <footer> <img src="" alt=""> <p></p> </footer> </main> </body> or <body> <main> <section> <img src="" alt=""> </section> <section> <button></button> <p></p> <h1></h1> <p></p> </section> <footer> <img src="" alt=""> <p></p> </footer> </main> </body>- You don't have to add
width: 100%on the body, by default the width of the body is always 100%. - Set the height of the body to
min-height: 100vh;instead ofheight: 75vh;
I hope you find this helpful. Keep it up 👍👌
Marked as helpful0 - @Cesare94Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I managed to create it in a short time with CSS techniques.
What challenges did you encounter, and how did you overcome them?No particular difficulties. The only thing is the hover effect on the image. I only managed to color the edge
What specific areas of your project would you like help with?None in particular at the moment.
@hitmorecodePosted 3 months agoNice well done, looks good. Just a few tips
- To place the card in the center of the page add these rules:
body { max-width: 1440px; /* you don't have to add this */ background-color: hsl(217, 54%, 11%); /* add these rules */ min-height: 100vh; display: flex; justify-content: center; align-items: center; }- You forgot to add the hover effect on the card.
I hope you find this helpful. Keep it up👍👌
0 - @21A91A1246Submitted 3 months agoWhat specific areas of your project would you like help with?
help me how to create lines in between table (nutrition). alignments
@hitmorecodePosted 3 months agoNice well done, looks good. The font style does not match the on from the design file. Add the correct font family to your page, you can find it in the style-guide.md file.
To fix the border on the the table, add this:
.nutrition-table{ width: 100%; margin-top: 15px; font-size: 16px; color: #5a4634; /* add this to your CSS rule */ border-collapse: collapse; } td{ padding: 2px; /* add this to your CSS rule */ border-bottom: 1px solid black; }I hope you find this helpful. Keep it up 👍👌
0 - @VhiktrySubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
well, I am proud of my progress so far,
I would like to be faster next time when building the landing page
What challenges did you encounter, and how did you overcome them?The table was a challenge, overcame them using CSS grid at the end centering the element on the desktop page was also a challenge
What specific areas of your project would you like help with?The table and the centering
@hitmorecodePosted 3 months agoNice well done. To center make add these rules:
body { background-color: hsl(330, 100%, 98%); font-family: "Young Serif", serif; font-weight: 400; font-style: normal; /* add these rules */ min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } /* remove everything that's commented out */ #first { background-color: hsl(0, 0%, 100%); height: auto; width: 500px; padding: 20px; border-radius: 20px; /* remove this rule */ /*! margin: 60px 0px 60px 500px; */ } #second { background-color: hsl(30, 54%, 90%); /* height: 150px; */ /* width: 90%; */ padding: 20px; border-radius: 20px; } img { /* height: 50%; */ width: 100%; place-items: center; border-radius: 10px; }I hope you find this helpful Keep it up 👍👌
0 - @AbigirlMuchineripiSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of completing this card component project because it showcases my ability to write clean, organized code, solve problems, and design user-friendly interfaces. Each step taught me something new and brought me closer to mastering front-end development!
What challenges did you encounter, and how did you overcome them?At first I used border for the desktop buttons. They were not working well with the hover effect, then i changed to using the border element.
What specific areas of your project would you like help with?Your feedback is appreciated. I would like to hear what you think about the project. Corrections are welcome.
@hitmorecodePosted 3 months agoCongratulations well done. Looking through your markup up and this is how your markup should be.
<main> <section> <article> </article> </section> </main>This is the more logic structure. I hope you find this helpful. Keep it up👍👌
0 - @abdushskSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I have learned how to appy media query and make the code responsive, also a bit of flexbox nuances.
What challenges did you encounter, and how did you overcome them?Flexbox was acting a bit weird why i added padding to the child so after a lot of search applying flex-basis fixed it.
What specific areas of your project would you like help with?- I used vw for making the text responsive, was that correct.
@hitmorecodePosted 3 months agoNice well done. Just a few tips.
- Avoid using % for width or height of cards. When switching to mobile screen size the card shrinks before it grows again. This will not look good on an actual page.
- Avoid using % for border radius when you just want to round the corners.
- You don't have to use position to place the card in the center of the page. You can easily do this with flexbox. Just add a min-height of 100vh on the body and add flexbox on the body.
- There are no headers on your page.
I hope you find this helpful. Keep it up👍👌
0 - P@RuxCastilloSubmitted 3 months agoWhat specific areas of your project would you like help with?
Any constructive criticism or tips for improvement are welcome and appreciated.
@hitmorecodePosted 3 months agoNice well done looks good. Just a few tips
- When changing to mobile screen size the elements on the top section are not vertically aligned. To fix this add these css rules.
.purple { background: var(--gradient-1); width: 100%; padding: 1.5rem 45px 40px; color: #cac9ff; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; position: relative; /* add these lines */ display: flex; flex-direction: column; justify-content: center; align-items: center; }- Remove the border radius on the button.
- Add transition on the button to make the animation smoother.
I hope you find this helpful. Keep it up 👍👌
0 - @Otep02Submitted 3 months agoWhat challenges did you encounter, and how did you overcome them?
The difficulties of this challenge for me is how fit the image inside the box and make it responsive. But by making it as background, replacing and aligning of image becomes easy.
@hitmorecodePosted 3 months agoNice looks good. A few tips
- Don't set the image as background image. Both desktop and mobile version of the page use different images. In this case it's best to make use of the
pictureelement. Just search for "html picture element" and you'll have enough examples on how to use it. - You should do a re-search on semantic html and try to use this approach more when writing html.
I hope you find this helpful. Keep it up👌👍
Marked as helpful0 - Don't set the image as background image. Both desktop and mobile version of the page use different images. In this case it's best to make use of the
- @JosephOluOlofinteSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
It was fun building this
What challenges did you encounter, and how did you overcome them?None at all.
What specific areas of your project would you like help with?None
@hitmorecodePosted 3 months agoNice looks good. Just a few tips
- When writing CSS avoid adding things to the body that will be applicable to the entire page.
- If is
letter-spacing: 0you don't have to write this, by defaultletter-spacingis always 0. - Don't add
line-height: 150%on the body, this will apply to the entire page. Only use line height where is necessary. gap: 20on the body, why did you add it here? I don't see the point adding this to the body.- You added
line-height: 150%on the body and then repeated this in other places. Avoid repeating yourself. If you already added on the body, you don't need to add it elsewhere. If you want to use it on different places, just combined them into one.
/* for example you want to use line height on different elements */ h1, h2, p { line-height: 150%; } /* instead of doing this */ h1 { line-height: 150%; } h2 { line-height: 150%; } p { line-height: 150%; }- The same goes for
font-familyif you addfont-family: Figtree;on the body, you don't have to add it anywhere else. - The shadow that you created has a soft edge, make it harder. Remove the
2pxand it should be fine.
I hope you find this helpful. Keep it up👍👌
Marked as helpful0 - @JosephOluOlofinteSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
It was fun building this
What challenges did you encounter, and how did you overcome them?None at all.
What specific areas of your project would you like help with?None
@hitmorecodePosted 3 months agoNice looks really good. What's commented out, you can delete them. You don't need to add
letter-spacing: 0px;this is the default setting.body { background-color: hsl(47, 88%, 63%); display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; min-height: 100vh; /*! color: hsl(0, 0%, 7%); */ font-family: 'Figtree'; /*! line-height: 150%; */ /*! letter-spacing: 0px; */ }You don't have to repeat the border radius of the image inside the media query.
For next exercises try to build it by using semantic html.
0 - P@PetterTSaatvedtSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
The solution works for both desktop and all mobile screens, as intended, and looks near perfect compared to the provided design, which is great :)
I found myself to go back and restructure some of the HTML to make the transition from desktop to mobile more effective. Perhaps it would be smart to adopt a mobile-first approach next time.
What challenges did you encounter, and how did you overcome them?I used some time on figuring out how to implement the styling on the various lists in the solution, however after some research I solved it through overriding some styles for certain child elements!
What specific areas of your project would you like help with?I find spacing to be an area of styling where I spend a lot of time trying to perfect it based on the provided design (keep in mind I have no PRO subscription). I often use padding, sometimes margin, and try to make these scalable in scenarios I find it to be necessary. Would love some tips on how to simplify the spacing approach!
@hitmorecodePosted 3 months agoNice well done. As to your question there is no better way to do it. What you did is just fine. The only thing you have to keep in mind is that when you space on the inside use
paddingand when you want space on the outside usemargin. You already done so, so it's good.1 - @JosephOluOlofinteSubmitted 3 months ago@hitmorecodePosted 3 months ago
Nice well done looks really good, but you forgot to make it responsive. Add some media queries to make the page responsive.
0
