Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
17
Comments
13
Caio Azevedo
@justCaioDev

All comments

  • Kelechi Ogbonna•20
    @Kellswork
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I made good progress by incorporating unfamiliar HTML elements to improve accessibility and my knowledge of semantic HTML. I also considered how I wanted users to interact with the UI, using that as a guide to test the app for tab accessibility.

    Accessible Product preview card component

    #accessibility
    3
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    Nice work!

    I liked your semantic HTML 👌

  • moonji-spoonji•280
    @moonji-spoonji
    Submitted 10 months ago
    What challenges did you encounter, and how did you overcome them?

    I encountered the annoying challenge of styling the numeric list lol, I tried using media queries to fix the changing screen sizes greater than 1440px but it didn't work out well smh.

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

    I'd like help with the styling and positioning of the numbered list. :)

    Recipe Page Challenge (moonji)

    1
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    Very good! You can use te pseudo-element in css :maker to style the numbers in the list. Example: ol > li:marker {color: red};

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

    I just started html, css and I was proud I was able to get most of the project down. I am learning more by the day, and I will like to deploy more projects

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

    I need help on making it mobile, centering, and moving the elements because I use margin and padding but I know their is a different way.

    Social Links Solution

    2
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    It was very good, congratulations! Here are some tips: 1- To reset CSS, you can use box-sizing: border-box. This makes things much easier.

    2- It’s not recommended to use a fixed width or height on the body. Instead, you can use width: 100% and height: 100vh. This helps with the responsiveness of your site.

    3- Instead of trying to center elements using margin or padding, you can apply display: flex to the body, and then with align-items: center and justify-content: center, it will automatically center everything. This also helps with responsiveness.

    Remember, whenever you need to align or center elements, always prioritize using display: flex.

    To make a site mobile-friendly, you can search on YouTube for "Media query css." It's really easy to understand, and it will change your life once you learn it. Good luck with your studies!

    Marked as helpful
  • Luciene Lima•80
    @lucienelima8
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    Me orgulho do bom trabalho que fiz.

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

    Desafio de posicionar a imagem no centro da tela.

    QR code component (usando html e css, responsivo) - Trilha 3

    2
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    Ficou muito bom, parabéns! Só tome cuidado com a tag <span>, ela não é uma tag semântica, ou seja, não possui um significado para os mecanismos de buscas que ranqueiam os sites (SEO). O correto ali seria utilizar uma tag <p>, que semanticamente informa que ali tem um paragrafo com informações importantes...

    Você pode usar a tag <span> quando precisa estilizar alguma parte especifica dentro de um paragrafo ou título. Por exemplo: Um paragrafo com uma palavra em destaque com uma cor diferente do resto do texto.

    Espero ter ajudado minimamente. De resto, ficou muito bom! 👍 Parabéns!

    Marked as helpful
  • Fran•55
    @FranciscoMi
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I finally understood how media queries work to make a responsive design. Next time I will try flexbox and grid.

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

    The most difficult challenge has been to get the image to come out of its edges. It's very easy with media queries when you understand how they are used.

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

    Would it be possible to get the responsive design and switch from desktop to mobile without using media queries? I would appreciate any feedback. Thanks

    Responsive Recipe page main with media queries

    #bem#pure-css
    2
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    Great work! 👍

    Just be careful with the font weight. Try learning about display flex. It helps a lot with responsiveness and your life will change after learning. Afterwards, I also recommend learning about display grid.

  • Daniel king•510
    @thedanielking
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of being able to come up with the "aspect-ratio" to make a circle. And also understood the linear-gradient very well.

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

    I had the problems of creating a cirlce and background-gradient.

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

    IN the aspect of background-gradient.

    Result-Summary-component

    2
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    Nice job! 👍

    When you use linear-gradient you can set a direction of this gradient. example: background-image: linear-gradient(to top, var(--secondary-gradient-bg), var(--primary-gradient-bg));

    You can use deg too ex.: 45deg or 180deg

    Marked as helpful
  • Achraf Karkaih•330
    @A-karkaih
    Submitted 10 months ago
    What specific areas of your project would you like help with?

    Your opinion and recommendations are always welcome and greatly appreciated.

    Recipe-page ReactJs/TailwindCss

    1
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    It's really nice your react aplication! 👍

    You can use :marker in tailwind or css to style the list marker to make it more similar to the proposed design.

    But it's very good, congratulations!

    Marked as helpful
  • DevBytes-J•60
    @DevBytes-J
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    That i was finally able to complete this after many trials and failure Try to be calm and not tensed

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

    The first issue i had was the responsiveness on the mobile part .... it took me a while buh i was finally able to resolve it, i had to do some research Then i had another issue with the text alignment buh it didnt really take that much time handling like the responsiveness did

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

    Media Query

    Responsive landing page using media query

    1
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    Great job! 👍

  • JordyMC86•70
    @JordyMC86
    Submitted 10 months ago

    bootstrap

    #accessibility#bootstrap
    1
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    Nice job! 👌

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

    I further consolidated my knowledge of CSS and semantic HTML concepts.

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

    Overall, the biggest challenges were defining the correct sizes for the elements. Even with the design file in Figma, sometimes it feels like the content is turning out bigger than it should, and that throws me off a bit at times.

    Responsive card using html and css

    #accessibility
    1
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    It's really cool! 👌

  • Ramon-Alvez•500
    @Ramon-Alvez
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    The speed at which it was done

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

    No problem

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

    Nothing in particular, but I'm open to tips :D

    | HTML5 e CSS | #6 Newbie | QR code component

    1
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    It's amazing!

    Marked as helpful
  • Ralph-arch4•10
    @Ralph-arch4
    Submitted 10 months ago

    Responsive Recipe Page with CSS

    2
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    It's really great your solution! Congratulations!

    • About the change color of the numbers or symbol of an list. I used the pseudo-element "::marker" in the css. For example, "ol > li::marker { color: #f2f2f2; }". Using this pseudo-element you can style the numbers or symbols of an list item.
    • Now about the nutrition align. I used display flex, I placed each line inside a div, then I used display flex on that div and within the texts of each line I added "flex: 1;". This makes each element within the div occupy all available space, so they automatically align.

    Sorry, my english is not perfect, but I hope I helped u.

  • O Grande Soldador•320
    @brendowe
    Submitted 10 months ago

    I've never been so excited doing a project before :)

    1
    Caio Azevedo•300
    @justCaioDev
    Posted 10 months ago

    Muito massa! Apenas uma dica. Cuidado ao usar uma width fixa no form... Seus inputs acabaram quebrando pra fora dele. Recomendo utilizar o max-width ou min-width nesses casos, pois ajuda muito na responsividade da página e na experiência do úsuario. Afinal, cada um tem uma tela de tamanho diferente e é muito agradável quando o site se ajusta ao seu monito/celular. Mas ficou muito fera! Parabéns.

Frontend Mentor logo

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

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