Skip to content
Submitted 5 months ago

Multistep Form built w/ Angular 🅰️

#angular#sass/scss#typescript#bem
P
Daniel 🛸•44,750
@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 5 months 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
    P
    Daniel 🛸•44,750
    @danielmrz-devPosted 5 months 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 5 months ago

    @danielmrz-dev thank you sir for the reply

    1
    Asledin-max•170
    @Asledin-maxPosted 5 months ago

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

    2
  • Saul Gabriel Aranguren•330
    @saularangurenPosted 4 months 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,900
    @KapteynUniversePosted 4 months 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