Skip to content
OverviewSolutions
7
Comments
7
P
Zxjklp
@Zxjklp

All comments

  • Zxjklp•160
    @ZxjklpPosted 3 days ago

    Hi @Djamel1133,

    Great job on the project! I’d love to share my feedback.

    • Since your <link> includes font-display: swap, you don't need to repeat it in your CSS file.
    • Image elements do not have explicit width and height.
    <img class="card__image" src="assets/images/image-product-desktop.jpg" alt="parfum image">
    Marked as helpful
    0
  • Zxjklp•160
    @ZxjklpPosted 4 days ago

    Great work on this project! Here are a few suggestions:

    • You are importing many font weights and styles (e.g., Poppins has all weights). Limit it to only those weights you actually use (200, 400, 600) to improve performance.

    • The card styles (.card--1, .card--2, .card--3, .card--4) could be simplified using a shared class:

    .card {
  border-top: 6px solid var(--card-border-color);
}
.card--1 {
  --card-border-color: var(--Cyan);
}
.card--2 {
  --card-border-color: var(--Red);
}
/* ... */
    • Some repeated styles like text-align: center appear in multiple places. Consider grouping them.
    Marked as helpful
    1
  • Zxjklp•160
    @ZxjklpPosted 19 days ago

    Hello @danesp93, I noticed that there is a div container outside the body tag. Is this intentional, or could it be an oversight? Just wanted to check if the project is still in progress.

    0
  • Abesin Olabimpe•110
    @LapupehSubmitted about 1 month ago
    What specific areas of your project would you like help with?

    For the list of instructions, i could not get the texts to align and not go underneath my numbered points. I would have used: display: flex; align-items: flex-start; but my elements will misalign and the list heading for example (beat the eggs) will fall as a separate element and the flex i used will make the texts appear in a row form.

    If you look at my screenshot, you will see that my "instructions" part did not look same as the preview. Please I need help on it. Thank you!

    Recipe page

    1
    Zxjklp•160
    @ZxjklpPosted about 1 month ago

    Great job on completing the Recipe page challenge on Frontend Mentor!

    HTML

    • provide a brief description of the page content inside a <meta name="description" content="..."> tag, which is useful for search engines.
    • combine the two style tags where you import fonts
    • the image should have width and height attributes
    • the <h3> for "Preparation time" should be changed to an <h2> tag to maintain the correct heading order. This change ensures that the heading hierarchy is correct and improves the accessibility and SEO of the page.
    • remove commented-out code if it is not needed

    CSS

    • adjust your CSS to achieve the desired alignment
    .instructions-list li {
  counter-increment: custom-counter;
  color: var(--Stone-600);
  line-height: 1.5rem;
  margin-left: 2.8rem;
  position: relative;
}
.instructions-list {
  counter-reset: custom-counter;
  border-bottom: 1px solid var(--Stone-150);
  padding-bottom: 1rem;
  list-style: none;
  padding-left: 0;
}
.instructions-list li::before {
  content: counter(custom-counter) ".";
  font-weight: 600;
  color: var(--Brown-800);
  position: absolute;
  left: -2.3rem;
}
    • combine ul and ol styles
    Marked as helpful
    1
  • Zxjklp•160
    @ZxjklpPosted about 2 months ago

    Hello,

    Great job on your solution! With a few adjustments, you can make your solution even better.

    HTML

    • Your solution does not have <meta name="description"> element in head. It should provide a summary of a page's content that search engines include in search results. A unique meta description can increase your search traffic. <meta name="description" content="Put your description here.">

    • To improve the semantic structure of your HTML, you can wrap the main content of your page inside a <main> tag. The <main> tag is used to denote the main content of the document.

    • The alt attribute text for the image can be improved to provide more descriptive and meaningful information. The current alt text is "avatar-jessica", which is not very descriptive. A better alt text would describe the image in a way that is useful for users who rely on screen readers. For example: <img src="./assets/images/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall">

    • The image should have width and height attributes. These attributes specify the size of the image, helping the browser allocate space for it before it loads.

    • To enhance the code, consider removing the <br> tag and using CSS for spacing. This approach will make the HTML more semantic and the layout easier to maintain.

    • The links div can be improved. You can use an unordered list (<ul>) instead with list items (<li>) and put <a> tags inside list items to represent the list of links . This approach enhances the semantic meaning of the HTML and improves accessibility.

    CSS

    • Include a CSS Reset at the top of your css file or put reset code in a new file that you import in your html file.

    • Change height to min-height in body selector. Using min-height instead of height for the body element ensures that the body can expand to fit content that exceeds the viewport height.

    • Use max-width and min-width instead of fixed widths. It is a good practice for creating responsive designs. This allows the elements to adapt better to different screen sizes and orientations.

    • I think you could remove flex from .profile and use text-align: center instead and add more margin-bottom.

    • The border-radius in .profile img should be 50% and not 100%.

    • The font-size should always be in rem units. These units are relative to the root element's font size (<html>), making it easier to scale the entire layout by changing the root font size. This is particularly useful for responsive design.

    • To ensure best practices and consistency across different environments, the transition property should be placed in the base state (.link) of the element.

    0
  • Zxjklp•160
    @ZxjklpPosted 2 months ago

    Hi there! Great job on completing the challenge.

    I would add <meta> description tag to concisely summarize page content and set an explicit width and height on image elements to reduce layout shifts.

    1
  • Nguyễn Trung Kiên•40
    @zeuxi141Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I feel that my interface is quite complete and similar to the Figma design.

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

    At first, I had some difficulty reviewing old CSS knowledge, but it didn’t take too long for me to overcome it.

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

    I look forward to receiving feedback, evaluations, and suggestions on what I need to improve.

    Flexbox

    3
    Zxjklp•160
    @ZxjklpPosted 2 months ago

    Great job on completing the QR code component challenge on Frontend Mentor!

    Semantic HTML

    • Strengths: The code uses some semantic HTML elements like <head>, <body>, and <div>.
    • Improvements: Consider using more semantic elements such as <main> and <footer> to improve the structure and accessibility of the document. For example, the container div could be a <main> element.

    Accessibility

    • Strengths: The use of alt attribute for the image is good for accessibility.
    • Improvements:
      • The text inside the alt attribute must say where it leads.
      • Ensure that the text inside the div elements is accessible by using appropriate heading tags like <h1>, <h2>, etc., instead of <div>.
      • The attribution section could be wrapped in a <footer> element to better indicate its purpose.

    Layout and Responsiveness

    • Strengths: The use of Flexbox for layout is a good choice for creating a responsive design.
    • Improvements:
      • The width and height properties set in pixels could be converted to relative units like percentages or rem to make the layout more responsive.

    Code Structure, Readability, and Reusability

    • Strengths: The code is relatively well-structured and uses classes to apply styles.
    • Improvements:
    • Avoid inline styles within the style tag in the HTML. Instead, move the styles to an external CSS file for better maintainability.
      • Use lowercase for HTML tags and attributes to maintain consistency and readability (e.g., div instead of Div).

    Design Consistency

    • Strengths: The design seems to follow the challenge requirements.
    • Improvements:
      • Ensure that the design matches the provided design specifications in terms of spacing, font-family, and color.
    Marked as helpful
    1