Skip to content
OverviewSolutions
8
Comments
8

Konrad

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

  • Submitted about 3 hours ago

    Meet Landing Page Using Grid

    • HTML
    • CSS
    1

    Please check:

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

    Testimonial Grid

    • HTML
    • CSS
    1
    • 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.
  • Submitted about 1 month ago

    Four Cards

    • HTML
    • CSS
    1
    • 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.
  • Submitted about 1 month ago

    Product Preview Card Using FlexBox

    • HTML
    • CSS
    1

    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?

  • Submitted about 2 months ago

    Recipe Page Using Flexbox

    • HTML
    • CSS
    1

    Please Check:

    1. List Styling: Was it done correctly? Can it be done faster and more efficiently?
    2. Responsiveness: Is the page fully responsive?
    3. Overall Grammar, Readability, and Code Understanding: Is the code easy to understand and well-written?
  • Submitted about 2 months ago

    Social Link Profile

    • HTML
    • CSS
    1

    Please check:

    1. Is the project implemented according to best practices? – I would appreciate it if you could evaluate whether the project follows the latest techniques and industry standards. I want to be sure that the code is optimized and modern.

    2. Is it responsive? – It’s important to me that the site works properly across various devices and screen sizes. Please verify whether the project fully adapts to different screens, ensuring an optimal experience on desktops, tablets, and phones.

    3. Are there any areas that can be improved to make the code better and more readable? – I want the code to be as clean and easy to modify as possible for future updates. If you notice any areas for optimization or improvement, I would be grateful for suggestions that could enhance the quality of the code.

View more solutions

Latest comments

  • P
    socratesioa•150
    @socratesioaSubmitted 2 days 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•150
    @ExtendoGHPosted about 3 hours 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.

    0
  • P
    Antônio Alves Cataldo•120
    @TonyzCataldoSubmitted 30 days 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•150
    @ExtendoGHPosted 19 days 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
    1
  • Hery NyAina•130
    @Heriniaina-30Submitted about 1 month 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•150
    @ExtendoGHPosted about 1 month 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
    0
  • Konrad•150
    @ExtendoGHPosted about 1 month 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
    1
  • Emmanuel•60
    @EmmxzySubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    If you're asking about your recipe page project, here’s how you might reflect on it:

    What I’m Most Proud Of:
    • Pixel-perfect design: I matched the layout closely to the provided design.
    • Clean, semantic HTML: The structure is well-organized and accessible.
    • CSS styling & responsiveness: The page looks great on both mobile and desktop.
    • Typography & spacing: I carefully adjusted font sizes, margins, and paddings for a polished look.
    What I’d Do Differently Next Time:
    • Use CSS variables: It would make styling and maintaining the project easier.
    • Improve accessibility: Adding ARIA attributes for better screen reader support.
    • Optimize images: Use WebP format for better performance.
    • Consider animations: Subtle transitions could improve user experience.
    • Try a CSS framework: Experimenting with Tailwind or Bootstrap for faster styling.
    What challenges did you encounter, and how did you overcome them?

    Here’s a reflection on potential challenges you faced while building the recipe page project and how you overcame them:

    Challenges & How I Overcame Them

    1. Matching the Design Exactly

      • Challenge: Since the design was provided as a JPG, there were no exact values for font sizes, spacing, or colors.
      • Solution: I used browser developer tools to test different font sizes and margins until they closely matched the design.

    2. Responsive Layout

      • Challenge: Ensuring the page looked great on both mobile and desktop required careful media queries.
      • Solution: I used flexbox and CSS grid to create a flexible structure and tested the design across different screen sizes.

    3. Typography & Font Selection

      • Challenge: The design used a specific font style that needed to be imported correctly.
      • Solution: I included the necessary Google Fonts in the <head> and used font weights correctly to match the design.

    4. Spacing & Alignment

      • Challenge: Getting the right padding, margin, and line spacing to align properly.
      • Solution: I used a consistent spacing system and adjusted values in the browser for precision.

    5. Styling the “Preparation Time” Section

      • Challenge: The background of the “Preparation Time” section was different from the rest of the page.
      • Solution: I used a light purple background with border-radius and added padding to match the design.

    6. Deploying the Project

      • Challenge: Setting up a live preview for easier sharing.
      • Solution: I deployed the project on GitHub Pages / Vercel / Netlify for easy access.
    What specific areas of your project would you like help with?

    Here are some specific areas where you might need help:

    1. Design Accuracy – Does the final implementation match the provided design exactly? Any feedback on small inconsistencies?
    2. Responsive Behavior – Are there any issues when resizing the page? Does it look good on all screen sizes?
    3. Code Optimization – Are there better ways to structure the HTML & CSS for cleaner, more maintainable code?
    4. Accessibility (a11y) – Does the page follow good accessibility practices (e.g., proper semantic HTML, color contrast, and screen reader support)?
    5. Performance – Are there any optimizations to improve load times, such as reducing unnecessary styles or optimizing images?

    Omelette-Recipe-Page

    3
    Konrad•150
    @ExtendoGHPosted about 2 months ago

    Hey,

    1. Design Accuracy

    I noticed that the background color does not cover the entire body of the page, which results in a white strip at the bottom. However, it looks fine on the live version, so this might just be an issue with the screenshot. You may want to regenerate it.

    The spacing is slightly different from the design, but if you didn’t use the Figma project file directly, it still looks quite good.

    • The Preparation Time section is missing a list.
    • The table is positioned slightly differently compared to the design.

    2. Responsive Behavior

    The page is responsive, but you could remove unnecessary margins at smaller widths (e.g., below 410px) when the main heading starts breaking into two lines.

    3. Code

    • It’s a good practice to wrap each key container in a div to make positioning easier. You did this in the Preparation Time section, but it’s missing in other parts.
    • Move the stylesheet link to the end of the <head> section to avoid issues with font imports.
    • Global style reset: Adding a global CSS reset at the beginning of your stylesheet helps prevent unwanted default margins and paddings. Example:
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    Use rem units instead of px

    I recommend using rem units instead of px to make the project more responsive. You can set font-size: 62.5% on the html element so that 1rem equals 10px, making calculations easier.

    SEO Improvements

    Consider adding meta description and meta keywords in the <head> section to improve the website’s SEO performance.

    Marked as helpful
    0
  • Banele Innocent Mjayezi•50
    @DiPSAWCESubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of my workflow and effeciency in this project.

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

    I struggled to get the avatar image to the correct size, then i realised that i wasnt styling the actual image to be the right size i was only stylying the container.

    SOCIAL-LINKS-PROFILE

    1
    Konrad•150
    @ExtendoGHPosted about 2 months ago

    Project Objective

    The goal of the project is to faithfully replicate the design.

    I see that I used a different avatar and text, which is fine, but the styling is incorrect.

    1. The container should be centered both vertically and horizontally. I recommend using flexbox for this.

    2. The image should be circular. Use border-radius: 50% for this.

    3. There should be 5 social media links, but you have 4.

    4. The colors also differ slightly from the project.

    5. The design is not responsive. The links are too narrow at a width of 768px, and it also doesn’t look good at 475px.

    6. Alt Text: Writing longer and descriptive alt attributes for images would improve accessibility and make your website easier to use for people with disabilities.

    7. SEO Improvements: Consider adding tags like meta description and meta keywords in the <head> section to enhance the website's SEO potential.

    8. Responsive Design: To make the project fully responsive, it is recommended to use only rem units. Here's an article explaining why: Fedmentor - Font Size & Units. While you mostly use rem, there are instances (e.g., padding or margins) where px units appear.

    0
View more comments