HTML Basics

HTML Basics

Web Design/ 2022

I’m in the process of learning coding through Ania Kubów’s online coding course. I have been interested in motion graphics and have been in the process of deciding what type of design I want to do. I have been taking notes throughout the html section and designed a website based on my notes. I have prior experience with Figma, but I used Adobe XD to design and familiarize myself with the program.



Notes to Prototype

I based my design on the notes the took over HTML coding basics. The original idea was to design an infographic, but later evolved to an interactive website. I wanted to challenge myself with this project going beyond graphic design and using UX/UI. My prototype was designed with index cards. I divided my notes into sections to cover what I learned. I cut, glued and taped the cards visualizing the interactions for the site. I then created a storyboard of the intro leading to my notes.

I had difficulty with the smart animated function in Adobe XD and instead used Adobe After Effects for the intro. All the design elements were created in Adobe Illustrator then imported to Adobe XD. The final design and color palette were influenced by the highlighters I used on the index card prototype. The changes I made were for better compatibility with online interaction. I added in a dark mode for those who prefer it.

Brainstorm and Index Card Prototype

Resources Used

Code with Ania Kubów

12HR+ Youtube Coding Bootcamp


Online Web Development Tutorials

Online Coding Tutorials, Exercises, & Certificates