Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
10

Konrad

@ExtendoGHPoland200 points

I am currently working in Digital Marketing, but I want to expand my skills into Frontend Development. That's why I plan to learn by working on practical projects available here. By combining my marketing knowledge with technical skills, I hope to work on comprehensive projects in the future.

I’m currently learning...

I'm starting with fundamental tools like HTML, CSS, and JavaScript. In the next stages of my learning journey, I aim to master React to build more advanced web applications.

Latest solutions

  • Newsletter using Grid, Flex, JS


    Konrad•200
    Submitted 3 months ago

    I would appreciate it if you could review the following aspects:

    • General functionality – Are all animations, transitions, and features working correctly?
    • Responsiveness – Does the layout adapt well to different screen sizes?
    • Code quality – Is the code clean, readable, and easy to navigate?

    2 comments
  • Article Preview


    Konrad•200
    Submitted 4 months ago

    I’d really appreciate any feedback, especially regarding the JavaScript code, since this was my first time writing it.


    1 comment
  • Meet Landing Page Using Grid


    Konrad•200
    Submitted 4 months ago

    Please check:

    • The responsiveness of the project,
    • The readability of the content,
    • Compliance with best web development practices.

    1 comment
  • Testimonial Grid


    Konrad•200
    Submitted 5 months ago
    • Please check if using <figure> and <figcaption> elements in this context makes sense. Are they appropriate for the given structure, or could they be replaced with other tags?

    Overall code readability and project responsiveness:

    • I want to ensure the code is clean, and the project works smoothly across all devices.

    1 comment
  • Four Cards


    Konrad•200
    Submitted 6 months ago
    • Responsiveness of the project – I care about the page functioning correctly on various devices, from phones to desktops. Please check if all elements scale properly and maintain an aesthetic look across different resolutions.
    • Correctness of the grid implementation and potential optimizations – please verify if the grid was implemented according to best practices and if there are any opportunities to improve its performance, both in terms of code and layout structure.
    • Correctness of class naming with BEM methodology – please assess whether the classes have been correctly named according to BEM principles, which ensures better code organization and facilitates further development.

    1 comment
  • Product Preview Card Using FlexBox


    Konrad•200
    Submitted 6 months ago

    Please check:

    1. Have I correctly set up the images in the project to meet the project requirements?

    2. Overall readability and clarity of the code.

    3. Responsiveness: Is the page fully responsive?


    1 comment
View more solutions

