- 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
This round is simple enough in the sense that we just have to convert all the marked up groups into an HTML Content Division element, as denoted by the HTML
<div> tag. The group name will then be converted into the value of the
class attribute. Now, the suggested syntax for spaces—instead of underscore—would be dash.
<header> <div class="website-name"> <h1>Google</h1> </div> <div class="account-action"> <a href="#">Sign In</a> </div> <div class="google-apps"> <div class="app-shortcuts"> <ul> <li><a href="#">Gmail</a></li> <li><a href="#">Images</a></li> </ul> </div> [...] </div> </header>
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.