Recap from Basic
In the Basic level of recreating Google.com, we have approached it in a 3-step manner:
- 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
- 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
- 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:
- Convert content into Plain Text
- Markup the Plain Text in HTML
- 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!
Top comments (0)