Skip to content
OverviewSolutions
6
Comments
8
Gurbala Laurent
@laurentGurbala

All comments

  • Gurbala Laurent•110
    @laurentGurbala

    Well done ! i like your solution

    Marked as helpful
  • Poovarasan G•20
    @Poovarasang123
    What are you most proud of, and what would you do differently next time?

    I coded this project in my own thinking and it helps me to understand the problem very clearly and I resolve many errors and bugs by myself. The most interesting part is to apply style to the project using css. Also I learnt how to create a live link for my website by creating github repository and make it live.

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

    The challenges I encountered is to apply responsive design to overcome that I have watched youtube tutorial videos and studied websites like geeks for geeks take to resolve the problem.

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

    I want to know where I need to use grid , flex boxes to effectively build websites. Also I need a road map to be a frontend developer.

    I used css style components to complete this task.

    1
    Gurbala Laurent•110
    @laurentGurbala

    Great job on your work!

    I noticed that you used an HTML table for the nutrition section. I would recommend trying CSS Grid instead. It will not only make it simpler to arrange the elements, but you’ll also have more control over the placement of the different cells. This way, you can achieve a better layout and make it more responsive and visually appealing.

    Regarding your question about when to use Flexbox or CSS Grid, here’s a little tip:

    If you have a layout that works on one dimension (either horizontally or vertically), Flexbox is usually the best choice. On the other hand, if you're working on a layout with two dimensions (both columns and rows), as you might have guessed, CSS Grid is the way to go!

    I hope these tips help, and once again, great job on what you've achieved so far!

  • MiloosN5•190
    @MiloosN5
    What are you most proud of, and what would you do differently next time?

    With every project I work on, I strive to create readable and well-organized code. In this particular project, I used Angular to break the code into components.

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

    The most challenging part is finding the right connection between elements to determine what should be created as a component and how that component should look. For example, it's not enough to create a button component based on a single instance. The goal is to create a shared structure that can be used for all, or multiple, buttons—while the content can vary.

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

    As mentioned before, I'm aiming to create the best relationships between elements. Additionally, I want to improve the organization of my SASS, such as writing more efficient mixins.

    Simple Omelette Recipe Page

    #angular#bem#sass/scss#typescript
    1
    Gurbala Laurent•110
    @laurentGurbala

    Well done !!

  • Gurbala Laurent•110
    @laurentGurbala

    Hi, congratulations on completing this challenge! It's a great achievement, and I wanted to share a few suggestions to help you improve even further in your learning journey :)

    HTML Structure:

    • Use of semantic tags: It's recommended to use semantic HTML tags (like <header>, <main>, <footer>, etc.) instead of generic tags like <div>. This improves accessibility and helps structure your content better for browsers and screen readers. Of course, you'll still use <div> tags when a block doesn't represent a specific semantic part of your site, but it's good to keep this in mind :)

    • Font management: Font files are often provided directly in the project. While Google Fonts is a convenient option (I used it myself at first), it's preferable to use the local font files included in the project. This makes your site more robust in case Google Fonts becomes unavailable.

    • CSS class names: To make your code more readable, try using more descriptive class names than "photos", "html", or "para". This will help you better understand your code, even after a few weeks. If you haven't already, I recommend checking out the BEM (Block, Element, Modifier) methodology, which is really helpful for naming classes in a clear and structured way.

    CSS:

    • Card positioning: I noticed you used position: absolute to center your card on the screen, but this causes issues on smaller screens. You can achieve the same result in a simpler and more responsive way using Flexbox, which will make your design more adaptable. For example, in your <body>, you can add these styles:
    display: flex; /* Flexbox for layout management */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
min-height: 100vh; /* Ensure the content takes up the full viewport height */

    This will allow you to easily center your content, regardless of screen size. If you haven't explored Flexbox yet, I highly recommend it — it will make your life much easier for layout management :)

    • Font-weight property: I noticed a small error in your use of font-weight. You used a value of 300%, but font-weight only accepts numbers without units (like font-weight: 300). You can spot this kind of issue easily with development tools (like Google Chrome's), where an exclamation point indicates a problem with the property.

    I hope these tips will be helpful and allow you to further improve your project. Keep up the great work, you're on the right path!

  • David Sibrian•350
    @armson45
    What are you most proud of, and what would you do differently next time?

    I think I could be proud cause I'm doing a better using of bem :D Either way I'd like some advice.

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

    I had to investigate about the :focus-visible pseudo-class because of the keyboard navigation.

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

    To improve the structure of HTML and better practices with CSS

    Social links profile

    #bem#accessibility
    1
    Gurbala Laurent•110
    @laurentGurbala

    Well done ! I like your HTML structure very much

  • Gurbala Laurent•110
    @laurentGurbala

    You forgot to apply a box-shadow to your map, something like: box-shadow: 8px 8px color; Be careful not to use too much generic tags and prefer HTML5 semantic tags as well. I hope this comment is useful to you. Good job and keep it up!

    Marked as helpful
  • Gurbala Laurent•110
    @laurentGurbala

    I like your solution, well done!

  • Gurbala Laurent•110
    @laurentGurbala

    Great job on your project! Regarding the HTML semantics, I think you could change the div tag that wraps your entire project to a main tag. As for the CSS, be careful with the minimal phone screen size, as your card shrinks too much. It might be better to keep the same dimensions regardless of the screen size. Overall, well done, it's a beautiful project!

    Marked as helpful