Open tannerwelsh opened 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.
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!
@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.
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
@pllearns @sydroth - I added some specs and quality rubric. Mind reviewing, and if you like, remove the draft
label?
@tannerwelsh I like the challenge and the idea of this goal, sounds super fun. I'll look into adding specs.
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
<link>
elementRequired
Do not remove these specs - they are required for all goals.
Quality Rubric
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.