Skip to content
OverviewSolutions
31
Comments
8
P

Franci Melink

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

View more solutions

Latest comments

  • P
    Franci Melink•400
    @francimelink

    Hi @dzerdzul,

    Congratulations!

    I reviewed your work, and I don't see any issues. You did a great job on all the key points. You've used semantic HTML, the layout looks good across different screen sizes, and the code is well-written.

    Keep up the good work!

  • P
    Franci Melink•400
    @francimelink

    Hi Eric,

    I review your solution. Sady I couldnt get to the code.

    Semantic HTML: The solution does utilize semantic HTML, but some areas could benefit from additional tags like <article> or <section> for better structure.

    Accessibility: While accessible with appropriate text contrast and alt attributes, it violates the rule of having a single <h1> on the page. A solution would be splitting the content within <h1> into <span> elements for emphasis without using multiple <h1> tags.

    Responsiveness: The layout adapts well across various screen sizes, maintaining a clean structure.

    Code Quality: The code appears well-structured, though could be enhanced with reusable CSS classes and clearer comments.

    Design Accuracy: The implementation is fairly close to the original design with minor visual differences.

    Great work overall! Best of luck with future challenges.

    Franci

    Marked as helpful
  • P
    Franci Melink•400
    @francimelink

    Does the solution include semantic HTML?

    The solution does not include semantic HTML elements. Examples of semantic elements that could be used in this solution are main, section, and footer. Each semantic element precisely describes the purpose of the element (its role).

    Is it accessible, and what improvements could be made?

    Accessibility was checked using Lighthouse. It’s not bad, but as mentioned, the result could be improved by using semantic HTML elements. Semantic elements help the browser better understand the structure of the page, making it more accessible, for example, to visually impaired users.

    Does the layout look good on a range of screen sizes?

    I checked different device sizes using the "Developer Tools". One comment I might have is that when the design reaches (1440px) or perhaps even earlier at a certain device size, the card dimensions could be fixed with max-width and max-height. Otherwise, the card might stretch, which may not look the best.

    Is the code well-structured, readable, and reusable?

    I would recommend using semantic elements. This would make the code even more readable. Additionally, I would suggest trying to use CSS variables and reset CSS.

    Does the solution differ considerably from the design?

    As I mentioned, there seem to be deviations at higher resolutions above 1440px and between 600px and 1440px. I would also recommend trying to use relative size units.

  • P
    Nico•330
    @Nico243
    What are you most proud of, and what would you do differently next time?

    Redid the code with a css file for readability, worked on my margins and padding,

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

    Issue: The content was too close to the edges of the browser window. Added Padding to the Body: Solution: Added padding to the body to create some space around the content.

    Issue: The container content was too high up in the viewport.

    Adjusted Container Margin: Solution: Added a top margin to .container-m to push the content down.

    Text Center Alignment:

    Issue: Ensuring the text is centered within the container for better

    readability. Solution: Set the text-align property to center for the container.

    Added Margins to Text Elements:

    Issue: The heading and paragraph were too close to the image. Solution: Added top margins to the heading and paragraph to create space.

    Html

    1
    P
    Franci Melink•400
    @francimelink

    Hello Nico,

    To review your solution and describe what, in my opinion, could be improved, I will use the key points suggested by Frontend Mentor:

    Your solution uses semantic HTML elements, which is great.

    According to Lighthouse, the page is accessible, with the only issues being related to performance.

    I noticed some minor issues with the layout in mobile view. I suggest you check and deepen your knowledge of Flexbox to start, and maybe later explore using Grid layout.

    I would also organize the code differently to make it more readable and easier to maintain. Typically, CSS is separated into an external file and included in the HTML file. While this may not be an issue for smaller projects, it will be beneficial in the long run.

    There are some discrepancies regarding padding, margins, and typography. Apart from the previously mentioned issues in mobile view, everything else looks good.

    I also find it helpful to use Figma for tasks, where you can check sizes, dimensions, etc. It helps visualize these details better, although it doesn't train the eye as much.

    Great job on the task, and keep up the good work!

    Marked as helpful
  • P
    Franci Melink•400
    @francimelink

    Hi Dan,

    1. Semantic HTML: The solution includes the use of semantic HTML elements.

    2. Accessibility: The solution is accessible.

    3. Layout on Various Screen Sizes: The layout is responsive and adjusts well across different screen sizes.

    4. Code Structure, Readability, and Reusability: The code is well-structured and organized, making it easy to read and maintain.

    5. Design Consistency: The solution adheres closely to the original design specifications provided by Frontend Mentor. The layout, color scheme, and typography match the design, demonstrating attention to detail and fidelity to the project requirements.

    Good job

    Marked as helpful
  • P
    Micha Huhn•200
    @MichaHuhn
    What are you most proud of, and what would you do differently next time?

    I learned how to navigate through the Figma mockup.

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

    I implemented the typography design system like this to reuse the presets given in the style guide:

    %typography-text-preset-1 {
  font-family: 'Figtree', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;
}

    .blog-title {
  @extend %typography-text-preset-1;
}

    Do you think that's a good approach or is there a better one?

    I'm using so called "SCSS placeholders".

    Blog preview card using Vue

    #sass/scss#vue#accessibility
    2
    P
    Franci Melink•400
    @francimelink

    Although I don't have experience with Vue JS yet, I can only commend this solution. Regarding best practices, I cannot assess if everything is perfect. However, as far as the HTML code and styles are concerned, I can say, "Good job."

    The HTML is well-structured, the elements are semantic, and the class names for each element are clearly indicative of their purpose.

    According to the "Design comparison," it is pixel perfect. As for accessibility, everything is fine.

    This is definitely a good solution. It's an exemplary reference for me in many aspects.

    Best regards,

    Franci

    Marked as helpful
View more comments