Project0 - Recreate Front End of Google Search

In the previous post of this series, I mentioned about two goals🥅 of this series:

1. Notes taken and take away for lectures
2. Writing of the projects for every assignments

I am gonna eat back my words on the first goal because I found out that the lecture notes of the course is already very good.

GIF

Overview of First Lecture

Thus, this series will dedicated entirely to the writings of the projects. The first lecture is about introduction on HTML and CSS, which covers the followings:

• Basic HTML tags and attributes - head, h1, body, img, a, href, etc.
• Inline, internal, and external CSS
• Introduction to SCSS

Overview of the First Project

The project for this first lecture, project #0 is to replicated the front end of google search. Specifically the 3 pages as follows:

1. Main Google search page
2. Google image search page
3. Google advanced search page

It is in this projects that the course introduces the GET request. And with that the requirement to bring the user to the actual google search results once the user searches for it.

There are 7 specifications that much be met which I am expected to record a explanation video with timestamps of every specifications. Thought I will be able to finish project #0 in one day, guess I am a beginner in HTML & CSS after all 🤷‍♂️

From the cover image of this post, you can see my progress so far - only at the incomplete main search page. I am stuck at making the middle main section to take up the whole height of the page. It's midnight now, in the next post gonna work on that and the stretch goal of completing project #0!