Website Conversion Project
Technologies: angular bootstrap css html jquery
The Angular Website Conversion Project was a really intensive project that I put a lot of work into.
Overview
I figured an update to my portfolio website was long overdue. So when I finally took on the task of updating the content I also had the bright idea of showing off my gained skill and software development knowledge to do it. I thought…“Well, I do need to learn more front-end technologies.” I thought it would be cool to use Angular or React to recreate my website and modernize it. I just had to learn it first.
I had been introduced to Angular through a Women Who Code event and also had a direct connection to an Angular expert. So this is how I chose Angular and converted my multi-page HTML website into a single page Angular website.
Things I learned:
- Existing site content reuse does not make a conversion easier
- You can’t always do the same thing in a different framework
- SPA’s are awesome
- Documentation is not always your friend
- Learning a new framework with multiple key versions and fuild folder structuring is challenging
- A working Angular website != completed project
- Angular deployment and server configuration is not straight forward
- Angular isn’t automatically refresh friendly
- Lighthouse is really informative
Testing
Not only was the Angular website tested but so was my sanity. When learning some new technology it’s hard to know if issues you encounter are due to improper implemenation, improper syntax, or typo. Luckily, I was able to reach out to my local dev community’s Angular expert for advice whenever I hit a roadblock that I had already exhaustively researched, troubleshooted, and even implemenated various optional solutions before hitting the wall. Additionally, I tested out my new website’s performance and accessibility a few times throught the process and I’m please to say that both the Performance and Accessibility percentages went up as the project progressed.
Key Takeaways from this Project
- Keeping up to date with technological advances aids with scalability
- MVC concepts are easier to understand through Angular (than .NET)
- Backend server knowledge is essential for any developer
The ultimate ‘key takeway’ I learned through this project is that I can do anything! If I could convert a multi-page HTML website into Angular, without knowing a thing about Angular, then I can surely create anything/something with any technology because my intelligence, dedication, network, and love of coding are constant.
Next up on my Projects TODO list is a Python/Django Web App with Trello API component.