Add license, docs

LICENSE.md

@@ -0,0 +1,16 @@
+# Josh's Course Materials License
+
+Version 1, November 2020
+Copyright (c) Josh Comeau, 2020
+
+The files in this repository are meant to be used as part of a paid course, and are not intended for public distribution. They're open-source because it's the simplest form of distribution, and provides the best experience for students enrolled in the course.
+
+All are welcome to create personal copies of this repository, and modify its contents for educational use. Please experiment with the code, and see what you can build!
+
+It is forbidden to use these contents in any sort of commercial endeavour, including but not limited to:
+
+• Reselling its contents as part of a different course
+• Incorporating the code into a pre-existing business or project
+• Selling your solution to students enrolled in the course
+
+Exemptions can be made, on a case-by-case basis. Contact Josh Comeau (me@joshwcomeau.com) for more information.

README.md

@@ -1,6 +1,135 @@
-TODO
+# Huckleberry Agency Website
 
-## Color palette
+In this workshop, you'll build a minimal landing page for an agency.
 
-Primary: `hsl(245deg, 100%, 55%)`
-Secondary: `hsl(45deg, 100%, 50%)`
+This mockup is built entirely using _flow layout_: no Flexbox, no grid, no absolute positioning. It relies heavily on padding, margin, and border.
+
+## Mockups
+
+Desktop:
+
+![Desktop-sized screenshot of an agency landing page](./docs/huckleberry-desktop.png)
+
+Tablet:
+
+![Desktop-sized screenshot of an agency landing page](./docs/huckleberry-tablet.png)
+
+Mobile:
+
+![Desktop-sized screenshot of an agency landing page](./docs/huckleberry-mobile.png)
+
+## Setup Instructions
+
+This project uses Parcel, to provide a development server with lightning-quick hot-reload.
+
+Start by installing dependencies:
+
+```
+npm install
+```
+
+Boot up a dev server:
+
+```
+npm run start
+```
+
+You should see a confirmation message like this:
+
+![Screenshot of a terminal, showing a server running at http://localhost:1234](./docs/success.png)
+
+You can visit `http://localhost:1234` to view the page. You should see a bunch of unstyled content:
+
+TODO screenshot
+
+## Getting Started Notes
+
+- You're given a decent start in terms of the HTML markup, but not much in the way of styles. You'll be expected to edit `style.css` to implement the styles. You can also edit `index.html` if you wish, though it should be possible to solve this project touching only `style.css`.
+
+- Don't worry too much about "best practices". Later in this course, we'll see how to create scalable encapsulated styles. For now, the goal is simply to implement the designs in the screenshots, with whatever organizational strategy comes most naturally to you.
+
+- You may be tempted to reach for CSS strategies we haven't yet seen in the course, like flexbox or absolute positioning. Please try and complete this workshop without them. This module is focused on flow-layout and the box-model, and it is possible to lay everything out on the page using only padding, border, and margin. It's important to be comfortable with these primitives before moving on to more-complex subjects.
+
+- Future workshops will provide a React starter. For the early workshops, the focus is on the fundamentals, so we're using pure HTML and CSS. If you're more comfortable working in React (or another framework), feel free to use it instead.
+
+- **Pay close attention to the details.** For example, you should be able to draw a line along the left, and all text should be neatly aligned:
+
+![Desktop mockup with a vertical line showing alignment](./docs/aligned.png)
+
+That said: Don't worry if you can't create a pixel-perfect recreation. In the solution video, I'll show you exactly how I did it. Spend an hour or so on this project, and submit whatever you have at that point.
+
+## Design tokens
+
+In the early days of the web, sites would be built largely on "feel". Colors and sizes would be chosen based on the whims of the moment. This led to some very inconsistent-looking websites!
+
+Nowadays, it's common to have a set of _design tokens_. A design token is a value that can be reused. Typically it's part of a collection or a scale.
+
+We'll learn more about this idea later, but for now, you can copy/paste the values from this list as-needed. Don't worry about being DRY or using variables; Plop these values in, wherever you need them.
+
+**If you find it difficult to use these tokens, or if you're not able to achieve a result you're happy with, don't worry about it.** Solve it however you can, and then watch the solution video to see how I did it.
+
+### Spacing
+
+This app uses an 8px unit. All spaces are a multiple of 8px:
+
+- `8px`
+- `16px`
+- `24px`
+- `32px`
+- `48px`
+- `64px`
+- `96px`
+- `128px`
+
+When it comes to max widths (eg. the maximum width of the card), arbitrary values can be used.
+
+### Font
+
+1 font is used in this project: `Lato`. It is already included in the stylesheet.
+
+For font sizes, the `rem` unit should be used The scale is:
+
+- `1rem`
+- `1.25rem`
+- `1.5rem`
+- `2rem`
+
+Because the base font size is 18px, this works out in pixels to:
+
+- `18px`
+- `22.5px`
+- `27px`
+- `36px`
+
+### Color palette
+
+Primary (green):
+
+- `hsl(160deg, 100%, 30%)`
+
+Secondary (gold):
+
+- `hsl(45deg, 100%, 50%)` (lighter)
+- `hsl(45deg, 100%, 40%)` (darker)
+
+Grays:
+
+- `hsl(0deg, 0%, 0%)` (black)
+- `hsl(0deg, 0%, 10%)` (very dark)
+- `hsl(0deg, 0%, 30%)` (dark)
+- `hsl(0deg, 0%, 40%)` (medium)
+- `hsl(0deg, 0%, 60%)` (light)
+- `hsl(0deg, 0%, 100%)` (white)
+
+> What the HSL?
+>
+> You may be more familiar with color values in hexidecimal format, like `#FF0000`. In this course, we'll focus almost entirely on colors in a different format: HSL.
+>
+> We'll learn more about this format in a future module, but for now, you can use them interchangeably with hex values. For example:
+
+```css
+.something {
+  background: hsl(45deg, 100%, 50%);
+  border-bottom: 4px solid hsl(245deg, 100%, 55%);
+}
+```

index.html

@@ -13,26 +13,26 @@
     <div class="intro-chunk">
 
       <h1 class="title">
-        Synergy Inc.
+        Huckleberry
       </h1>
 
       <p>
-        When you deal in productionized solutions, you're in <strong>good hands</strong>.
+        An avant-garde agency focused on connecting <strong>passion</strong> with <strong>logistics</strong>.
       </p>
       <p>
-        We’ve solutionized a culture of contribution.
+        A better way to solve the problems of tomorrow.
       </p>
     </div>
   </header>
   <main>
   <section class="max-width-wrapper">
     <div class="card">
-      <h2 class="indented-heading">Synergies for the 23rd century</h2>
+      <h2 class="indented-heading">Wealth comes from operations</h2>
       <p>
-        No matter your KPIs, we know that optics matter. When your team is operating at 110%, when a target-rich environment meets product-market fit, when cross-pollination happens serendipitously, that's when you've found <em>Synergy</em>.
+        No modern business can thrive without developing a specialization in operations. <em>Huckleberry</em> has helped dozens of companies, from Fortune 50 monoliths to fast-growing Bay Area startups, achieve their goals and meet their KPIs by leveraging our extensive network of logistics experts.
       </p>
       <p>
-        <em>Synergy</em> is a solutions agency for the 23rd century. We focus on high-yield, long-tail, curated experiences for modern SaaS enterprises operating in the business-to-business space. If that sounds like you, let's chat. ☎
+        <em>Huckleberry</em> was established in 2003 to help ambitious businesses discover their true potential. If that resonates, let's chat. ☎
       </p>
     </div>
   </section>

package.json

@@ -1,7 +1,9 @@
 {
-  "name": "margin-and-padding",
+  "name": "css-for-js-flow-layout",
   "version": "1.0.0",
   "main": "index.js",
   "author": "Joshua Comeau",
-  "license": "MIT"
+  "scripts": {
+    "start": "parcel index.html"
+  }
 }

style.css

@@ -12,6 +12,7 @@ body {
 /* Add styles here! */
 html {
   font-size: 18px;
+  color: hsl(0deg, 0%, 10%);
 }
 
 p {
@@ -31,24 +32,25 @@ p {
 
 .intro-chunk strong {
   font-weight: 900;
-  color: hsl(245deg, 100%, 55%);
+  color: hsl(160deg, 100%, 30%);
 }
 
 main {
   padding-top: 96px;
   padding-bottom: 128px;
-  background: #111;
+  background: hsl(0deg, 0%, 60%);
+  border-top: 8px solid hsl(0deg, 0%, 40%);
 }
 
 main p {
   font-size: 1.25rem;
 }
 
 .title {
-  font-size: 1.5rem;
+  font-size: 2rem;
   margin: 0;
   margin-bottom: 64px;
-  color: black;
+  color: hsl(0deg, 0%, 0%);
 }
 
 .max-width-wrapper {
@@ -59,10 +61,10 @@ main p {
 }
 
 .card {
-  background: white;
-  color: #333;
+  background: hsl(0deg, 0%, 100%);
   padding: 32px;
   margin: 0 -32px;
+  border-bottom: 8px solid hsl(0deg, 0%, 40%);
 }
 
 .card *:last-child {
@@ -74,11 +76,12 @@ main p {
   margin-top: -24px;
   margin-left: -48px;
   margin-bottom: 24px;
-  padding: 16px;
+  padding: 24px;
   padding-left: 48px;
   padding-right: 48px;
   background: hsl(45deg, 100%, 50%);
-  color: black;
+  color: hsl(0deg, 0%, 0%);
   width: fit-content;
   font-size: 1.5rem;
+  border-bottom: 8px solid hsl(45deg, 100%, 40%);
 }