Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
68
Comments
3435
P

Daniel 🛸

@danielmrz-devBrazil 🇧🇷44,810 points

My name is Daniel and I'm a brazilian front-end developer and enthusiast!

I’m currently learning...

🔷 TypeScript + đŸ…°ī¸ Angular

Latest solutions

  • Invoice App built with Angular, Angular Material

    #angular#angular-material#rxjs#sass/scss#typescript

    P
    Daniel 🛸â€ĸ44,810
    Submitted about 1 month ago

    0 comments
  • Designo Multi-Page Website built with Angular + SASS đŸ…°ī¸

    #angular#angular-material#sass/scss#typescript#rxjs

    P
    Daniel 🛸â€ĸ44,810
    Submitted 3 months ago

    4 comments
  • Planets fact site built with Angular and SASS

    #angular#rxjs#sass/scss#typescript#angular-material

    P
    Daniel 🛸â€ĸ44,810
    Submitted 4 months ago

    2 comments
  • Entertainment web app built w/ Angular + Express(NodeJS)

    #angular#angular-material#express#typescript#sass/scss

    P
    Daniel 🛸â€ĸ44,810
    Submitted 5 months ago

    2 comments
  • Github User Search App built with Angular, TypeScript and SASS đŸ…°ī¸

    #angular#sass/scss#typescript#rxjs

    P
    Daniel 🛸â€ĸ44,810
    Submitted 6 months ago

    0 comments
  • Frontend Quiz built with Angular, TypeScript and Tailwind đŸ…°ī¸

    #angular#tailwind-css#typescript#rxjs

    P
    Daniel 🛸â€ĸ44,810
    Submitted 6 months ago

    1 comment
View more solutions

