8 |
9 | The design is available on Figma:
10 |
11 | - https://www.figma.com/file/6hGqKA5scrZJScb9KW3Hj2/Huckleberry
12 |
13 | ## Setup Instructions
14 |
15 | This project uses an NPM package called "live-server" — it provides a basic local file server, so that you can view the HTML file in-browser, and automatically reloads the page when the HTML/CSS changes.
16 |
17 | Start by installing dependencies:
18 |
19 | ```
20 | npm install
21 | ```
22 |
23 | Run the "start" script to start the server:
24 |
25 | ```
26 | npm run start
27 | ```
28 |
29 | You should see a confirmation message like this:
30 |
31 | 
32 |
33 | You can visit `http://localhost:9000` to view the page. You should see a bunch of unstyled content:
34 |
35 | 
36 |
37 | > **Trouble with this process?**
38 | >
39 | > Because this project is vanilla HTML and CSS, you can always open the HTML file in your browser, without fussing with a local file server.
40 | >
41 | > Certain JS APIs won't work when viewing files in this way, but that isn't a concern for this project.
42 |
43 | ---
44 |
45 | ## Getting Started Notes
46 |
47 | - 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`.
48 |
49 | - 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.
50 |
51 | - 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.
52 |
53 | - 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 feel more comfortable using a JS framework like React, you can go ahead, but please don't use any component libraries or CSS frameworks. All CSS should be written by hand.
54 |
55 | - **Pay close attention to alignment.** For example, you should be able to draw a line along the left, and all text should be neatly aligned:
56 |
57 | 
58 |
59 | (I've made this image semi-transparent to highlight the alignment; see the Figma for a color-accurate reference!)
60 |
61 | 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.
62 |
63 | ## Design tokens
64 |
65 | 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!
66 |
67 | 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.
68 |
69 | 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.
70 |
71 | **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.
72 |
73 | ### Spacing
74 |
75 | This app uses an 8px unit. All spaces are a multiple of 8px:
76 |
77 | - `8px`
78 | - `16px`
79 | - `24px`
80 | - `32px`
81 | - `48px`
82 | - `64px`
83 | - `96px`
84 | - `128px`
85 |
86 | When it comes to max widths (e.g. the maximum width of the card), arbitrary values can be used.
87 |
88 | ### Font
89 |
90 | 1 font is used in this project: `Lato`. It is already included in the stylesheet.
91 |
92 | For font sizes, the `rem` unit should be used.
93 |
94 | The scale is:
95 |
96 | - `1rem`
97 | - `1.25rem`
98 | - `1.5rem`
99 | - `2rem`
100 |
101 | By default, `1rem` is equivalent to `16px`.
102 |
103 | ### Color palette
104 |
105 | Primary (green):
106 |
107 | - `hsl(160deg, 100%, 30%)`
108 |
109 | Secondary (gold):
110 |
111 | - `hsl(45deg, 100%, 50%)` (lighter)
112 | - `hsl(45deg, 100%, 40%)` (darker)
113 |
114 | Grays:
115 |
116 | - `hsl(0deg, 0%, 0%)` (black)
117 | - `hsl(0deg, 0%, 10%)` (very dark)
118 | - `hsl(0deg, 0%, 30%)` (dark)
119 | - `hsl(0deg, 0%, 40%)` (medium)
120 | - `hsl(0deg, 0%, 60%)` (light)
121 | - `hsl(0deg, 0%, 100%)` (white)
122 |
123 | ## Submissions
124 |
125 | **Workshops are submitted through the course platform.** Commit your changes, push them to your fork, and submit the link by clicking the "Complete lesson" button on the workshop page.
126 |
127 | If you're not comfortable with Git, you can upload a `.zip` file using Dropbox or Google Drive, and paste a link to the public file instead.
128 |
--------------------------------------------------------------------------------
/docs/aligned.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/css-for-js/huckleberry/eda7064e366f89d0a4990d76ba62049b58933021/docs/aligned.png
--------------------------------------------------------------------------------
/docs/huckleberry-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/css-for-js/huckleberry/eda7064e366f89d0a4990d76ba62049b58933021/docs/huckleberry-desktop.png
--------------------------------------------------------------------------------
/docs/huckleberry-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/css-for-js/huckleberry/eda7064e366f89d0a4990d76ba62049b58933021/docs/huckleberry-mobile.png
--------------------------------------------------------------------------------
/docs/huckleberry-tablet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/css-for-js/huckleberry/eda7064e366f89d0a4990d76ba62049b58933021/docs/huckleberry-tablet.png
--------------------------------------------------------------------------------
/docs/initial.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/css-for-js/huckleberry/eda7064e366f89d0a4990d76ba62049b58933021/docs/initial.png
--------------------------------------------------------------------------------
/docs/terminal-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/css-for-js/huckleberry/eda7064e366f89d0a4990d76ba62049b58933021/docs/terminal-example.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
34 |
51 | 35 | Wealth comes from operations 36 |
37 |38 | No modern business can thrive without developing a 39 | specialization in operations. Huckleberry has helped 40 | dozens of companies, from Fortune 50 monoliths to 41 | fast-growing Bay Area startups, achieve their goals and 42 | meet their KPIs by leveraging our extensive network of 43 | logistics experts. 44 |
45 |46 | Huckleberry was established in 2003 to help ambitious 47 | businesses discover their true potential. If that 48 | resonates, let's chat! 49 |
50 |