Brooklyn Layout Mini-Project

Overview

Welcome to the Brooklyn Layout Mini-Project! In this exercise, you'll have the opportunity to recreate the layout of the Brook & Lyn website. This is a hands-on task that will test your web design and coding skills, emphasizing on layout structure and styling.

Project Timeline

  • Assigned Date: 10/7/2023
  • Due Date: 10/14/2023

Platforms

  • Acceptable platforms: Repl.it or CodeSandbox.
  • Codepen is not acceptable for this project.

Task Description

You have two options for this project:

  1. Option A: Use the Brooklyn website design mockup that we provide below.
  2. Option B: Choose any website on the internet that showcases content cards and attempt to recreate its layout.

The Brook & Lyn Mockup:

Brooklyn Website Mockup

Instructions:

  1. Setup: If you're opting for the Brook & Lyn design (Option A), you'll find all necessary images in the provided brooklyn/images folder. In either Repl or Codesandbox create an index.html and styles.css file. Ensure you link the two together correctly.
  2. Recreation: Pay attention to the details. Consider aspects like font size, color schemes, margins, paddings, and alignments. Try to make your version as close to the mockup as possible.
  3. Content Cards: If you're selecting another website (Option B), focus especially on areas with content cards. Replicate the layout, content positioning, and any hover or active effects they might have.
  4. Completion: Once you're done, ensure your project is publicly available and running smoothly on either Repl.it or CodeSandbox. Share the live link on this spreadsheet https://docs.google.com/spreadsheets/d/1GUG35UAE0o0GGQ5wMpHaYyB5jGs3jNyWvJWlkHuZCME/edit?usp=sharing.

Points to Consider:

  • Think about the responsiveness of your layout. How will it look on different screen sizes?
  • Consider the user experience. Ensure clickable elements have adequate feedback.
  • Stick to best practices in terms of file organization, code commenting, and naming conventions.

Key Takeaways:

  • This project is not just about replicating a design but understanding the nuances of web layouts and the decisions frontend devs make.
  • Focus on details. The closer your recreation is to the mockup or the original website (for Option B), the better you've understood and implemented the design intricacies.
  • Think out-of-the-box. Use this opportunity to experiment with any additional styling or effects you believe could enhance the design.

Good luck and happy coding!

Alt text Alt text Alt text Alt text Alt text Alt text Alt text