Latest comments

  • Lavenzo•280
    @Lavenzo
    Submitted 3 months ago

    VS Code

    1
    Konrad•200
    @ExtendoGH
    Posted 3 months ago

    Project Responsiveness and CSS Recommendations

    The current project is not responsive — it displays correctly only on desktop devices. To ensure better adaptability across various screen sizes, it is recommended to add additional breakpoints, for example:

    • 768px — for tablet devices
    • 365px — for mobile devices

    Suggested Improvements

    • Add media queries (@media) to apply specific styles for different screen sizes.
    • Use CSS variables, such as:
      • --primary-color
      • --text-color

    This will make color management easier and more maintainable, especially when working on larger or themable projects.

  • P
    John McNichol•210
    @inappdesign
    Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    This is the first time I've used SVGs.

    Article preview component

    2
    Konrad•200
    @ExtendoGH
    Posted 4 months ago

    Great job – the design closely matches the original. The only noticeable difference is the slightly varied spacing between text elements.

    The project is fully responsive, and the button functions correctly across all screen resolutions.

    The code is clean and well-structured. I appreciate the use of variables, which will make it easier to scale and adjust the layout in the future.

    The popup animation is also a nice touch – it adds a sense of motion and enhances the overall user experience.

    Marked as helpful
  • P
    socratesioa•750
    @socratesioa
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I tried to get it as close to the design file as possible. I will definitely try it again and I will focus on getting the code more clean.

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

    The hero section was a bit challenging.

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

    I am interested how others approached the hero section design and what breakpoints they used.

    Meet Landing Page

    1
    Konrad•200
    @ExtendoGH
    Posted 4 months ago

    Looking at the screenshot, the hero section appears to be implemented incorrectly, which may suggest display issues. However, upon visiting the website, everything looks correct. To ensure consistency, I suggest generating a new screenshot to confirm that the section is displayed properly.

    It is also important to address the responsiveness of the project, as currently, the website looks good only on desktop. I used the following breakpoints to adapt the design to different screen resolutions:

    • Desktop: 1440px
    • Tablet: 768px
    • Mobile: 375px

    I started designing with a Mobile First approach, which allowed me to focus on delivering the best possible user experience for mobile devices before expanding the design to larger screens.

    Alt Text – Writing longer and more descriptive alt attributes for images will improve accessibility and make the website easier to use for people with disabilities.

    SEO Improvements – Adding meta tags such as meta description and meta keywords in the <head> section can improve the website’s visibility in search results, helping to boost its ranking in search engines.

  • P
    Antônio Alves Cataldo•240
    @TonyzCataldo
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud because I was able to work with CSS Grid more easily than in the last challenges. I also realized that I am able to better analyze the situation before starting to code and thus avoid problems in the process.

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

    I had a lot of difficulty making the edges of the photos without these edges interfering with the gap distances

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

    Any suggestion will be welcome

    Testimonial grid section challenge with flex-box and CSS Grid

    2
    Konrad•200
    @ExtendoGH
    Posted 5 months ago

    It looks almost identical to the concept version, great job!

    The project is fully responsive, as per the requirements.

    I recommend using shorthand notation for the padding and margin properties. Currently, each direction is written separately, but they can be written in shorthand, e.g., margin: 1px 1px 1px 1px, instead of:

    • margin-top: 1px
    • margin-right: 1px
    • margin-bottom: 1px
    • margin-left: 1px
  • Hery NyAina•130
    @Heriniaina-30
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I this one project, I am very proud to learning the grid It was a little diffuclt, but I did it

    Four cards Features

    2
    Konrad•200
    @ExtendoGH
    Posted 5 months ago

    Feedback on Your Work

    Design

    1. Top Margin – Your project is too close to the top edge of the screen. I recommend adding a larger top margin to improve readability and overall aesthetics.
    2. Card Animations – Using card animations is fine, but the current downward movement doesn’t look great. Consider an alternative effect, such as subtle scaling or a soft shadow.
    3. Fonts and Sizes – There are inconsistencies in the fonts and their sizes. To avoid mistakes, I recommend using Figma project files—this will help maintain visual consistency.
    4. Lack of Responsiveness – When the screen width is below 1100 px, the cards don’t scale properly and go off-screen. Improving this aspect will ensure the project looks good on different devices.

    Code

    1. Alt Text – Writing longer and more descriptive alt attributes for images will improve accessibility and make the website easier to use for people with disabilities.
    2. SEO Improvements – Adding meta tags such as meta description and meta keywords in the <head> section can improve the website’s visibility in search results.
    3. Responsiveness & CSS Units – To make the project fully responsive, it is recommended to use only rem units. While you mostly use them correctly, there are still some cases (e.g., padding and margins) where px values appear. Here’s an article explaining why rem is better: Fedmentor - Font Size & Units.
    4. Using CSS Variables for Colors – Defining colors as CSS variables will make it easier to manage the project’s color scheme and implement future changes efficiently.
    Marked as helpful
  • Juan Trujillo•180
    @jdtb4
    Submitted 6 months ago

    Product Preview Card Component using HTML and CSS Flexbox

    1
    Konrad•200
    @ExtendoGH
    Posted 6 months ago

    Design

    • Problem with Centering on Small Screens: The project is not centered on screen widths below 900px. It would be beneficial to add styles that ensure proper centering on smaller devices to maintain a visually balanced and responsive design.

    Code

    • Background Images vs HTML Images: You added images using background-image. While this works, it’s recommended to use images directly in the HTML with the <img> tag. This approach is more semantic, which improves the accessibility of your website. It also makes it easier to style and modify the images, and you can add important attributes like alt, which will improve accessibility for users with disabilities. Remember to use longer and more descriptive alt attributes for images, as this will help people who rely on screen readers.

    • SEO Improvements: Consider adding important meta tags like meta description and meta keywords in the <head> section of your HTML. These tags enhance the website’s SEO potential, making it more likely to appear higher in search engine results and improving the visibility of your website.

    Additional Notes

    • Overall Project Look: The project looks great overall! The design and structure are solid.

    • Use of Grid: Using CSS Grid is a good choice. It gives you flexibility and control over the layout, especially for complex designs.

    • Color Variables: Defining color variables is an excellent practice, especially for larger projects. It improves the maintainability and scalability of the project, as you can easily update colors without touching every style rule individually.

    • Global Reset: Including a global reset at the beginning of the file is another fantastic habit. It ensures consistency across different browsers by eliminating default styles that may vary.


    Keep up the good work! 😊

    Marked as helpful
View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub