Skip to content
OverviewSolutions
17
Comments
542
hitmorecode
@hitmorecode

All comments

  • Jeronimo Palacios•170
    @giropa832Submitted about 3 hours ago
    What are you most proud of, and what would you do differently next time?

    This is my first project using a mobile-first approach. It resulted in a much simpler code due to once finished the mobile design, it just a matter of a few minutes adjusting it to bigger screens.

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

    Understanding how the tag works in HTML to serve different media to different screen sizes. With help from Claude and MDN documentation I was able to overcome the challenge.

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

    Is my CSS well-structured? Any resources to keep improving with mobile-first?

    Responsive Product preview card using Flex and Media Queries

    2
    hitmorecode•6,660
    @hitmorecodePosted about 1 hour ago

    Congratulations well done. I took a quick look at your CSS and I have a few suggestions.

    • When you have elements with classes or id's and whenever you want to target that element, you can just target that specific class or id.
    // here you want to target the element with the class price. You went three layers deep to target `.price`.
.card-content .price-container .price {
    font-size: 32px;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    color: var(--dark-cyan);
}

// you can do it like this instead.
.price {
    font-size: 32px;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    color: var(--dark-cyan);
}
    • DRY avoid repeating the same thing over and over. You have the "Montserrat" font on four different elements and you have repeated this four times. You can combine all four in one CSS rule.
    .card-content .category {
    font-size: 12px;
    color: var(--dark-grayish-blue);
    letter-spacing: 5px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.card-content p {
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    line-height: 23px;
    color: var(--dark-grayish-blue);
}

.card-content .price-container .discounted-price {
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: var(--dark-grayish-blue);
    text-decoration: line-through;
}

.card-content button {
    background-color: var(--dark-cyan);
    color: white;
    border: none;
    padding: 15px 0;
    border-radius: 10px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
    • Combine all these four into one.
    .category,
 p,
.discounted-price,
button {
    font-family: 'Montserrat', sans-serif;
}

    With this if you ever need to change the font-family on all four, you just need to do it in one place.

    • When you add fallback fonts, it's best to do it on the body. In this case the sans-serif should be on the body.

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

    Marked as helpful
    0
  • Cesare•80
    @Cesare94Submitted about 4 hours ago
    What are you most proud of, and what would you do differently next time?

    I think I managed to recreate the responsive side adequately. I used the CSS properties fairly well to make it similar to the prototype

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

    The responsive part put me to the test. I spent some time setting it up and I think it turned out well

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

    Make it the same as the prototype in every way. So, the css part of margins and sizes

    Four card

    2
    hitmorecode•6,660
    @hitmorecodePosted about 3 hours ago

    Well done. I took a look at your html and css and there's still some work to be done.

    • When you use a container, that container is meant to contain the content on the page. As it is right now the container is only holding the header of the page.
    • The html structure should look something like this;
      <body>
    <main>
      <section>
        // here you can add your text 
      </section>
      <section>
        // this area is for the cards 
         <div></div>
         <div></div>
         <div></div>
         <div></div>
      </section>
    </main>
  </body>
    • A page must have one <h1> tag.
    // this is what you have
<div class="container"> 
    <span>Reliable, efficient delivery</span>
    <br>
    <b>Powered by Technology</b>

    <p>
      Our Artificial Intelligence powered tools use millions of project data points 
      to ensure that your project is successful</p>
  </div>

// change it to this
  <div>
    <h1>Reliable, efficient delivery</h1>
    <h2>Powered by Technology</h2>
    <p>
      Our Artificial Intelligence powered tools use millions of project data points 
      to ensure that your project is successful</p>
  </div>
    • When using a h1 to h6 or a p tag, you don't need to add <br>. These elements are block elements, every one of these elements occupies it's own row.
    • Don't add font-family inside the CSS reset, place it in the body. This is what should be inside a simple CSS reset;
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
    • Don't add max-width on the body (unless it's necessary) in these case it's not necessary.
    • The border on top of the cards will not work. Add border radius on the cards and see what will happen.
    • When you have elements with classes or id's. You don't have to target them by using a parent element.
    // because you have the class supervisor, you don't need to use main.
.supervisor {
    border-top: 4px solid hsl(180, 62%, 55%);
    background-color: white;
    width: 400px;
    padding: 30px;
    grid-area: supervisor;
    margin: 130px 20px 150px 20px;
    box-shadow: black 5px 5px 5px -5px;

}
    • If you add position: relative; on (for example) supervisor card. You can do this to create the border on top.
    .supervisor::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 400px;
    background-color: hsl(180, 62%, 55%);
}

    Your html and CSS needs some work to be done. Give it another try and see if you can manage to fix it.

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

    0
  • hitmorecode•6,660
    @hitmorecodePosted about 9 hours ago

    🎉🎊 well done, looks good. Just one thing

    html{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

// the commented out lines can be removed, you already have those inside the html
body{
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    font-family: "Outfit";
    text-align: center;
    background-color: hsl(212, 45%, 89%);
}

    Keep it up 👍👌

    Marked as helpful
    0
  • hitmorecode•6,660
    @hitmorecodePosted about 9 hours ago

    Congratulations looks good. Just one tip

    • The content is not centered on the page. You can fix this by adding this on the body.
    body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */

  /* add these lines on the body */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

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

    0
  • ed•20
    @Barcode77Submitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    Im most proud of using my time adequately compared to my first project. With the new knowledge i had learnt, such as flexbox, creating the layout was actually fun

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

    in the challenge, i had some problem aligning the the text.however, I browser inspection tool to test the different layouts in real time.

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

    flexbox. as much as i have some knowledge, i'd like to cement it. eg. the best and most concise way to have done this project with flex.

    Responsive design with flexbox. custom variables.

    1
    hitmorecode•6,660
    @hitmorecodePosted about 11 hours ago

    Nice well done, your html structure looks good. Just a few pointers.

    • I see you add two <br> tags to create more space between the <h1> and <p> tag. Using br tags to achieve this is not good practice. If you want to create white space between elements, just use margin or padding with this you have a much better control in creating white spaces.
    • When setting the height of the body, make it a habit of using min-height instead of height.
    • By default the width of the body is already 100%, so you don't have to add width: 100vw on the body.
    • Inside .text h1 and .text p you have margin: 0; you don't need this, because you already set all margin to 0 in the CSS reset

    As a suggestion it's best to use rem over pixels for font size. This has to do with the fact that rem scale better than pixels. Just do a research on rem over pixels.

    The problem in converting pixels to rem is the calculation method. There is a simple way to convert pixels to rem without much of a calculation. This is how you can do it.

    // add this to the root
:root {
   font-size: 62.5%;
}

// add this to the body
body {
  font-size: 1.6rem;
}

    With this you have created a base 10 system. Now all you have to do is divide the number of pixels by 10 and you'll have the value of rem*. So font-size: 22px will be font-size: 2.2rem.

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

    0
  • hitmorecode•6,660
    @hitmorecodePosted about 22 hours ago

    Nice well done. There are a few things you can fix.

    • Why did you wrap a <p> inside a <span>? This is not good practice. It should be the other way around.
    • Why did you use position: relative; on the <h3> tag? This is not necessary.
    • Every card has it's on class, because every card has the same layout it's best to add a second class and style that class. Everything that's different add it to the other class. This will prevent you from repeating yourself a lot.
    // you could do something like this. everything that's the same you add under itm-1 and everything that's different under the second class
<div class="itm-1 cliffort"></div>
<div class="itm-1 walters"></div>
<div class="itm-1 whittle"></div>
<div class="itm-1 harmon"></div>
<div class="itm-1 abrams"></div>
    • I've noticed that you use float. Avoid using float, use flexbox or CSS grid instead.
    • Make it a habit adding CSS reset on your CSS file. Here is a simple example of a CSS reset
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
    • When you have a font that will be used on the entire page. It's best to add that font-family on the body. With this you don't have to repeat yourself over and over.
    body {
  font-family: "Barlow Semi Condensed";
}
    • Your media query also needs some work, you repeated yourself a lot. If there is no change in the properties you don't need to add them to the media query.

    This are just a few things. If you want you can have a look at what I did. Testimonials grid section

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

    Marked as helpful
    0
  • Rodel Advincula•10
    @brodel10Submitted 1 day ago
    What specific areas of your project would you like help with?

    I would like to know which part of my code I could improve on, including best practices and which other ways I could have done this. Please criticize every single part of my code and guide me in the right direction.

    Responsive QR code page using Flexbox

    2
    hitmorecode•6,660
    @hitmorecodePosted 1 day ago

    Nice well done looks good. Just a few pointers

    • It's best practice to add some kind of CSS reset, here is an example of a simple CSS reset
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    With this you don't have to add margin: 0; or padding: 0; anymore.

    • By default the body already has 100% width, so you don't need to add this.
    • As for the height of the body, it's best practice to user min-height instead of height.

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

    Marked as helpful
    0
  • Rafiza Hanif Rahd•50
    @raffee12Submitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    Any feedback will be appreciated.

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

    I am a newbie at learning web development. Recently I have learnt HTML, CSS. I think doing the mobile version was bit challenging. Overall , I enjoyed doing this project. And hope to do more in future.

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

    I want help in fixing the Background Color.

    Price Component using CSS Grid

    1
    hitmorecode•6,660
    @hitmorecodePosted 1 day ago

    Nice well done looks good. I don't understand what kind of help you need fixing the background color. It looks OK to me. Just a few thing that I want to point out.

    • On the body it's good practice to use min-height instead of just height.
    • Why are you using so many media queries? You can do all this with just one media query.

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

    0
  • Morrango•30
    @MoranggooSubmitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I like how i solved the problems, i probably would the site more responsive

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

    How to put the text next of image, and make it responsive

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

    How make it responsive

    Preview Card of perfum product

    2
    hitmorecode•6,660
    @hitmorecodePosted 1 day ago

    Nice looks good, well done. To make it responsive just add this to your CSS

    @media only screen and (max-width: 620px) {
  article {
    flex-direction: column;
  }
}

    This media query is not complete, you still need to fix somethings to make it look good. If you have any questions regarding this, let me know.

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

    Marked as helpful
    0
  • LouisVerch•50
    @LouisVerchSubmitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    Quite proud of the overall result but I should name my classes for a better readability of the code for external people

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

    I struggled with table as it was my first time I had to read the documentation

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

    The Young Serif feels a bit off. Let me know if there is an issue in my CSS file.

    Responsive landing page with FlexBox

    1
    hitmorecode•6,660
    @hitmorecodePosted 1 day ago

    Nice well done. The problem with the font family is because you made a typing error. It should be Young Serif and not Young-Serif

    header{
    font-family: "Young-Serif", "Times New Roman" , serif;
    font-weight: 400;
    font-size: 20px;
    color: hsl(24, 5%, 18%);
    font-style: normal;
    letter-spacing: -1px;    
}
    • Your page is not really responsive, when switching to small screen size there is an overflow.
    • Don't use max-width: 100%; on the body. By default the body already has a width of 100%.

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

    0
  • ama-lyn•50
    @ama-lynSubmitted 2 days ago
    What challenges did you encounter, and how did you overcome them?

    Lack of access to the design file for this project.

    In the previous two projects, we had the advantage of easily referencing the design file, which made it straightforward to check padding, margins, and other details for the elements.

    However, for this project, I didn't have that access, which made it more challenging to ensure accuracy.

    To overcome this, I used the paint tool to approximate the sizes and layouts as closely as possible.

    It allowed me to make reasonable estimates.

    I’m pretty content with the final result. :)

    Social Links Profile (Responsive)

    2
    hitmorecode•6,660
    @hitmorecodePosted 1 day ago

    Congratulations well done. I have a few pointers

    • The paint tool is the worst tool you can use for this. There are much better tools (for free). You should take a look at Penpot and Figma.
    • You should add transition on the links to make the hover animation smoother.

    I took a look at your CSS and there are somethings that you can fix.

    body {
  width: 100%; // you don't need this on the body, by default the body width is already 100%.
  height: 100vh; // change to min-height
  background-color: var(--color-grey-900);
  font-family: var(--font-family-base);
  color: var(--color-white);
  position: relative; // why are you using position relative on the body?
  display: flex;
  flex-direction: column;
}

    If you want to place the card in the center of the page, just use flexbox or grid to do it. In this case you don't need to use position.

    .card {
  width: 370px;
  position: absolute; // why using position?
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-grey-800);
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 24px;
  padding: 40px 36px 36px 36px;
  border-radius: 12px;
}

    When you have classes or ids you can target that specific class or id directly. You don't have to go through the parent element.

    // you can remove .personal-info and only use .location
.personal-info .location {
  color: var(--color-green);
  font-size: 12px;
}
.social-links .caption{
  font-size: 12px;
  
}

    As you can see above font-size: 12px is being used in two different places. You can combine this into one.

    .location,
.caption {
   font-size: 12px;
}

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

    0
  • hkaur108•100
    @hkaur108Submitted 2 days ago
    What specific areas of your project would you like help with?

    I am trying to add the active class so that I can show the selected button but it is not showing the required css. any feedback is welcomed.

    Interactive rating cart

    3
    hitmorecode•6,660
    @hitmorecodePosted 1 day ago

    I took a quick look at your javascript and css file. With javascript on click you are adding the class active but the class active does not exist in your CSS, therefore javascript. Another issue

    $('.btn').on('click', (e)=>{
    x=e.target.id;
    $('.btn').removeClass("active");
    $(this).addClass("active");
})

    With the same click you want to add and remove the class active at the same time. Instead of adding an removing, why not use toggle. With toggle you can turn on and off the class that you want to use.

    I hope you find this helpful Keep it up 👍👌

    0