Reverse-engineered social media site with HTML & CSS

tannerwelsh commented 8 years ago

Description

Take screenshots of pages on a popular social media site (Twitter, Facebook, Pinterest), and reverse engineer the HTML and CSS from scratch.

You can copy images and inspect the page using developer tools, but avoid copy-pasting! You'll learn a lot more this way.

Get as close as you can to the screenshot.

You don't need to add behavior.

Context

Looking at the design of an interactive social media site is a great way to learn just how powerful the code that drives them can be. It is in reading and re-writing the code where we can continue to enhance our learning.

Feel free to use frameworks and other libraries, but do not copy-paste, it is crucial that in typing the code out allows you to continually read and discover how the code works.

As you code your site, you will likely encounter scenarios that you may not have expected, which is fine, it only means that you have more opportunities to problem-solve!

Specifications

[x] Screenshot(s) of original site included in final product
[x] Includes at least one error-free HTML page
[x] CSS is written in its own file(s) and included in the HTML with a <link> element
[x] Final, rendered HTML page(s) are almost indistinguishable from the original screenshot(s)
Required

Do not remove these specs - they are required for all goals.

[x] The artifact produced is properly licensed, preferably with the MIT license.
Quality Rubric
Code is well formatted without any linting errors [25pts]
Proper spacing and indentation are used in all HTML & CSS files [25pts]
CSS classes, ids, etc. are meaningfully named [25pts]
HTML/CSS files are well organized into a meaningful file structure [25pts]

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

tannerwelsh commented 8 years ago

@GuildCrafts/oakland I could use some help fleshing out this goal. Anybody want to contribute to the context/specs section? Feel free to make edits directly to the description.

pllearns commented 8 years ago

Hey @tannerwelsh I went ahead and wrote in some notes under context, feel free to edit as needed. I am still thinking of specs. Thanks!

sydroth commented 8 years ago

@tannerwelsh I love this goal and will be adding stuff this week :) I also may do it as a personal project outside of normal hours, thanks for the inspiration.

shereefb commented 8 years ago

Consider giving reviewers more information to figure out what quality looks like. Is it about test coverage? Is it about not using frameworks? Is it about the UI look and feel?

For example, you can create a quality rubric like this: UI/UX: 100pts Test Coverage: 100pts Good file organization: 50pts Good variable and function names: 50pts Code is object oriented: 75pts No bootstrap or other UI framework: 100pts

tannerwelsh commented 8 years ago

@pllearns @sydroth - I added some specs and quality rubric. Mind reviewing, and if you like, remove the draft label?

ai-santos commented 8 years ago

@tannerwelsh I like the challenge and the idea of this goal, sounds super fun. I'll look into adding specs.

GuildCrafts / web-development-js