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.
Since I am accustomed to building websites, I had to adjust my previous methods of how to go about building this new project. Normally, I build each website with all features already included. For example, fully integrated contact forms and maps, any fun JavaScript tricks for interactive movement, and all styling elements consistent throughout. Naturally I wanted to build the app this way, but through hands on experience and some wise guidance, I have learned it is better to make a first version of the app and continue to build on top of that, layer after layer.
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!