Skip to content
OverviewSolutions
10
Comments
12
P

Odiesta Shandikarona

@OdiestaDenpasar, Indonesia300 points

I'm an aspiring web developer from indonesia. I am currently studying information systems at the Universitas Terbuka

I’m currently learning...

I currently learning react, making UI, making web project. my goal is to become fullstack web developer in RILT stack

Latest solutions

View more solutions

Latest comments

  • Milena•10
    @LenaMilena
    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

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

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

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

    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
  • P
    Odiesta Shandikarona•300
    @Odiesta

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

    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

View more comments