Web Unit Studio / Deployment

Work to have done:

As much of the Interneting is Hard (but it doesn’t have to be) tutorial as you can – at least parts 1-6 (from “Introduction” through “CSS Selectors”)
A website proposal, posted to the Issue Queue
More reading on CSS selectors and GitHub Pages

Plan for the day:

Web Design in 4 minutes (in 15 minutes)
Ben’s takeaway: a suggested composing strategy
Go forth!
Exit note

1. Web Design in 4 minutes (in 15 minutes)

Designer Jeremy Thomas created a nifty little walkthrough for how to think about building up a stylesheet, which you can find at jgthms.com/web-design-in-4-minutes/. Now that you’re more familiar with CSS rules and selectors, I want to talk through it together, as a way of modeling how you might spend your work-time in studio today and over the next week or so.

2. Ben’s take-away

a suggested composing strategy

List out your content sections
Decide what's nested, what's at the same level
Draw boxes, and label them
Use the boxes to write HTML containers
Use the labels to give them CSS classes
Only then start to style the classes
Use some standard minimum styling
- set a maximum width for text
- give your main content and headers some padding
- change font default away from "Times"

3. Go forth!

Do what you need to do to level up on HTML and CSS in the direction of your specific project; a Website Preview is due Thursday.

Important: if you don't yet know how to deploy a project site using GitHub pages, learn how before you leave today. It's not hard, and you don't need to create a new repository! Just

create a folder in your repo called "docs,"
put your website's files in there, and
change the settings for the repo to "use master branch /docs folder" as your source.

Then your site will build at https://your-username.github.io/your-repo. There are more options you can read about, but that's it in a nutshell! If you're worried about showing up in search results before your site is ready, you can always add a noindex meta tag.

Remember that you have Resources on our website. For today, might I especially point out the design advantages of placeholder text?

Save about five minutes at the end to write me a brief exit note about what you’ve been working on.

4. Exit note

Before you leave, just as a way for me to check in, I’d like to hear more about what happened today: did you decide on your navigation? Block out the html? Make some progress on a stylesheet?

Write me a quick email.

Homework for next time

Do more of the tutorial, including at least Flexbox (8) and Responsive Design (10), if you haven’t yet.
Compose and push a website preview: a beginning. As detailed in the assignment, this should include:

A multifile project folder (probably named "docs," for ease of use with GitHub Pages), containing a combination of html and css and image assets, even if the whole thing is not yet well-developed.
A static screenshot (.png or .jpg) of your website-in-progress, as rendered in a local web browser (for comparison later to subsequent drafts).
- (Optionally, take a screenshot of your Atom project setup, too.)
A plain text (.txt) or markdown (.md) file, explaining in at least 300 words what you're showing us in this preview. Feel free also to ask questions or lay out next steps for yourself!
An updated ASSETS.md file, now with any files or fonts you've actually obtained. As you go, add source documentation for any outside sources – and your permission to use them (e.g. licenses, fair use; see Writer/Designer p. 160-165).