Writer/Designer’s studio: web unit

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”) plus 8 (“Flexbox”) and 10 (“Responsive Design”) – as well as the Medium post on Grid Layout (and optionally responsive grid)
A website preview? Let’s talk about it

Plan for the day:

Mea culpa
(Slightly) New groups
- introductions
- talk into the projects
Set goals
Go forth! (Or talk to me for demo / Q&A)
Revisit and update your goals

Mea culpa

I goofed. I told everyone in class last Thursday that a website preview was due today… but the official schedule said it wasn’t due until next class. And it looks from the fork network like some people were still working through the tutorials, and haven’t gotten to their own projects yet. Which is not your fault!

Out of deference to the original timing, I’m going to hold off on the criteria-generating day until Thursday, and treat today (rather than Thursday) as a full-class studio – which is where we would have been on the original calendar.

If you’ve already completed a preview, you’re just in that much better shape – and maybe you’ve already finished the homework for Thursday! Yay!

Regardless, you can use today to move your projects forward.

(Slightly) New groups

Because a few people have already told me they’re planning to do more advanced JavaScripty / interactive things, and a few others have expressed an interest in having songs play on their sites, I’ve made a few tweaks to the breakout room assignments, so you can more easily seek and share advice within your groups.

The first thing to do, then, is introduce yourselves to your groupmates, and informally share the current state of your projects. Show a preview if you’ve got one, but use this as a chance to talk through your goals and game plan, otherwise.

More notes / possible goals

Your homepage should probably be called something like index.html (or index.md) for it to load automatically at the root directory of your website URL. If you’re getting a 404 error, that might be the reason.
Take on the lowest line-count challenge. Ask yourself:
- does that div need to be there?
- could those element-based CSS rules that repeat each other be combined into a class?
Strive for semanticity. Ask yourself:
- can you tell what’s going on just by reading the HTML file?
- does the HTML hard-code any display (e.g. <center>, <b>) that should be in the CSS?

Set goals!

What do you need to do to level up on HTML and CSS in the direction of your specific project? As usual, please write down some goals in the google doc, so I can get an overview of where everyone’s at – and so you have a marker to come back to for your reflections, later.

Also for my sake and yours, please be as specific as possible: e.g. rather than “working on my site,” you might say, “choosing images for photo gallery” or “building consistent grid for layout with top menu and areas for paragraphs with a featured image” etc etc.

I'll stay in the main room, for Q&A or demo purposes, but please do call me into a room if you need me!

Things I expect people have questions about include: grid layout, responsive design and media queries. But you let me know and I’ll try to meet you wherever you are.

As usual, to get credit for asynchronous participation, please add your intentions and exit notes to the google doc when you start and stop working – and aim to work for at least two 20-minute pomodoros. (In class, we had about 50 minutes of straight-up studio time.)

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? Reply to your note in the google doc.

Homework for next time

Finish the tutorial, if you haven’t yet – or revisit the sections that are still confusing. I especially encourage you to look at sections 12 (Semantic HTML) and 14 (Web Typography), and if you’re having trouble with positioning even after working through Flexbox (section 8) and Grid (on Medium), try section 9 (Advanced Positioning).
- Email me with any questions, noting that I can help fastest if you include a screenshot and a link. Better yet, create a New Issue! Then my answer to you can help others, too.
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).