loading...
Cover image for RE:Creation - Basic - Google.com

RE:Creation - Basic - Google.com

dys profile image Brian Dys Sahagun Updated on ・3 min read

Update: 8 June 2019

I made some updates on Step 3 - CSS namely:

  • Limited the CSS properties to padding, margin, width, height, background-color, color, display: block, inline-block, inline; text-align, and vertical-align.
  • I realized that we are in Basic level—so to keep things simple, I removed the presence of subcontainers in HTML and "next-level" CSS properties in CSS such as display: grid, flex, etc. We'll tackle them in the next level.

What is RE:Creation?

RE:Creation is a design activity in which we reverse engineer and recreate the HTML & CSS components of a chosen web page.

RE:Creation is short for Reverse Engineering Creation. It involves both discovery (theoretical) and delivery (technical) processes.

Objective

RE:Creation’s objective is to promote the fundamentals in designing digital products such as websites and web apps.

These fundamentals revolve around design disciplines such as Information Architecture, Interaction Design, User Interface Design, Visual Design & Accessibility, and Frontend Design.

Requirements

The requirements to participate in a RE:Creation are simple: first, basic knowledge of HTML & CSS and second, a computer with these software:

  • Text Editor (TextEdit, Notepad)
  • Web Browser (Chrome, Firefox)

Using these software for RE:Creation does not require internet connection.

Alternatively, a web app called CodePen could be used online. It functions both as Text Editor and Web Browser for editing and displaying web documents, respectively.


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:

Sure, there are lots of improvement to be done, especially if we do things right—which we will tackle on the deep dive activities.


What's Next?

Update: 8 June 2019

  • I recently posted Intermediate Level
  • Regarding the deep dives, I'll be writing a separate post for those after the Advanced Level

We'll be deep diving with the same example (Google.com), again, going through all 3 steps with 3 rounds each—this time, tackling concepts such as Information Architecture, Semantics, Accessibility, Progressive Enhancement, Responsive Web Design, and other topics related to building the frontend of a website.

Thanks for reading!

~ Brian Dys

Discussion

pic
Editor guide