Skip to content
OverviewSolutions
7
Comments
7

Konrad

@ExtendoGHPoland140 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 26 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 1 month 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.

  • Submitted about 2 months ago

    Blog Preview Card

    • HTML
    • CSS
    1

    1. Dynamic Font Scaling Without Media Queries

    Is there a way to make font size adjust automatically based on screen size without using media queries?

    2. Code Quality Assessment

    Are the class names, comments, and overall readability of my code at a high level? What improvements can I make?

    3. Project Responsiveness

    Is the project adequately responsive and visually appealing on various devices?

View more solutions

Latest comments

  • P
    Antônio Alves Cataldo•120
    @TonyzCataldoSubmitted 27 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•140
    @ExtendoGHPosted 16 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•140
    @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•140
    @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 1 month 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•140
    @ExtendoGHPosted about 1 month 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•140
    @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
  • Konrad•140
    @ExtendoGHPosted about 2 months ago

    Feedback on Your Work

    Design

    1. Overall Size: The project looks good, but it is slightly smaller compared to the design specifications. According to the design, the container's width should be 384px, whereas you used 320px.

    2. Border Radius: The border radius on the container is a bit too small. It should be 20px.

    3. Spacing: The spacing between text elements is larger than in the design. Consider reducing the gaps for better alignment.

    Code

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

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

    3. 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.

    Additional Notes

    • The project looks great overall!
    • Flexbox Usage: It's awesome that you used flexbox for spacing between elements. Great choice!
    • Color Variables: Defining color variables is an excellent practice, especially for larger projects.
    • Global Reset: Including a global reset at the beginning of the file is another fantastic habit.

    Keep up the good work! 😊

    0
View more comments