Skip to content
OverviewSolutions
4
Comments
4
P

skhbabez

@skhbabez60 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

  • Recipe page using responsive design

    P
    skhbabez•60
    Submitted about 1 month ago

    Any Ideas on how to apporach spacings in lists around the bullet points and text alignment without using anything more complex than ::marker.

    .card :is(ul, ol) li {
  display: flex;
  gap: var(--space-4);
}

.card ul li {
  align-items: center;
}

.card ul li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--brown-800);
  flex-shrink: 0;
}

    Also, I can't figure out where the size difference is coming from between my preparation section nad the solution

    1 comment

  • Profile page using html and css

    P
    skhbabez•60
    Submitted about 1 month ago

    Mostly I would like more feedback regarding the layout, especially in regards to semantic elements.

    1 comment

  • Blog card using html and css

    P
    skhbabez•60
    Submitted about 2 months ago

    I'm especially unsure about the layout using semantic elements. I'm not sure if I used them correctly, such as using <article> for the card and <section> for the main content.

    1 comment

  • Starter QR Code Project using basic HTML and CSS

    P
    skhbabez•60
    Submitted about 2 months ago

    Overall, I think the structure works, but I'm not sure if I relied too heavily on Flexbox. I’d be interested to know if there are more efficient or cleaner layout options I could have used.

    1 comment

Latest comments

  • P
    skhbabez•60
    @skhbabez

    Important: I can not open your Github repository to check out the code from the link you provided. It gives me a 404 error. Are you sure this is the right repository and that it is public? The Page works though. I looked at your github and found this repository. I will base my review on this one since the page seems similiar to the one on your github pages page.

    HTML

    The structure is overall logical but is missing semantic elements. Your div with the class main should probably be a <main> element. It might be even more meaningful to further structure your card by wrapping it in an <article> tag, and grouping related content into individual <section> elements.

    Also, the <h4> heading should probably be a paragraph (<p>), since it doesn’t serve as a subheading. With headings, it’s important to maintain a hierarchical structure that reflects the semantic organization of your content. In this case, that line is descriptive text, not a heading.

    <main>
  <article>
    <img class="omelette" src="image-omelette.jpeg" alt="Simple omelette filled with cooked meat" />
    <h1>Simple Omelette Recipe</h1>
    <p>
      An easy and quick dish, perfect for any meal. This classic omelette
      combines beaten eggs cooked to perfection, optionally filled with your
      choice of cheese, vegetables, or meats.
    </p>
   ...
  </article>
