Skip to content

juneate/lab-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Assignment: Property card

Begin by forking the repository, then clone the new repository to your local computer.

OPTIONAL PRE-DEVELOPMENT STEP: Take the sample composition below and annotate the elements and layers using the graphic software of your choice. Consider the visual representation of each later or component, while also noting the element type and providing an appropriate class name (or classes) for each, at minimum.

Part 1

  1. Recreate the card using semantic HTML and CSS, using the techniques learned to this point about information architecture, design systems, and best practices in HTML/CSS.
    • For the salesperson's image, use your own photo, or select images from a service online, like Diverse UI.
    • For the "heart" icon, use an emoji, or an icon pack like Font Awesome or Material Icons.
    • Feel free to modify any aspects of the design, including fonts, colours, content, etc.
  2. Consider where a button that says "Learn more" would be placed. Design and code it to link to the current page, but imagine it would be used to link to the full property listing some time in the future.

Part 2

  1. Replicate the entire card to create 8-12 total cards, modifying the information within each to make them all look like unique property listings.
    • For at least half of the items, increase the number of listed amenities (for example, "2 Car Garage", "Finished Basement", etc) so that some cards are taller than others.
  2. Layout all of the cards in a responsive grid (like the results of search) so that the cards are each displayed in the best possible dimensions, regardless of the viewport width (be mindful of box shadows that overlap elements in an unnatural way).
  3. Add a "header" and "footer" to the document, branding it as a real estate brokerage using your own custom logo.
    • Consider adding a menu, or other items that would make the site feel real (social media icons, etc). Use existing sites or concepts as insiration.

BONUS: Design a set of components to help search and filter properties (these are non-functional, just make it look like they would filter the results).

Sample composition

Sample image

About

Student practice assignment

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published