Skip to content
OverviewSolutions
4
Comments
4
P
Coco
@cocoelizabeth

All comments

  • Nerea•80
    @nereahm
    What specific areas of your project would you like help with?

    No he sabido aplicar el espaciado entre los números de la lista

    Recepta con listas y tabla

    1
    P
    Coco•60
    @cocoelizabeth

    Hi! Great project. For your question about creating the space between the numbers and the list, here is how you could do it:

    1. Restructure your <li>s in the HTML by wrapping all of the text for each item in a <div>. For example:
    <li class="instructions__item">
<!-- wrap all of the text in a div here -->
  <div>
      <strong>Beat the eggs:</strong> 
      In a bowl, beat the eggs with a pinch of salt and pepper 
      until they are well mixed. You can add a tablespoon of         
      water or milk for a fluffier texture.
  </div>
</li>
    1. Use CSS Counters to create the numbers. Here are some changes you could make to your CSS:
    /* Instructions styles */

.instructions__list {
/* remove default styling */
  list-style: none;
  margin: 0px;
  padding: 0px;
  /* initialize counter */
  counter-reset: css-counter;
}

.instructions__item {
 /* set the li item to display flex */
  display: flex;
  width: 100%;
  /* increment counter on each li */
  counter-increment: css-counter;
}

.instructions__item::before {
  /* add the counter using the before psuedo class  */
  content: counter(css-counter) ".";
  /* style the counter */
  min-width: 40px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
  color: hsl(14, 45%, 36%);
  font-weight: bold;
  height: 100%;
}

/* remove your `.instructions__item::marker` class  */
  • P
    Coco•60
    @cocoelizabeth

    Hi Mohammed! Your solution shows you have a good grasp of CSS and HTML fundamentals. Specific strengths that stood out to me are:

    • The use of media queries to handle different screen sizes demonstrates a good understanding of responsive web design principles.
    • The use of CSS variables for color schemes is a best practice that makes it easier to maintain and modify the code.

    To elevate your solution, here are a few suggestions:

    1. Add descriptive alt attributes to all <img> tags to improve accessibility. For example:
    <img src="image/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall">
    1. To improve accessibility, instead of using div elements for the social links, you could use <a> tags, since screen readers can recognize <a> tags as links, which helps users understand they can be followed to more content.
    2. Your CSS could be a little more semantic to make it easier for another developer to understand. For example, changing --Green-body to something more descriptive and accurate, e.g. "--dark-background" or something more consistent with the style guide naming, e.g. `--grey-900, might be be more intuitive and reduce potential confusion.
    3. I'm not sure if this is intentional, but your solution differs considerably from the provided design in terms of spacing, padding, font family, and white color value. If your intention is to accurately replicate the design mockup, I recommend that you review the style guide a bit more thoroughly and possibly use tools to measure dimensions directly from the design mockup.

    Great job!

  • Long Mai•90
    @looonnng
    What are you most proud of, and what would you do differently next time?

    I think I followed the styles guide pretty close and got the hover effect right.

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

    I was struggling with the margin/padding of mobile layout. I wanted to write mobile first. However, the card component was giving me issues with overflowing image and that was a time sinker. Eventually, I just stuck with it and try to finish the rest of the code instead of tinkering prematurely.

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

    Any feedbacks or refactoring are welcome!

    Blog Card (HTML & CSS)

    1
    P
    Coco•60
    @cocoelizabeth

    Great job! To align more closely with the brief, you could add :focus, and :hover styling to the blog title to make it turn yellow, like you did with the active class. For example:

    .title {
  font-size: var(--fs-base-l);

  & a:active, a:hover, a:focus {
    color: var(--color-primary);
  }
}
  • P
    Coco•60
    @cocoelizabeth

    Hi Natentado! Your solution is great! Here are a few minor suggestions for improvement:

    1. Responsive Design: The layout adjusts well across different screen sizes, maintaining a central alignment and appropriate scaling of the QR code image. Consider adding media queries to adjust the padding or margins on smaller screens to utilize space more efficiently. (e.g., there would be no padding on the iPhone SE, which has a viewport width of 320px)

    2. Code Quality: The code is clean and well-structured. CSS properties are consistently ordered, which improves readability. To increase reusability, consider using CSS variables for colors and fonts.

    3. Design Fidelity: While the implementation is generally in line with the original design, there are a couple of deviations to note:

    • The original design includes a drop shadow around the qr-code-container component, which is not shown in your solution. Adding a CSS .drop-shadow or .box-shadow would enhance the visual depth and make it more similar to the original design.
    • The font rendering appears slightly different than in the design mockup, however, I don't think it affects the overall feel of the component.
    Marked as helpful