- Convert the marked up groups into
- Instead of
<div>, mark up the group of form elements in
- Mark up the text nodes in
- Add class attributes to elements that need to be differentiated
- Mark up the structure in HTML
- Mark up the groups in HTML
- Mark up the individuals in HTML
- Structure the groups
- Interact to reveal more content and convert into plain text
- Structure content by grouping and labeling them based on function
- Convert content into plain text
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.
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.
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.
The Stages of Frontend Design serves as an overview of the whole process.