Skip to content
OverviewSolutions
59
Comments
3431
Daniel 🛸
@danielmrz-dev

All comments

  • Kauã_Almeida•100
    @Kaua-AlmeidaSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Gostei de ter concluído sem quase nenhum problema e em curto período de tempo, o que mostra minha evolução utilizando HTML e CSS. Não sei o que mudaria.

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

    Não sabia como colocar o efeito de hover no li e esse efeito funcionar na tag a dentro dele. Utilizei o método de aninhamento de tags no html, algo que eu nunca havia feito antes e funcionou.

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

    Gostaria de saber no que posso melhorar seguindo sobre a semântica do meu HTML e CSS.

    Perfil de links sociais criado com HTML e CSS Responsivo

    1
    Daniel 🛸•44,310
    @danielmrz-devPosted 3 months ago

    Fala Kauã!

    Seu projeto está excelente!

    Tenho uma sugestão:

    📌 Use <main> pro conteúdo principal ao invés de uma <div>.

    Tags como <div> e <span> são exemplos típicos de elementos HTML não-semânticos. Elas servem apenas como containers para o conteúdo, mas não indicam qual o tipo desse conteúdo e nem o papel que ele desempenha na página.

    Essa mudança de tag gera pouco ou nenhum impacto visual mas torna o seu código HTML mais semântico e melhora a otimização SEO e acessibilidade do projeto.

    Espero que ajude!

    Fora isso, ótimo trabalho!

    Marked as helpful
    0
  • Ihor Hozhenko•10
    @lugdockremSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I don't find anything particularly special in my code that I could be proud of.

    I would be delighted to study any colleague's code if they agreed to share it. It's quite likely that I'll adopt coding approaches in the future that I'm not currently aware of.

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

    I haven't quite figured out the variables like

    :root { --color-blue-600: #007bff; --color-slate-900: #1a202c; --color-slate-500: #64748b; --font-family: Outfit, sans-serif;

    But that's not a big problem for me. I just don't have enough time to figure it all out.

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

    Sorry, but it's difficult for me to give a specific answer to this question. I still don't fully understand the specifics of it all.

    Responsive landing page using HTML+CSS 2.1

    2
    Daniel 🛸•44,310
    @danielmrz-devPosted 3 months ago

    Hello there!

    Congrats on completing the challenge! ✅

    Your solution is really impressive!

    I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

    📌 First: Think about using <main> to wrap your main content instead of <div>.

    Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

    📌 Second: Consider employing <h1> to <h6> tags for headings rather than using <p>.

    The <p> tag is primarily intended for paragraphs. When it comes to headings, HTML offers us a range of heading tags: from <h1> to <h6>.

    Here's a quick guide on how to use them:

    • The <h1> to <h6> tags are used to define HTML headings.
    • <h1> is for the most important heading.
    • <h6> is for the least important heading.
    • Stick to just one <h1> per page – it should be the main title for the whole page.
    • And don't skip heading levels – start with <h1>, then use <h2>, and so on.

    It's more than just text size — it's about structuring your content effectively.

    These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

    Hope that's helpful!

    Keep up the great work!

    Marked as helpful
    1
  • Flávia Reis•650
    @flaviare1sSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    "I had completed the challenge using MySQL and NODE, but I couldn't deploy the backend. So, I redid it using Firebase."

    Todo app using React and Firebase

    1
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Excelente 👏🏽👏🏽👏🏽👏🏽

    1
  • Precious•30
    @IjechidiSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Am mostly proud of how i was able to succeed in mirroring the project

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

    i encountered a bit of a problem in including the tailwind config during the choice of color

    Rsponsive landing page using Tailwind css

    1
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Hey there!

    Congrats on finishing the challenge! ✅

    Your solution looks awesome!

    📌 It's a good idea to use semantic HTML elements like <ul> and <li> for lists. This makes your code more accessible, maintainable, and meaningful.

    Here's an example of how you can refactor your code:

    After Refactoring

    <ul class="list-container">
    <li><a href="#">Github</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    ...
</ul>

    Using <ul> and <li> makes your content structure clearer, which is better for screen readers and search engines. Plus, it follows best practices for HTML.

    Hope this helps!

    Keep up the great work!

    Marked as helpful
    0
  • Eli Silk•660
    @elisilkSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I spent a bit more time on this project making sure that the design worked for all screen sizes from a viewport width of 320px up to more than 1440px.

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

    Thanks to amazing suggestions of @DylandeBruijn and @danielmrz-dev, I started with a clunky solution that involved using background images for the photos, and moved toward a much more flexible responsive images solution that works well across screen sizes and treats the product images as part of the content.

    Responsive product preview card using picture tags and flexbox

    2
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Hey there! 🙋🏽‍♂️

    Congrats on finishing the challenge! ✅

    Your project looks awesome!

    Here's a tip that might interest you:

    📌 When you have different versions of the same image, consider using the <picture> tag. Using it as a background works, but in this case, the image is not only decorative, it's part of the content.

    This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

    Example:

    <picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

    Hope you find this useful!

    Great job overall!

    Marked as helpful
    0
  • Jas•140
    @ajasmine94Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I think I am most proud of the fact that I was able to make the simple design from scratch (in terms of styling) provided the asset..

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

    Mostly with setting the box on the middle. I always find setting a particular element on a position challenging. After a lot of trial and errors, and making use of my existing knowledge on CSS, I was able to come up with the final outcome.

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

    I was able to copy the design but I really think it can be improved on especially with setting the position of the box in the middle as I'm not sure if my solution to that is even correct..

    HTML, CSS

    2
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Hey there! 🙋🏽‍♂️

    Congrats on completing the challenge! ✅

    Your project looks fantastic!

    Here's a tip to make it even better:

    Using margin and/or padding isn't always the best way to center an element. Try this method to center an element vertically and horizontally:

    📌 Apply this CSS to the body (skip position or margins to make it work correctly):

    body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

    Hope this helps!

    Keep up the great work!

    Marked as helpful
    0
  • Kamgo N Elton•70
    @kelton-glitchSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Being able to figure out the different displays was a fun experience nd also playing around with the interactivity of the page

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

    I had some issues with the responsiveness in the beginning. Especially figuring out how to come up with the mobile view before scaling up

    Product card

    1
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Hey there! 🙋🏽‍♂️

    Congrats on finishing the challenge! ✅

    Your project looks awesome!

    Here's a tip that might interest you:

    📌 When you have different versions of the same image, consider using the <picture> tag.

    This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

    Example:

    <picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

    Hope you find this useful!

    Great job overall!

    Marked as helpful
    0
  • Vansh Raheja•60
    @vanshraheja75Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Created my second responsive website. Next time i will use less time and more professional approach.

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

    Not much issues just adjusting the width of container in mobile took a while.

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

    Well the project was easy not any help needed.

    Responsive card using grid

    1
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Hello there!

    Congrats on completing the challenge! ✅

    Your solution is really impressive!

    I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

    📌 First: Think about using <main> to wrap your main content instead of <div>. The tag <main> can be used to wrap all the main content, not only the main text.

    Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

    📌 Second: Consider using <h1> for your main title instead of <div>.

    It's more than just text size — it's about structuring your content effectively:

    • The <h1> to <h6> tags are used to define HTML headings.
    • <h1> is for the most important heading.
    • <h6> is for the least important heading.
    • Stick to just one <h1> per page – it should be the main title for the whole page.
    • And don't skip heading levels – start with <h1>, then use <h2>, and so on.

    These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

    Hope that's helpful!

    Keep up the great work!

    1
  • Mahdi Hashemi•270
    @M1389Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    💢Hi Dear Friends I'm really happy that I completed another nice challenge of Front-end Mentors. I would appreciate any comment about my code. Thanks to Front-end Mentor team 🙏

    Responsive Social accounts web page

    1
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Hey there! 🙋🏽‍♂️

    Congrats on completing the challenge! ✅

    Your project looks fantastic!

    Here's a tip to make it even better:

    Using margin and/or padding isn't always the best way to center an element. Try this method to center an element vertically and horizontally:

    📌 Apply this CSS to the body (skip position or margins to make it work correctly):

    body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

    Hope this helps!

    Keep up the great work!

    0
  • Hoaxilog•170
    @HoaxilogSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Coming up with an idea on how to solve my problem while doing this challenge.

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

    My problem that encounter is about the image, I started at 375px (mobile device) i set my card (parent element) to padding 1.5rem and i have a child; first is the image, I set position: absolute to stick at the very top and for another child which is the text below the image I set the margin-top to have some space and so I can see the text. Now there's a problem when I do this;

    • The space above the text is so huge when trying to zoom in at 375px.
    • Trying to remove the padding for my div > img but staying the padding for the text below

    SOLUTION

    • instead of relying on same div parent with same padding I make a different parent with the same padding for them. But removing the padding for my image using media queries since it only need to stick at the very top when u are on max-width 375px devices.

    REALIZATION

    • while doing this challenge I thought my path is gonna be easy like there is no problem that I can solve but this problem that i encounter humble me.

    Product Card Solution

    2
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Hey there! 🙋🏽‍♂️

    Congrats on finishing the challenge! ✅

    Your project looks awesome!

    Here's a tip that might interest you:

    📌 When you have different versions of the same image, consider using the <picture> tag.

    This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

    Example:

    <picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

    Hope you find this useful!

    Great job overall!

    Marked as helpful
    0
  • KingX•150
    @iwedibahSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am very proud of The Frontend community I have the privilege of seeing through my senior colleagues' works, studying their codes, and make improvements on mine.

    cheers to my growth

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

    media queries

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

    in areas needed for growth

    Profile card component

    1
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Hello there!

    Congrats on completing the challenge! ✅

    Your solution looks great!

    The background pattern with the circles is a bit tricky, but you don't need separate containers to create it as it's possible to work with multiple background images at the same time. Here's how you can do it:

    📌 Add this to the body:

      background-color: var(--Dark-cyan);
  background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;

    I hope it helps!

    Other than that, you did an excelent job!

    1
  • aztromel•40
    @aztromelSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I really liked that I was able to grasp the concept of grid and flex better in order to align the card right in the center without any issues, I was also able to align the content inside the card correctly without any issues. However, I really had issues trying to edit the svg and making sure the card was responsive in mobile devices. I also feel I could've done better in building the animation.

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

    My biggest challenge by far was trying to make the design responsive, but I tried solving this by using a predetermined width and also making the font sizes responsive enough.

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

    I would like help in understanding a better and more efficient way of building a responsive design for this solution. Is there a way to change the width without using media queries?

    BlogCard using Grid and Flex

    3
    Daniel 🛸•44,310
    @danielmrz-devPosted 4 months ago

    Hey there! 🙋🏽‍♂️

    Congrats on completing the challenge! ✅

    Your project looks fantastic!

    Here's a tip to make it even better:

    Using margin and/or padding isn't always the best way to center an element. Try this method to center an element vertically and horizontally:

    📌 Apply this CSS to the body (skip position or margins to make it work correctly):

    body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

    Hope this helps!

    Keep up the great work!

    0