Latest comments

  • Adrianoâ€ĸ42,890
    @AdrianoEscarabote
    Submitted 3 months ago

    Personal finance app w/ (Next + Node + Typescript) 👨‍đŸ’ģ

    #next#node#tailwind-css#typescript#prisma
    4
    P
    Daniel 🛸â€ĸ44,810
    @danielmrz-dev
    Posted 3 months ago

    Excelente, Adriano!

    Suas soluçÃĩes aqui sÃŖo umas das melhores 👏đŸŊ👏đŸŊ👏đŸŊ

  • Zainab Aminu Mikailâ€ĸ70
    @aminuzainab
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Making the contact form element to start on a new line when at the mobile state.

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

    The challenge i encountered was making the contact form responsive at the mobile state.I overcome that by asking a friend of mine which told me that i should check on the documentation of the property i used and it was helpful.

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

    The responsiveness of the contact form,the width of the lastname input is not equal to the rest i try to adjust it but still.

    Contact Form

    1
    P
    Daniel 🛸â€ĸ44,810
    @danielmrz-dev
    Posted 5 months ago

    Hey @aminuzainab! 🙋đŸŊâ€â™‚ī¸

    Congrats on completing the challenge! ✅

    Your project looks fantastic!

    Here's a tip to make it even better:

    Using margin, padding or even position 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!

  • AHMAD USMANâ€ĸ10
    @AHMAD-USM
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    TRY TO DEVELOP MORE COMPLEX WEBSITE

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

    NO CHALLENGES EVERYTHING WAS WORKING WELL

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

    JAVASCRIPT

    A responsive social links profile using flexbox

    1
    P
    Daniel 🛸â€ĸ44,810
    @danielmrz-dev
    Posted 5 months ago

    Hey @AHMAD-USM! 🙋đŸŊâ€â™‚ī¸

    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
  • Caio Lopes Silvaâ€ĸ70
    @CaioLopes5556
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?
    • Tenho orgulho de fazer isso sozinho, sem usar nenhuma IA ou vídeo tutorial para me ajudar. A Ãēnica coisa que fiz foi verificar o site do MDN para aprender como algumas propriedades funcionam e uma rÃĄpida busca no Google sobre @font-face{}.

    • Eu usaria um <ul> em vez de uma <div> para conter os links. Eu tentei enquanto estava fazendo o cÃŗdigo, mas nÃŖo funcionou como eu esperava.

    What challenges did you encounter, and how did you overcome them?
    • Um desafio foi usar o arquivo de fonte na pasta assets, nos desafios anteriores no Front-End Mentor eu apenas importei a fonte pelo Google Fonts utilizando o @import, mas dessa vez eu tentei algo diferente com @font-face{} (nÃŖo sei se da melhor forma)

    • Eu pesquisei na internet uma maneira fazer isso e descobri que nÃŖo era tÃŖo difícil.

    What specific areas of your project would you like help with?
    • Talvez alterar a div .link-list em uma <ul> para tornar o cÃŗdigo mais semÃĸntico. Mas vou tentar achar uma forma de fazer isso sem comprometer a ÃĄrea de hover do link.

    Social Links Profile - HTML, CSS

    1
    P
    Daniel 🛸â€ĸ44,810
    @danielmrz-dev
    Posted 5 months ago

    OlÃĄ @CaioLopes5556 !

    ParabÊns por completar o desafio! ✅

    Sua soluÃ§ÃŖo estÃĄ Ãŗtima!

    📌 Sa linha de pensamento ao usar tags de lista estÃĄ correto. É recomendado usar elementos HTML semÃĸnticos como <ul> e <li> para criar listas. Isso garante que seu cÃŗdigo seja mais acessível, mais fÃĄcil de manter e semanticamente significativo.

    Aqui estÃĄ um exemplo de como vocÃĒ pode refatorar seu cÃŗdigo:

    ApÃŗs a RefatoraÃ§ÃŖo

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

    Ao usar <ul> e <li>, vocÃĒ transmite a estrutura do seu conteÃēdo de forma mais clara, facilitando para leitores de tela e mecanismos de busca entenderem. AlÊm disso, isso estÃĄ alinhado com as melhores prÃĄticas para semÃĸntica HTML.

    Espero que vocÃĒ ache isso Ãētil!

    Continue com o excelente trabalho!

    Marked as helpful
  • Iryna Kokoliusâ€ĸ120
    @ikokolius
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I am hosting my solution for the first time live on GitHub Pages and that I can work now with Figma designs

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

    I was working for the first time with Figma and found the Figma for developers: How to work with a design file link really helpful.

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

    One of the ideas for the challenge was to focus on writing semantic HTML and I would like to know how can it be applied to a card component we were writing.

    Also I would like an overall feedback on what can be improved as there is always place for improvement :-).

    Thank you.

    QR Code Component using CSS custom properties and Flexbox

    1
    P
    Daniel 🛸â€ĸ44,810
    @danielmrz-dev
    Posted 5 months ago

    Hello @ikokolius!

    Congrats on completing the challenge! ✅

    Your solution looks great!

    I have a suggestion for improvement:

    📌 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.

    This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.

    Hope that's helpful!

    Keep up the great work!

    Marked as helpful
  • BeshoyNFaragâ€ĸ30
    @BeshoyNFarag
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    It's one of my first few projects to use both flex box and grid together even this time i added an extra flex-box to add a personal link.

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

    The image fitting into the grid is really challenging for me overtime, the responsive design is also challenging to find the width that covers a decent design for each device.

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

    The image size of course, as you can see i dedicated only 3fr row for the image however, in responsive devices as you can see it exceeds the 3fr so much. i want to know how to force images to fit the grid not the opposite. Also the font was set by pixel and still it appears to be too small for some devices in responsive view.

    Grid Responsive QR Solution

    1
    P
    Daniel 🛸â€ĸ44,810
    @danielmrz-dev
    Posted 5 months ago

    Hello @BeshoyNFarag!

    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 using <h1> for your main title instead of <h2>.

    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!

View more comments
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

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

Mentor of the Week - 1st Place

This badge is awarded to the top placed community member on the weekly Wall of Fame.

Mentor of the Month - 1st Place

This badge is awarded to the top placed community member on the monthly Wall of Fame.

Mentor of the Month - 2nd Place

This badge is awarded to the 2nd placed community member on the monthly Wall of Fame.

Fun fact

The computer in this badge is loosely based on the Commodore PET which was one of the earliest home computers launched in 1977. It came with 4 KB of RAM...that's not a typo!

Mentor of the Year - 1st Place

This badge is awarded to the top placed community member on the yearly Wall of Fame.

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