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.
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!
- Screenshot(s) of original site included in final product
- Includes at least one error-free HTML page
- CSS is written in its own file(s) and included in the HTML with a
<link>element - Final, rendered HTML page(s) are almost indistinguishable from the original screenshot(s)
Do not remove these specs - they are required for all goals.
- The artifact produced is properly licensed, preferably with the MIT license.
- 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.