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:
- 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:
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!
Top comments (0)