Skip to content
OverviewSolutions
17
Comments
587

hitmorecode

@hitmorecode7,240 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Josh C•110
    @joshcesanaSubmitted 3 months ago
    What specific areas of your project would you like help with?

    Should I be hardcoding the widths?

    Responsive product preview card

    #astro#tailwind-css
    4
    hitmorecode•7,240
    @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 h2 to a p and keep the h1 as it is.
    • As for the price, change the 2nd span to <s></s>

    I hope you find this helpful. Keep it up 👍👌

    Marked as helpful
    1
  • Sabreen Essam•40
    @sabreen01Submitted 3 months ago
    What 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?

    .

    Resposive product card using Css grid

    1
    hitmorecode•7,240
    @hitmorecodePosted 3 months ago

    Nice well done. The size of the card is a bit of, but it looks nice. Just a few tips.

    • You should change h2 to h1 a web page must have one h1 tag.
    • You use br to break the header, you don't need to do that. You can remove the br tag.
    • Don't add font-family on the CSS reset. font-family should be added on the body.
    • You should change p for the price to <s></s>.
    • You should look into semantic html.

    I hope you find this helpful. Keep it up👍👌

    Marked as helpful
    0
  • Cosmin•210
    @cosminbordianuSubmitted 3 months ago
    What 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:

    1. Does * {margin:0; padding:0;} affect the web site's performance? If yes, what is an alternative for resetting browser default styles?
    2. 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.
    3. Why there are so many fonts in the project files? I only used the variable font for all elements.
    4. 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.)

    Blog card using Grid and Flexbox

    1
    hitmorecode•7,240
    @hitmorecodePosted 3 months ago

    Congratulations 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 helpful
    1
  • hitmorecode•7,240
    @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-width in the media query to the same size as the max-width on the picture element.

    I hope you find this helpful. Keep it up👍👌

    0
  • Abigirl Muchineripi•140
    @AbigirlMuchineripiSubmitted 3 months ago
    What 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?

    1. My button text is not responding to the color set to white.

    2. And this text (Your performance exceed 65% of the people conducting the test here!) in the desktop design is slightly bigger.

    Results Summary Card Component

    2
    hitmorecode•7,240
    @hitmorecodePosted 3 months ago

    Congratulations 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 be font-size: 3.2rem; and so on.

    I hope you find this helpful. Keep it up👍👌

    Marked as helpful
    0
  • hkaur108•310
    @hkaur108Submitted 3 months ago
    What specific areas of your project would you like help with?

    I have fixed semantics and bit of styling, any feedback is welcomed.

    Results summary component

    #semantic-ui#sass/scss
    1
    hitmorecode•7,240
    @hitmorecodePosted 3 months ago

    Congratulations 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 helpful
    0
View more comments