</main>

    You also missed the alt-attribute on the image. This one should always be there for accessibility concerns. If the content is only decorative you can leave the alt attribute empty, but you should still include it. <strong> could be a useful element to use for targeting the bold elements of the instructions, like you did in the preparation

    CSS

    Overall solid base but you should try to look more into the design file or the figma files to get a better idea what is expected. In the figma files specifically, you can check most values, making it easier to style your solution. Now Some improvement ideas. For the colors on the lists bulletpoints you can use ::marker. This allows you to target them and set some properties here.

    .preparation-list li::marker {
  color: hsl(332, 51%, 32%);
}

    You should also think about a strategy for writing responsive code. Your desktop version looks fine, but you mostly ignored the mobile design. You already use Flexbox and max-width, which is a good start. There are a lot of ways to get the mobile design right, but media queries seem to be a good option for this project. this is a good resource to read up on the topic.

    This is just a rough idea of what this could look like with media queries. The base design would mirror the mobile design, and the styles specified here would relate to any additional properties necessary for the desktop version, like adding border radius.

    @media (min-width: 768px) {
  .card {
    border-radius: 24px;
  }
}
  • MargaritaAlex•60
    @MargaritaAlex
    What are you most proud of, and what would you do differently next time?

    I did it without the Figma document.

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

    I had trouble setting the right HTML so I can style it with CSS. I need to learn a bit more about attributes and how to use them. There is a lot to learn

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

    I still need help with everything :(

    Social-links-profile

    1
    P
    skhbabez•60
    @skhbabez

    This is a strong solution overall, and I don’t see any major issues. While some values—such as font sizes and paddings—are slightly off due to not referencing the Figma file, the result still looks good and functions well, so it’s not a concern.

    A few improvement ideas, though: in the designs, they reduced the padding of the card slightly on mobile. This can be accomplished with a media query or the clamp() function.

    .class {
    padding: 1rem;
}

@media (min-width: 768px) {
  .card {
    padding: 2rem;
  }

    You also missed out on using semantic elements, such as a <main> element for the page or an <article> for the card.

  • P
    skhbabez•60
    @skhbabez

    Great job, this is already really close to the intended design and looks good overall. You already seem to have good CSS and HTML fundamentals, so I won't go over the basics here. I don’t think it’s really necessary to fully copy the Figma file in detail, so I won't correct slight differences. If you want to have your design perfectly match, you can inspect the elements in the Figma file further to get the accurate values, like for the box shadow or the borders.

    A Few Improvement Ideas

    Responsive Design

    First of all, you seemed to have overlooked the mobile design, which requires different font sizes and widths. If you test your design in the browser (open dev tools and test it on different screens there), you’ll see it doesn’t look good on mobile—stretching outside of the screen and with font sizes not adjusting to smaller sizes.

    Maybe look into this course for responsive design especially media queries:
    Responsive Design - web.dev

    For this section, using the clamp() function might also be enough:
    CSS clamp() - MDN

    html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

.category h2 {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  color: #111111;
  font-weight: bold;
}

    Font Family

    The font family for this was supposed to be Figtree, which is provided through the asset folder in the template. You can import it using @font-face like this.:

    @font-face {
  font-family: "Figtree";
  src: url("assets/fonts/Figtree-VariableFont_wght.ttf");
  font-weight: 500 800;
  font-style: normal;
}

*,
*::before,
*::after {
  font-family: "Figtree", sans-serif;
}

    Semantic HTML

    Your structure mostly follows the Figma file’s layout, which is fine, but it does not follow semantic HTML practices for accessibility. For example, wrap your main content with a <main> tag or use <article> for individual cards.

    Semantic Html - web.dev

    Hover State for Heading

    You missed adding the hover states for the main heading. I think it was intended to be a link that changes color to yellow on hover.

    If you make it a link (<a>), you don’t need to manually set cursor: pointer. Otherwise, if you keep it as a heading, here’s how you can add a hover effect and change the cursor as well:

    .content h1:hover {
  color: #f4d04e;
  cursor: pointer;
}

    CSS Variables

    For future projects, consider setting up CSS variables and using var(). While not strictly necessary for small projects, it greatly improves readability and reusability when working with e.g. color values.

    :root {
  --yellow: #f4d04e;
}

body {
  background-color: var(--yellow);
}

    Child Selector >

    This is just something I noticed, but you use the direct child descendant selector > a lot. I mostly see people use a space to just select any descendant, no matter the nesting level, like I did in my examples. There is nothing wrong with doing it the way you did, but it's also mostly not necessary. This might actually break your designs sometimes when you add additional nesting levels through divs.

  • Ige Abdulmuiz kehinde•30
    @Maza4
    What are you most proud of, and what would you do differently next time?

    What I'm most proud of is my understanding of the use of responsiveness for different screen sizes (mobile, tablet, and desktop).

    I built for desktop first in this project, so what I'd do differently next time is build for mobile first.

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

    The challenges I encountered when doing this project are

    1. I was not able to center the container in the middle of the page, but I was able to figure it out. I checked one of my previous projects.
    What specific areas of your project would you like help with?

    I'd like help with the responsiveness (most importantly), if there are possible improvement i can make.

    qr-code component using HTML and CSS

    2
    P
    skhbabez•60
    @skhbabez

    Okay, I’ll try to give a review, but take it with a grain of salt since I’m still learning as well.

    I like it overall—you did a great job with the general design. Your code is well-structured, and I like that you used variables in the CSS.

    I also think it's more common to go mobile-first and use min-width for media queries because of that, so it’s great that you're planning to go for that approach in the future.

    Regarding responsiveness, I think in this specific project, it’s not really necessary to use media queries. According to the Figma file, the whole thing looks the same on every device and is always just centered horizontally and vertically. So, it probably would’ve been enough to use that alone—for example, by using a flex container with align-items. That way, you can easily center it vertically as well. You could also have used a fixed width to avoid unpredictable resizing, especially on desktops. I’m not entirely sure how well this approach would work, though, so feel free to experiment with it.

    The only thing you forgot is the box shadow for the card, as well as using semantic elements like <main>, instead of a <div> for your container.

    Overall, this looks pretty good. One piece of advice: If you’re unsure about how to style things exactly, you can extract a lot of info from the Figma files, like the exact pixel widths for paddings or shadows, by inspecting the elements.

    Marked as helpful