So, the first few steps I took on my journey of building my first progressive web app weren’t as difficult as I had anticipated. I find when a project seems a little too overwhelming or new, it’s best to take it step by step achieving only what you set out to do that day instead. This frame of mind is something that Marco continuously reinforces throughout the development of this app.
The first step was to create an HTML wrap up of my Adobe XD mock up. During this process I was able to correct page sequence problems, CSS styling elements that didn’t quite translate from mock up to wrap up and add new pages that hadn’t occurred to me previously. These changes were only possible because the wrap up allowed me to test some of the app’s features; specifically, the page sequence.
I added dummy
a tags to the buttons on each page in order to travel through the sequence physically. I noticed that I wanted to return to some pages and to navigate to other pages which simply did not yet exist. I quickly realized that these kinds of changes are only noticeable through using the app. Building an HTML wrap up allowed me to experience these situations without having to build the whole app in a more complicated language such as Angular.
Ultimately this step saves time in the long run and exposes many problems you might have in the future. Follow along with my journey and see how we start developing the app with Angular!