Skip to content
OverviewSolutions
8
Comments
8
Code-Me-Well
@Code-Me-Well

All comments

  • Code-Me-Well•150
    @Code-Me-WellPosted 2 months ago

    This looks amazing! But make sure to pay a little more attention to your code structure. Other than that, you could pass as a pro!

    0
  • P
    Petter Torst Saatvedt•180
    @PetterTSaatvedtSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Gaining more and more experience in creating responsive solutions it was interesting to test a combination of flexbox (mobile view) and grid (desktop). Although I feel more comfortable using flexbox, this task has sort of opened my eyes for how grid can be used in specific scenarios, which is cool! I'm happy with how the overall solution turned out, successfully replicating the provided design :)

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

    I would say the main challenge for this task was figuring out how to best handle the layout of the cards in the desktop design. At first, I wrapped the second and third cards within a div so that I could simply use flexbox and align the elements centrally (essentially: card > wrapperdiv > card). However, this kind of felt like doing a "work-around" of the real challenge, as I thought the cards should all be equally "free", i.e. having the same direct parents etc. Thus, I figured Grid to be a better option, allowing for specific placement, while not having to put two of the cards within a wrapper.

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

    Any feedback is welcome! I'm always looking to learn and understand different approaches to the given coding tasks :-)

    Responsive Card Section using HTML and CSS with both Grid and Flexbox

    1
    Code-Me-Well•150
    @Code-Me-WellPosted 4 months ago

    The page is really impressive; it looks well-thought-out and implemented. I like how you leverage both Grid and Flexbox in a single project. However, your repository needs a bit more attention. Design files and other unnecessary files shouldn't be pushed to the repository, so make sure to use a .gitignore file. Additionally, the README file should describe the process of building your project, so ensure you update it accordingly.

    1
  • Code-Me-Well•150
    @Code-Me-WellPosted 4 months ago

    Your project looks fantastic and is truly impressive. Great attention to detail and excellent coding! However, I noticed a few issues:

    • Font Loading Issue: Your fonts load after the page, likely because your CSS is blocking the render. This might happen if the fonts are defined in external stylesheets.
    • Mobile Layout Issue: Your mobile site has unnecessarily long vertical free space. Consider adjusting the viewport height to improve the layout.
    0
  • Edson Rodrigues•50
    @rodriguesedsonSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Styling the main "card", each section and the table.

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

    Add space at the left of first table cells without pushing the second column. Found the solution at stackoverflow and W3S.

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

    Maybe with semantic tags.

    Recipe main page project with HTML and CSS

    1
    Code-Me-Well•150
    @Code-Me-WellPosted 5 months ago

    Your solution stands out, man! Great work there. However,

    • your screenshot is cropped, which could potentially turn someone off at first glance unless they visit your page and see how amazing it really is. For the screenshot, you can use Edge or Chrome's DevTools to take a full-page screenshot without scrolling or cropping.

    Your code looks well-structured and semantic, but

    • I’m curious why you’ve included so many Node packages. Also, it seems like your file structure isn’t organized.
    • Try adding a .gitignore file and structuring your files more systematically.
    Marked as helpful
    1
  • Code-Me-Well•150
    @Code-Me-WellPosted 6 months ago

    The live page is very different from the screenshot. One important aspect of this project is to make your page appear on a single screen without requiring users to scroll up and down, but you missed that. Additionally, the page is too wide, which doesn't make it visually appealing.

    Marked as helpful
    0
  • Code-Me-Well•150
    @Code-Me-WellPosted 6 months ago

    You can find everything related to the design in the starter kits, like the style guide and other resources. It seems that your solution has some issues with colors, font sizes, and other aspects. Make sure to look it through.

    0
  • Code-Me-Well•150
    @Code-Me-WellPosted 6 months ago

    This doesn't look bad, but there are some obvious things you could improve, such as:

    1. The font size is inconsistent.
    2. The width and height of the page are not uniform.
    0
  • Guilherme•40
    @guilhermepatriarcaSubmitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Sintax html and css class

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

    Image overlay background and QR Code

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

    Sintax, improvements

    QR code Exercise

    1
    Code-Me-Well•150
    @Code-Me-WellPosted about 1 year ago

    As a beginner here, I can say you are kind of good, but there are some areas you need to work on. I think the main issue is that you don't thoroughly check out the style guide. For next time, you can take some cues from there, and that will do.

    Good job, buddy!

    Marked as helpful
    0