RE:Creation - Basic - Google.com
Tags: recreation, frontend, html, css
Published: 2019-06-06 09:53:54

## 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](https://codepen.io/) 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:

![](https://thepracticaldev.s3.amazonaws.com/i/yfn1orsd33xw3yppxhnf.png)

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
{% codepen https://codepen.io/briandys/pen/wbbqaM default-tab=html,result %}

### Step 1, Round 2: Grouping and Labelling
{% codepen https://codepen.io/briandys/pen/qGGXbQ default-tab=html,result %}

### Step 1, Round 3: Structure
{% codepen https://codepen.io/briandys/pen/dEEVXX default-tab=html,result %}

## Step 2: HTML

### Step 2, Round 1: Structure Markup
{% codepen https://codepen.io/briandys/pen/gJJGmG default-tab=html,result %}

### Step 2, Round 2: Group Markup
{% codepen https://codepen.io/briandys/pen/WBBMwJ default-tab=html,result %}

### Step 2, Round 3: Individual Markup
{% codepen https://codepen.io/briandys/pen/byyLmm default-tab=html,result %}

## Step 3: CSS

### Step 3, Round 1: Individual Style
{% codepen https://codepen.io/briandys/pen/QRRrMv default-tab=css,result %}

### Step 3, Round 2: Group Style
{% codepen https://codepen.io/briandys/pen/ZNNREm default-tab=css,result %}

### Step 3, Round 3: Structure Style
{% codepen https://codepen.io/briandys/pen/eaaKyq default-tab=css,result %}

---

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

![](https://thepracticaldev.s3.amazonaws.com/i/w5y6uurobkf35v22pwoo.png)

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](https://dev.to/dys/re-creation-intermediate-google-com-349n)
* 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](http://briandys.com)