Skip to content
OverviewSolutions
7
Comments
7
Konrad
@ExtendoGH

All 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 17 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
  • Konrad•140
    @ExtendoGHPosted about 2 months ago

    Hi,

    Here are my comments on your work:

    Design

    1. Background color: The current background color is incorrect. You should use the color #D5E1EF as specified in the design.
    2. Box alignment: The box is centered horizontally but should also be centered vertically.
    3. Font family: The project requires the Outfit font family. Additionally, font sizes, parameters such as line-height and letter-spacing, and font colors differ significantly from the design specifications.
    4. Image margin: The margin around the image is too large. It should be 16px according to the design.

    Code

    1. CSS organization: I recommend moving all CSS code to a separate file for easier style management and better code readability.
    2. Attribution section: This section should be removed as it is not part of the project design.
    3. Use of rem units: I suggest using rem units instead of px to make the project more responsive and easier to adjust across different devices. Here’s a useful article on the topic: Link to article. To simplify calculations, you can set font-size: 62.5% on the html element, making 1rem equal to 10px.
    4. Global reset: It’s a good idea to include a global style reset at the start of your CSS, for example: 
      * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    0