Week 3: Completion — WebDev
Hey friends, welcome back to my blog! After 3 weeks of arduous coding, I am glad to share that I have finally finished the whole personal website. While it is a simple project built using HTML and CSS only, I think it was a really good starting launchpad for myself and I have definitely learnt a lot along the way. Here was how my final week went:
TLDR: I cleaned up the “Contact Me” page and cleared the sizing issue, which I spent a significant amount of time on.
Day 11 
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.
Nonetheless, I realised the importance of prototyping. It allowed me to have a visual image of how I wanted the webpage to turn out, and it expedited the creation process on HTML and CSS significantly. Without prototyping, I could have taken at least 1 or 2 weeks more!
Day 12 
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.
Day 13 
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 
I continued where I left off yesterday to solve my resizing issues. In a desperate bid to try to get my content to be sized to respective device widths, I deleted all my CSS and realised that the problem was in my HTML code! So I scoured through the HTML codes and realised that I left out a key element to my <head> tag, a <meta> tag as shown below!
So what does this mean?
A <meta> tag defines metadata (information about data) and is used by browsers to decide how to display content.
What then, is a viewport?
A viewport is the visible area of a webpage and varies with devices, from mobile to computers.
Using this <meta> tag, it gives the browser instructions on how to control the page dimensions and scaling.
width=device-width sets the width of the page to follow device screen-width” and initial-scale=1.0 allows me to keep the original zoom level when the first page is first loaded by the browser.
I also learnt a new way of keeping my square grid intact, by using aspect-ratio:1 in my 3 by 3 grid to ensure that all photos are square-shaped.
Day 15 
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.
With that, after a few modifications here and there, the website is ready to be uploaded and used! I do have some other touches to make, but the overall skeleton is actually done up relatively well and I am quite happy with the progress that I have made over the past week.
Well, with that, my first ever website is officially created and this concludes the end of my first ever webdev project. Stay tuned for more as I continue to explore more things related to code!
Jing Kai :D