Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
12
P
Odiesta Shandikarona
@Odiesta

All comments

  • Milena•10
    @LenaMilena
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Hello! I am really proud of how my project turned out. I love the way the colors and layout come together.

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

    I'm still new to html and css, so I'll appreciate any advice on how to improve my skills. I want to learn more about responsive design, I’m especially interested in understanding how to use media queries, flexbox, and grid to make layouts adjust to different screen sizes.

    Recipe Page - HTML and CSS

    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 6 months ago

    Hi Lena Milena, great for completing the challenge. I want to give feedback which may improve your code.

    1. Use semantic main tag in recipe content and section tag for different section like ingredients, instructions
    2. Use css reset. it will make style across different browser same
    3. Use max-width instead of width, so it will resize responsively in small screen and stay with max-width in big screen
    4. Use css variable for color to make it easy to manage and change.
    5. You should set meta tag inside head into viewport to allow control over viewport. In vscode you could type ! and hit tab so it will add necessary code before starting
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    1. Use media queries to set different style in different breakpoint. for example
    @media (max-width: 600px) {
      .recipe-content {
        padding: 0;
        margin-top: 0;
      }
    }
    

    as for learning responsive design check this course from web.dev Learn Responsive Design

    Marked as helpful
  • Andy S•10
    @andylikesyarn
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?
    1. I'm proud of the amount of time I took to check back through the minutiae of details, which ordinarily I struggle with in terms of focus. I think I still missed some though.
    2. Overall the task wasn't too hard, but I think I organized it poorly. I think making a stock template for css files so I have at minimum a visual reminder of all the things I need to code.
    What challenges did you encounter, and how did you overcome them?

    There were a few tasks I didn't know how to perform, like coloring only the numbers in the ordered list. I researched other people's solutions to that and now understand the logic of it.

    I also hadn't used inline CSS before, but the <hr> element was a good opportunity to try it out.

    What specific areas of your project would you like help with?
    1. How can I make my code more efficient?
    2. Is there anything I missed?
    3. What kinds of interactivity can I build into a page like this? Open to a range of creative suggestions, I'm really just interested in small ways to make my pages more engaging without being distracting.

    Andy's Omelette Recipe

    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 6 months ago

    Hi Andy S. Great for completing the challenge. I want to give some improvement which may improve your code.

    1. You should add CSS reset. A CSS reset will ensure a consistent look and behavior across all web browser.

    1. Using fixed width in wrapper can prevent it to scale into smaller width on mobile. Use max-width to set the maximum width of an element. This will make sure the width does not go beyond specified max-width and it can be resized dynamically according to screen size.

    1. Set the html font-size to 62.5%. this will change the value of rem from 1rem equal to 16px into 1rem equal to 10px. making it easier to determine it's size

    1. set the hr style in css if it contain same style on few element
  • Matthew Sheldon•320
    @MatthewNgabirano
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I completed this recipe page which was my perfect design and wasn't hard to complete. I am looking forward to designing more challenges to further improve my skills.

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

    Some of the challenges I encountered included aligning the recipe image in the center and centering the elements of the table in the center. But I was able to complete the challenge bu the use of chatgpt.

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

    I would like help with the div layouts so that I can build projects that are of good quality.Feedback are welcomed.

    CSS AND HTML

    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 7 months ago

    Hi Matthew Sheldon, Great job on completing the challenge. The content aligned exactly in the center. Except in big desktop resolution the style looks broken. It probably caused by absolute position in container class and body. I have something that i want to mention, which might help improve your code:

    1. Flex don't need to have grid-template-columns property because it's not a grid.

    1. On products width it's better to use max-width set to some value in px, em, rem. so it can resize responsively on mobile and don't stretch too wide on big screen.

    1. Try setting the display in Nutrition section to grid and set 2 columns evenly
    Marked as helpful
  • Lyonixa•40
    @Lyonixa
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    This is my first coding exercise since I started learning HTML and CSS. In that context I'm most proud of having been able to code this challenge.

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

    A challenge I faced was ensuring element naming adhered to accessibility guidelines. Initially, I considered naming headings based on their visual size, such as H1 for "Simple Omelette Recipe," H3 for "Preparation time," and H2 for "Ingredients." However, this approach was not suitable for screen readers. Instead, I prioritized semantic order over size, assigning tags like H2 to maintain a logical hierarchy of information. For example, although "Preparation time" is visually smaller, it represents an essential section of the recipe, warranting an H2 tag.

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

    As a beginner, I welcome any feedback on areas for improvement or ways to approach things more effectively and concisely.

    Responsive recipe page

    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 7 months ago

    Hi Lyonixa, Congratulation on completing the recipe challenge. It looked good on big screen and phone. But the image looks too big on tablet and small laptop. I want to give quick fix to the problem. You could set max-width on section to 700px so the image only get as large as 700px based on section width. Next is to set body display to flex to make the section centered on viewport.

    body {
      font-family: "Outfit";
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    section {
      max-width: 700px;
    }
    

    Keep on improving👍

    Marked as helpful
  • Gyizmark•180
    @Gyizmark
    Submitted 8 months ago

    Responsive Recipt App

    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 7 months ago

    Hi Gyizmark, Congratulation by completing the challenge. I noticed that the content looks too big in big screen. i want to give way to fix it.

    1. Set the image width to 100% and display block to make it adjust 100% to parent size container.

    1. If you are using rem, set the font size in html selector to 62.5%. this will make sure 1 rem equal to 10px making it easier to calculate.

    1. set body display to flex, align-items: center, justify-content: center to make the children of body which is the main tag container centered in the body

    1. set the main style to at least 70rem. this will make sure the content not stretch too wide in desktop screen while it responsive in mobile screen.

    1. Do not use clamp in font-size as it will make the font size look too big in desktop version. instead use media query to set different font-size
    Marked as helpful
  • Opeyemi Eniola•410
    @Enisco29
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    using flexbox I was able to achieved the layout

    line-height was also helpful

    social-links using HTML and CSS

    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 7 months ago

    Hi Opeyemi Eniola, Good work on achieving result that looks same as the design file. I want to give few improvement.

    1. You could set the css reset on all element using the * selector
    2. Use CSS custom properties to set color variable for easier use and maintenance for example
    :root {
    	--white: hsl(0, 0%, 100%);;
    }
    
    1. On socials element instead of using div for social link use a tag to make it as link.

    I hope it helps

  • aigle•10
    @aigle-levant
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of making a website work properly in mobile as I'd struggle in it normally.

    I'd like to make it size properly in desktop as well.

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

    I had to deal with centering the card div. I looked up websites and blogs and checked out how they centered their divs. I then used inspect element to help me further.

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

    I need some help on sizing the card properly on desktops.

    Mobile-first QR code design

    #sass/scss#accessibility
    2
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 7 months ago

    Hi aigle, Great job on completing the challenge. the card are exactly centered in the viewport. i want to give some advice in html file.

    1. There are too much parent container. the image element has 3 parent inside .container class when 1 or none is actually enough. having too much parent container make it difficult to style the page. i recommend removing main tag, and .card-wrapper class so the image element and text element only has one parent element. after removing it you could move the style in .card-wrapper class to .container class.

    2. then inside .container class set the padding to 1 rem in all direction, and set horizontal margin to make it have some space in mobile version. change max-width from 90vw to 400px to make it not stretch too much when in desktop version.

    3. remove fixed max-width and max-height in image as it prevent the image to resize responsively then set the width to 100% so it fill the entire parent width

    4. remove media query as it seems not needed.

    here what i change on index.html file

    <body>
      <div class="container">
        <div class="image-holder">
          <img
            src="images/image-qr-code.png"
            class="image"
            alt="QR code in a blue background."
          />
        </div>
        <div class="card-content">
          <h1 class="large heading">
            Improve your front-end skills by building projects
          </h1>
          <p class="normal">
            Scan the QR code to visit Frontend Mentor and take your coding skills to
            the next level
          </p>
        </div>
      </div>
    </body>
    

    and this is what i change on style.css

    .container {
      background-color: hsl(0, 0%, 100%);
      border-radius: 3%;
      padding: 1rem;
      margin: 0 20px;
      max-width: 400px;
      max-height: none;
    }
    
    .image-holder .image {
      width: 100%;
      border-radius: 3%;
    }
    

    I hope it helps👍

    Marked as helpful
  • ANKUSH BHANJA•20
    @Ankush9800
    Submitted 7 months ago

    blog-preview-card

    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 7 months ago

    Hi ANKUSH BHANJA, congratulation for completing the challenge. the content is exactly centered on the viewport. i notice that when i see the website from mobile, the content overflow beyond visible page. As i go through the code i want to give several tips and solution

    1. Do not set fixed height and width. let the content determine container / box width and height. use max-width property to determine the maximum width the box can have
    2. use margin-top or margin-bottom instead of height to set space vertically between element
    3. in learning element, use display: inline-block so you can specify padding in the element and it will only occupy content space.
    4. set the width of .card-image container to 100% so it will apply full the width of parent container.
    5. use margin, and padding left and right on .box container to make some horizontal space when resized responsively
    6. Element inside .box container don't need to have fixed height and width as it will fit the parent container naturally

    I hope it helps👍

    Marked as helpful
  • HBhsjssjsjsjdj3658•270
    @HBhsjssjsjsjdj3658
    Submitted 7 months ago

    Blog Preview Card

    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 7 months ago

    Hi HBhsjssjsjsjdj3658, great job for going through challenge and make it look as identical as the design files. using css custom properties to create color variable make it easy to maintain, and setting the body height to 100vh make it easy to center the content using flex.

    I noticed that when seeing on mobile screen, the content of card overflow beyond visible page. as i scan through the code it caused by the width of image. to fix it i add width: 100% to the image style so it will fill the entire parent container. this will make the image size stay within parent width. after this change, media query is not needed as it still looks good on mobile and desktop version.

    .card img {
      border-radius: inherit;
      margin-bottom: 20px;
      display: block;
      width: 100%;
    }
    

    i hope it helps👍

  • Akira Chan•30
    @akiracodeninja
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of creating a responsive, fast-loading landing page and offers clear CTAs for better user engagement. The design is clean and optimized for both desktop and mobile devices. Next time, I’d focus on A/B testing key elements, adding interactive product previews, integrating user reviews for social proof, and improving accessibility for all users.

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

    he biggest challenge was the lack of a clear Figma design for the project. I had to develop the UI based on images and my own sense of design, which made it difficult to ensure consistency and align with the intended vision.

    To overcome this, I carefully analyzed the images for layout, colors, and structure, and translated them into a working frontend design. I relied on my experience and intuition to recreate elements that looked aesthetically pleasing and functional, while ensuring responsiveness across devices. Regular testing and iteration helped refine the design and ensure it met the project’s needs.

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

    As I developed the UI based on images and my own judgment, I’d like assistance in refining the design to ensure it aligns more closely with industry standards or best practices.

    QR Code using HTML, CSS

    2
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 7 months ago

    Hi Akira Chan, Great for completing the challenge. i want to give little improvement. instead of using px you can try using rem to make it more responsive and accessible. when using rem i recommend setting html tag font size to 62.5% to easily convert px to rem. 62.5% is equal to 10px so for example 16px is equal to 1.6rem.

    html {
      font-size: 62.5% // 10px
    }
    
    h1 {
      font-size: 2.1rem;
    }
    

    One thing that might be helpful is using CSS custom properties (like the var() function) to manage your colors. This can make them easier to remember and update. You could define these variables in the :root pseudo-class, for instance.

    :root {
      --white: hsl(0, 0%, 100%);
      --slate-300: hsl(212, 45%, 89%);
      --slate-500: hsl(216, 15%, 48%);
      --slate-900: hsl(218, 44%, 22%);
    }
    
    body {
      background-color: var(--white);
    }
    

    i hope it helps👍

    Marked as helpful
  • WebDoctor33•50
    @WebDoctor33
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I was most proud of how i was able to position everything into the small space i had to work with.

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

    I didn't really have any challenges with this one it was one of the easier ones for me.

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

    none

    Blog Card

    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted 7 months ago

    Congratulations on completing the challenge, WebDoctor33! I recommend avoiding fixed width and height for the box; instead, let the content dictate its size. To prevent overflow on mobile screens, switch from using width to max-width, which will keep the box within the specified limit. For centering the box, you have two options:

    centering the box by setting the position box to absolute

    .box {
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    }
    

    or by giving the body height to 100vh and using display flex to center

    body {
    	height: 100vh;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    

    i hope it helps!

  • M A•170
    @Mikkobelly
    Submitted over 2 years ago

    news-homepage-main

    #sass/scss
    1
    P
    Odiesta Shandikarona•300
    @Odiesta
    Posted over 2 years ago

    Hey Mikkobelly, Great progress after complete this challenge.

    I want to add suggestion on the layout. For better responsiveness try using CSS Grid on layout structure. For example:

    /* 10rem for navigation rows, 40rem for header and news, and 10rem for recommendation */
     grid-template-rows: [nav-start] 10rem [nav-end header-start news-start] 40rem [header-end news-end recom-start] 10rem [recom-end];
    /* 6 column divide evenly */
     grid-template-columns: repeat(6, [col-start] 1fr [col-end]);
    

    For the navigation section try using width: 0 and then width: 50% when opening menu in mobile screen. Set the position to absolute, top and right 0. then it will show from right.

    Also in navigation try creating a hidden class that contain display: none and use javascript to add and remove that class

    Marked as helpful

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

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