Her Pockets! is a(n) X-part exercise in creating a website for the (sadly) fictional fashion startup Her Pockets! that is seeking to change the world by providing women with clothing that marries the best in high fashion with the practical carrying capacity found in even the most basic men's attire.

Starting files for each Day's task are provided in the corresponding subdirectory under /src. Both an example of a solution for each Day's task and a step-by-step walkthrough are available in the /answers directory.

I hope you enjoy the adventure!

Fork this repository and clone it to your local development environment. Then follow along with each "Day" at your new job.

• Web browser
• Code editor (Her Pockets! recommends VSCode or its open-source counterpart, VSCodium)
• Git & a Github account
• Basic familiarity with HTML and CSS

• Desire to create cool websites
• Passion for pockets!

You're the newest hire at Her Pockets!, a direct-to-consumer clothing company that is solving one of the world's great problems by providing women with clothes that actually include pockets. As a Junior Web Developer at Her Pockets!, you'll be helping out the website team in getting the website (NotYourPocket.coffee [not a real site 😭]) ready for launch at the end of the week.

It's your first day at Her Pockets! You've been tasked with creating the "Her Difference!" page, which you've been told is for demonstrating the differences between Her Pockets! and the competition.

Your supervisor has instructed you that you only need to create the main content of the page. Ted, another developer on the team, has been assigned to work on the header, footer, and navigation, so you don't need to worry about them.

The "Her Difference!" page needs to have a main heading, a paragraph promoting Her Pockets!'s Her Difference!, and a table comparing the pockets of the Her Pockets! clothing catalog to the competition. The text for these elements is provided below.

Just as you're sitting down at your desk to begin working, the company's lead designer drops by your desk and hands you a note with a simple style guide written in mint-green crayon. She explains that these requirements are essential to the Her Pockets! Brand identity, so you'd better not mess them up.

• Each page title must be centered

• Paragraphs must be justified

• Tables should be centered on the page

• Every instance of "Her" must be capitalized and in italics

• Our Brand name, "Her Pockets!", must always appear in bold

• Colors:

  • Page background color: #050505
  • Page text color: #fff0f0
  • Main page title and table column headers: #ff6a83
  • Other page titles and table row headers: #00ceff
  • All instances of "Her Pockets!" that are not in headings: #98ff98

Her Difference!

Hey ladies, do you hate having to carry a bag at all times? Are you tired of your husband and boyfriend whining like little babies because they have to carry your phone, wallet, and keys? Are you maybe even a little jealous of the guys and those big, practical pockets they have in every article of clothing? Well, girl, say “Hello” to the whole new World of Her Pockets!

Title: "Her Pockets! vs. the Competition"

• Step-by-step walkthrough
• Completed HTML
• Completed CSS

Coming soon!

Have comments, suggestions, or corrections? Pull requests are welcome!