Skip to content
Submitted about 1 month ago

Multistep Form built w/ Angular 🅰️

#angular#sass/scss#typescript#bem
Daniel 🛸•44,410
@danielmrz-dev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Multi-step form
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

  • Angular 🅰️
  • SASS 🎨
  • Typescript 🤖
  • BEM Notation 🅱️
  • Template Driven Forms approach 🧾
  • Validations using Angular Directives ✅
  • Mobile first workflow approach 📲

It took me a few days to finish this one. I wasn't sure if my current knowledge about Angular would be enough to finish this project, but I tried anyway and I'm very glad I did. As always, I ended up learning a lot during the process and I'm much more comfortable using Angular.

Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

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

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Community feedback

  • Ibeaka Godson•470
    @WarmarthPosted about 1 month ago

    good day sir, l love you solution as always resemble the design image, is this their a way to know the actual width and height of the pages in respect to the design image prior to submission?

    your codes are well structure and arranged, can be easily understood, maybe because of the naming style.

    1
    Daniel 🛸•44,410
    @danielmrz-devPosted about 1 month ago

    @Warmarth if you have a Frontend Mentor pro subscription, you have access to the figma files. You can find the correct measures in these files.

    If you are not a pro member, there's a browser extension called Pixel Perfect that might help you.

    0
    Ibeaka Godson•470
    @WarmarthPosted about 1 month ago

    @danielmrz-dev thank you sir for the reply

    1
    Asledin-max•170
    @Asledin-maxPosted about 1 month ago

    @danielmrz-dev thnak you browser extension called Pixel Perfect.

    2
  • Saul Gabriel Aranguren•310
    @saularangurenPosted about 1 month ago

    Hi Dani, bro I advise you to use the outline: none property, so that the black frame is not seen in the inputs, excellent solution and happy coding 😁

    0
    KapteynUniverse•2,720
    @KapteynUniversePosted about 1 month ago

    @saularanguren If you are not going to apply some custom styling for focus state that is terrible for accesibility.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord