Week 3: Completion — WebDev

Day 11 [300522]

For Day 11, I did up a simple prototype on Adobe XD for an alternative “Contact Me” page. This alternative page was intended to be a bit more simpler than the original one but less functionalities. After prototyping it, I spent some time to re-create it using HTML and CSS. I learnt how to link prototyped webpages on Adobe XD and it was more practice in recreation. To be honest, prototyping is really easy, but to get the code to work and function with pure HTML and CSS, that’s the tough part.

Prototype for my alternative Contact Me page.

Day 12 [310522]

Day 12 was mostly spent figuring out how to host my website on Github. I got the hang of how to use Github Desktop and uploading my page contents to the repository was actually not that difficult. I then spent the rest of my time creating the alternative Contact Me page.

Messy state of my Contact Me page.

Day 13 [010622]

On Day 13, I spent most of my time trying to figure out how to solve the issue of getting my logo, the navbar and the title elements on all my pages to be of the same size. I spent about 2 hours trying to look for a solution, but I just could not seem to find one. I decided to take a break afterwards and try again on Day 14, with the intentions of deleting my CSS and building it up from scratch to find the bug.

Day 14 [020622]

Problem I faced: Weird content alignment for mobile devices
The crucial piece of code that I missed out
My webpage after including the meta tag in.

Day 15 [030622]

On Day 15, I came across the singular, most important Youtube video that changed my life. I came across a Youtube video by WEB CIFAR on how he created a fully functional HTML form without any backend using FormSpree. With this information, I was ready to make my original Contact Me page fully functional.

Design of the final Contact Me page

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store