RE:Creation - Intermediate - Google.com

Recap from Basic

In the Basic level of recreating Google.com, we have approached it in a 3-step manner:

1. Convert content into Plain Text
   • We limited the content inventory to its 1st level grouping only—not digging deeper for subgroups
   • We did not bother with interaction to reveal other content and UIs
2. Markup the Plain Text in HTML
   • We used simple HTML elements like <a>, <img>, <button>, <input>
   • We used SVG via data URI (instead of an absolute URL)—we can actually use any image type like PNG or JPG—we just have to encode it
3. Style the HTML elements in CSS
   • We limited the use of CSS properties within the following: padding, margin, width, height, background-color, color
   • Font properties were left to the default browser styles
   • Styling which involves interaction such as hover were not yet tackled

The result is a rather "unfinished-looking" web page. See for yourself:

Still, not bad for someone who is just beginning to gain knowledge in HTML and CSS—that's why we're pushing this to Intermediate level!

---

Ready? Let's Begin!

Recreating Google.com basically has 3 steps:

1. Convert content into Plain Text
2. Markup the Plain Text in HTML
3. Style the HTML elements in CSS

This is the mockup that we are recreating:

Each step has 3 rounds, so there's a total of 9 examples I made in CodePen:

Step 1: Plain Text

Step 1, Round 1: Content Inventory

Step 1, Round 2: Grouping and Labelling

Step 1, Round 3: Structure

Step 2: HTML

Step 2, Round 1: Structure Markup

Step 2, Round 2: Group Markup

Step 2, Round 3: Individual Markup

Step 3: CSS

Step 3, Round 1: Individual Style

Step 3, Round 2: Group Style

Step 3, Round 3: Structure Style

---

Here's the screenshot of the final state of our activity:

Again, there are still lots of room for improvement and we will tackle those in Advanced level.

---

What's Next?

We'd probably go straight to Advanced level in the next post.

Thanks for reading!

~ Brian Dys