Skip to content
OverviewSolutions
10
Comments
9
P
Bruna Gonçalves
@brunagoncalves

All comments

  • SaeedAbakah•110
    @SaeedAbakahSubmitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    Still a learning process and I'm proud that I have been able to attempt this project to the best of my abilities.

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

    Still exploring css grid and how to center grid items in a grid container and also make grid items responsive. I utilised websites like w3schools.com and stackoverflow.com to clear my doubts

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

    *Responsiveness *Grid layout

    responsive page using css flex and css grid

    1
    Bruna Gonçalves•180
    @brunagoncalvesPosted 1 day ago

    Hello everything is fine! Congratulations on the project.

    Your project is not showing on GitHub Pages.

    A suggestion:

    • In .image-container and .buttons, I would change justify-content: space-evenly; to justify-content: center;, so on larger screens, these items would not be spaced out.
    0
  • Michał•140
    @miedzygalaktycznygitSubmitted 7 days ago
    What are you most proud of, and what would you do differently next time?

    I manage to complete challenge with JS

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

    It was kinda hard to attach two different events to same button

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

    I don't have specific questions but mabey someone can find places where i can optimize my code

    Sass/Css reset/JS

    1
    Bruna Gonçalves•180
    @brunagoncalvesPosted 5 days ago

    Congratulations on the project, very good! Some adjustments I would make.

    • Remove the <link rel="scripts" href="/scripts.js"> tag, as it is incorrect. Leave only the tag to improve accessibility. The alt attribute describes the image to screen readers and search engines.

    • The content within main, I would add within an "article". <article> is ideal for content that can be reused or distributed independently, such as blog posts, articles, news, etc. It helps search engines understand the page content better.

    1
  • Bruna Gonçalves•180
    @brunagoncalvesPosted 11 days ago

    Congratulations on completing the project! It looks really nice. However, I would make one adjustment: change @media (min-width: 380px) to @media (min-width: 768px) to make it more accessible on mobile.

    0
  • Jesse Kroon•120
    @jesse-kroonSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    Got the project done way faster than initially thought.

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

    Struggled with getting the outer cards floating in the middle of the grid on higher screen sizes. Had to Google and do some calculating (taking into account the gap size). Didn't feel like the best solution, but it works :)

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

    Usage of CSS grid.

    Four card feature section

    1
    Bruna Gonçalves•180
    @brunagoncalvesPosted 13 days ago

    Congratulations on completing the challenge! Your code is well structured.

    Marked as helpful
    0
  • Paradox•160
    @TarestaSubmitted 14 days ago
    What are you most proud of, and what would you do differently next time?

    I am happy with the responsiveness. Although it is not perfect, but still I was able to learn about the responsive units and used them in my design. Next time I will improve on this.

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

    The media queries are still a bit challenging. There are many great resources out there that goes in great detail in explaning them. That was a big help.

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

    I will keep working on the responsive design. I had a bit of trouble in setting the margin around the main element. Curretly I am using clamp, is there a better way to do it?

    Responsive Product Preview Card

    1
    Bruna Gonçalves•180
    @brunagoncalvesPosted 14 days ago

    Your code is well-structured! Very good. However, I would make a few adjustments:

    • Remove the inline .attribution styling from the HTML and add it to the CSS file to keep the HTML cleaner and centralize all styles.

    • Apply a slight transition effect on the button for a smoother hover effect: transition: background-color 0.3s ease;.

    • Set --font-primary on the body and adjust it as needed.

    • Add a specific font style to the button.

    • Remove margin: 0 from the body and use a simple CSS reset instead, like * { margin: 0; padding: 0; box-sizing: border-box; }.

    • Add padding: 1rem; to the body, so the card doesn’t touch the screen edges on smaller viewports.

    Marked as helpful
    1
  • Bruna Gonçalves•180
    @brunagoncalvesPosted 14 days ago

    Hello! All good. Your code is well-structured and organized! Here are a few suggestions:

    • I would wrap the title and image in a <header> tag to follow semantic best practices.
    • I would remove "box-sizing: border-box;" from the main and place it in the reset instead.
    Marked as helpful
    0
  • Bruna Gonçalves•180
    @brunagoncalvesPosted 18 days ago

    I found your code to be well structured, it used good css practices. Excellent work.

    1
  • Hubertas•40
    @hubertasGeciauskasSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that this time it was easier to read from the Figma designs, which streamlined the development process.

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

    I'm looking for feedback on my CSS custom styles. Are they effectively set up for responsive design, or would it be better to implement a mobile-first approach? Any specific suggestions for improvement would be appreciated.

    Responsive blog post using HTML,CSS and tailwindcss

    1
    Bruna Gonçalves•180
    @brunagoncalvesPosted 20 days ago

    Hello everything is fine!

    Analyzing your CSS.

    • Adding a CSS reset is generally a good practice as it helps with consistency between browsers. Examples (https://meyerweb.com/eric/tools/css/reset/), (https://www.joshwcomeau.com/css/custom-css-reset/).
    • Define variables for colors.
    • Instead of setting fixed sizes for the .card's width and height (384px and 522px), use max-width and min-height to allow the element to fit better on different screens. This is especially useful for devices larger and smaller than the specified values.
    • Swap px for rem in fonts, using px can limit flexibility and responsiveness. It can change in other classes that have px as well.
    • Add a 1rem padding to the body, so that on smaller devices the card does not touch the edge of the screen.
    Marked as helpful
    1
  • Toba•190
    @tobaojoSubmitted 24 days ago
    What are you most proud of, and what would you do differently next time?

    This is my first post to frontend mentor. I have never done anything like this before. It was also my first time using SASS. I have used css before but I wanted to try something new.

    Not sure what I would do differently just yet.

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

    Getting setup with SASS. As I have never used it before I was a bit anxious of using something new and getting to grips with it. I pretty much bumbled my way around and watched a few videos on how to get started.

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

    Any insights on code quality and best practices. I never really get a chance to work with other developers, so everything I know / don't know is from my own experiences.

    QR Code for frontend mentor using sass and HTML

    1
    Bruna Gonçalves•180
    @brunagoncalvesPosted 24 days ago

    I found your code to be well structured, Sass when we learn how to use it is very good. I liked how you solved this challenge.

    0