Skip to content
OverviewSolutions
10
Comments
8
Francisco
@antoniomontoia

All comments

  • Sergio Eduardo Castro Ceballos•300
    @SergioCasCebSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I like implementing small interaction like closing the social media links elements if the user click outside of the links container. Not necessarily something to be proud of, but I believe that small things like this can make the difference.

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

    My main time consuming task of this project was deciding how to structure the whole layout in HTML, so that later on when implementing the interactive social media links elements I would be easier. At the end I decided to make the links element a child of the user section, so that it would interact in relation to that specific part of the component.

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

    Nothing in specific, but feedback is always welcome. If you also utilized a simpler or more fun approach, I would love to hear about it. Seeing how other tackle the same challenge is always fun.

    Responsive Article Component with Scss and JS

    1
    Francisco•210
    @antoniomontoiaPosted 18 days ago

    Feedback Summary:

    Semantic HTML: Good use of semantic elements like <main>, <article>, and <footer>. Consider adding <section> for related content.

    Accessibility: Great use of aria-labels and keyboard accessibility. Ensure all interactive elements are focusable and have clear focus styles. Add more descriptive alt text for images.

    Responsive Layout: The layout is generally responsive, but the mobile/vertical version of the card is not, for that the image is overflowing. Removing max-height from img and setting a max-width for the card would do the trick.

    Code Structure: Well-structured and readable code.

    Overall, you nailed the hardest part with the JavaScript implementation—great job! In my case, using an icon would have saved me a lot of trouble, and I'm going to review my solution right away!

    Marked as helpful
    0
  • Sunay Dagar•120
    @suzzy-dszySubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?
    • Happy that I was able to utilize grid-template-areas for the first time to easily layout the content of my webpage.
    What challenges did you encounter, and how did you overcome them?
    • Understanding Grid area was a bit confusing at first, after searching online I managed to implement it appropriately.
    What specific areas of your project would you like help with?

    For those who review my code;

    • Is my HTML semantic good?
    • Are the BEM classes properly used and defined, if not, any modifications i should make next time to make writing my SCSS more streamlined. I felt like i repeated my self in a sense a few times.

    -Thank you in advance for checking my solution out. 💯

    Responsive Testimonials Section made using HTML5, CSS Grid & Flexbox

    1
    Francisco•210
    @antoniomontoiaPosted about 1 month ago

    Semantic HTML

    The solution effectively uses semantic HTML elements such as <article>, <blockquote>, and <h1>, which enhance the document's structure and improve SEO. The use of <main> and <footer> also contributes to a clear layout.

    Consider using <h2> or <h3> for user names instead of <h1>, as there are multiple testimonials on the page. This adjustment would maintain a proper heading hierarchy.

    Design Consistency

    The overall design aligns well with typical testimonial layouts, but the design is just a bit off; consider reviewing line-height and font-size to ensure they match the intended design. Limiting the overall width for the cards could enhance the visual appeal and readability. Ensure that the design matches any provided mockups or specifications from the challenge. Pay attention to spacing, font sizes, and color usage to ensure consistency.

    Additional Note on BEM Methodology

    I'm also struggling with the BEM methodology, so I cannot help you in that regard. However, I recommend reviewing the naming conventions to ensure they follow the BEM principles, which can improve the maintainability and clarity of your CSS.

    --

    Overall, this solution demonstrates a solid understanding of CSS Grid principles. The use of semantic elements, responsive design, and a clear structure are commendable. Keep up the great work!

    Marked as helpful
    1
  • MrLanter•220
    @MrLanterSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I managed to use CSS grid to create this layout, which was not easy for my first time.

    What specific areas of your project would you like help with?
    • Does the project look like the design?
    • Are the image files and fonts well optimized?
    • Is accessibility well used?

    Any other recommendation is welcome!

    Responsive Design with SCSS, Semantic HTML, and CSS Grid

    1
    Francisco•210
    @antoniomontoiaPosted about 1 month ago

    Yes, the project closely resembles the original design! However, I noticed a couple of areas for improvement:

    The <h1> and <h2> elements appear larger in the original design. While the design instructions do not specify whether the fonts should be fully responsive, it would be beneficial to ensure they match the intended sizes more closely.

    Additionally, you should have tested the design for responsiveness down to 320px width. By fixing the card width to 380px, the cards do not adapt well to smaller screen sizes, which affects overall responsiveness.

    Overall, accessibility is well considered, but there are a few areas for improvement:

    The header structure is not entirely correct; the <h1> should always come first, even if it does not visually appear to be the most important piece of information. It would also be helpful to provide more descriptive alt text for the image elements to enhance accessibility for users relying on screen readers.

    Marked as helpful
    0
  • Francisco•210
    @antoniomontoiaPosted about 1 month ago

    Semantic HTML: The solution could improve its use of semantic HTML. Consider wrapping the product details in a <section> tag to indicate that it is a self-contained piece of content. Using <main> for the main content area would also enhance the document structure.

    Accessibility: The alt attribute for the product image should be more descriptive.

    Responsive Design: The CSS includes a flexible layout, but media queries should be implemented to adjust styles for different screen sizes. For example, you could change the alignment of elements for mobile sizes to ensure a better user experience. The image is not currently responsive. Consider using the <picture> element to serve different image sizes based on the viewport, which allows for better optimization and loading times.

    Code Structure: The HTML and CSS are generally well-structured and readable. However, consider using more descriptive class names for better clarity: check out BEM (https://getbem.com/introduction).

    JS was not needed for the hover state. I recommend you to used a :hover pseudo-element to attain that effect.

    Design Precision: The solution differs considerably from the design specifications. It is crucial to read the style guide and match the colors provided with the solution. Being more precise with details, such as using styles like letter-spacing, would enhance the overall appearance.

    As the project instructions suggest, starting with the mobile design first can be helpful. This approach allows for a better understanding of how the layout should adapt to different screen sizes and ensures that the design is consistent from the beginning.

    Marked as helpful
    0
  • Francisco•210
    @antoniomontoiaPosted about 1 month ago

    Semantic HTML and Accessibility: The current implementation relies heavily on <div> elements, which lacks semantic meaning. To improve accessibility, consider using semantic HTML elements like <main>, <section>, and <header> to provide better context.

    Responsive Layout: The layout looks good across various screen sizes, and your use of Flexbox is commendable. This approach effectively contributes to the responsiveness of your design and aligns well with the original design.

    Code Structure and Readability: The code is generally well-structured and readable, but the excessive use of <div> elements can obscure the document structure. Aim to incorporate more semantic elements for clarity and maintainability, while also noting that your method of creating color styles in CSS is a great practice.

    Design Consistency: There are some discrepancies between your implementation and the original design, particularly in styling details. To improve consistency, keep the original design accessible while you work, and pay attention to padding, margin, line-height, and color to better match the intended look.

    Keep up the great work!

    0
  • Francisco•210
    @antoniomontoiaPosted about 2 months ago

    Presence of Semantic Elements:

    The HTML structure effectively uses semantic elements, such as <main>, <div>, and <ul>. The navigation tabs are implemented using a list (<ul> and <li>), which is semantically correct for navigation links.

    Accessibility Features

    The alt attribute for the profile image is well-defined, and the navigation links include aria-current and aria-disabled attributes. However, ensure that all interactive elements, such as buttons and links, have sufficient color contrast against their backgrounds to meet WCAG guidelines. For example, the contrast between the border color and background color of the buttons should be checked.

    Responsive Design

    The layout is responsive, utilizing Bootstrap’s grid system and utility classes effectively. The use of classes like vh-100 ensures that the content is centered and adapts well to different screen sizes.

    Improvements: While the layout looks good on the first breakpoint size, the upper tabs keep their size when downscaling. Consider adding more specific media queries if needed to fine-tune the layout for smaller screens.

    Code Structure: The HTML and CSS are well-structured, with a clear hierarchy and organization. The use of Bootstrap classes goes beyond the scope of the project but proves to be quite helpful in this case.

    Readability and Reusability

    The code is readable and reusable. The use of Bootstrap classes makes it easy to understand the layout and styling at a glance.

    Design Alignment

    The solution does not closely resemble the intended design. While creativity is valuable, the primary goal is to align with the target design as outlined in the style guide. Thoroughly read the style guide before starting a next project, and I reccomend you to keep personal creative projects distinct from frontmentor assignments.

    0
  • Francisco•210
    @antoniomontoiaPosted about 2 months ago

    Hey Elzehiri!

    You achieved the objectives for the most part, great job! I like how you added a navbar and tried to go the extra mile.

    However, there are a few adjustments to be made. Regarding your HTML code, you are missing a few elements:

    The <header> tag is missing a closing angle bracket (>). It should be <header>. Consider wrapping the <nav> element inside the <header> tag for better semantic structure.

    Ensure that the alt attributes for images are descriptive. For example, instead of just "card," you might use something like "Illustration of a learning card" for the main image.

    The <h4> tag for should ideally be a <h1> or <h2> depending on the hierarchy of your headings. You also put a <h5> before a <h4>, which should ideally be the opposite.

    I recommend taking a bit more time to thoroughly review the challenge requirements, style guide, and design files: the Figma file can prove itself quite useful.

    It looks like there were some discrepancies with the font requirements, including font-weight, font-color, and font-size, and I also I noticed that responsiveness was not implemented in the design. The hover state for interactive elements is currently missing.

    While you included a <nav> element and Bootstrap, these were not required for this challenge. It might be beneficial to focus on the core requirements first before adding additional features.

    0
  • Francisco•210
    @antoniomontoiaPosted about 2 months ago

    While the code is overall well-structured (congrats!), I identified a few areas that could be improved:

    CSS Overlap: There is some overlap between CSS styles defined within the HTML file and those in the separate .css file. It would be beneficial to consolidate styles to maintain consistency and avoid redundancy.

    Heading Structure: The <h2> tag is used without a proper justification, as there is no <h1> present.

    Responsive Design: The layout exceeds 320px in width (352px), which may not be suitable for some phone screens. You should consider reducing the image size so that the whole card doesn't exceed that width with padding.

    Design Consistency: The solution differs slightly from the original design due to the omission of line height.

    Except for these minor details, I think you aced it!

    0