Web design 101 walkthrough

Goals:

reduce overwhelming feelings
quick wins and ways to show off and share what they're learning
understanding concepts rather than "doing it right"
build on what they learn
for reference, use https://developer.mozilla.org

Register domains

Create Dnsimple accounts for each student in advance
Get them logged in.
Allow them to register one cheap domain (.xyz, .rocks, .ninja, .name, .uno, .one, .space, .pics, .top)

DNS

talk about what DNS is
show what IP addresses are how DNS works by showing what Google's ip address is

making your first repo on github

create a github account
click "+" in top right > new repository (might just give them an option to create an account from the "empty account screen" when they first log in)
name the repo whatever they registered their domain name to be. (justinbrault.work)
optional give it a description
check the box "initialize with a readme"

show how editing in github works

click the readme file
click the edit pencil
make some change (might be good to show a markdown reference for those who want to get fancy)
commit changes (green button at at bottom, ignore the other stuff)

show how adding a file in github works by adding CNAME file with domain name

go back to top of project (click the name of the project next to your username at the top left of the window)
create new file
name the file "CNAME" (exactly like that, and with no extension)
contents of the file should be exact name of domain name
commit new file (green button at at bottom)

show how uploading a file in github works

go to google images or whatever
pick a file and download it to their desktop
go use github to upload it

add a new file so your website shows something when it's live

go back to project root (click project name next to their name)
create new file
name it "index.html"
contents of the file: some kind of "hello world" message and their name (just text, no html)

enable github pages on site project

click settings tab
scroll down to github pages
select source > change from "none" to "master branch"
save
(don't touch "theme chooser")
double check that your custom domain shows up there

enable github pages for domain

dnsimple > whatever domain they registered > dns > one click services > manage services > hosting > github pages (subdomain should be their github username), which will set up a gh-pages site for your domain
NOTE: in the future, other projects can go on other subdomains via manual configuration in dnsimple (CNAME config in DNS, plus file) see for docs https://help.github.com/articles/setting-up-a-custom-subdomain/

start a new html project in jsbin

log in with your github account to jsbin
use jsbin to create html file, do css embedded in <style>
just focus between elements
teach about open/close html tags
Just do everything as divs. Don't worry about memorizing or learning HTML elements yet
add index.html file to github

basic css

Then make a basic style for ALL divs like:

div { 
    color: green;
}

But what if you want to style them differently?

add another:

div {
    color: red;
}

See how it takes the last item as the "final" version?

add this:

div {
    color: blue;
}

above the red one and it doesn't do anything

What's CSS?

CSS stands for CASCADING style sheets. ("style" is how your site looks.)
the "cascade" is like a waterfall, the instructions for how to style your site have a very specific way of flowing downhill
this cascade can be confusing to people because it's not just "last" that "wins" which instructions "stick".

try adding "!important" to the end of the "blue" css instruction in the middle

div {
    color: blue !important;
}

What's really !important?

Lots of developers say never to use "!important" because it's too easy to fall into the trap of misunderstanding how the cascade is working but for us, it's helpful to see a little more how this works.

If we leave it on blue and we now add !important to "green", what happens? it stays the same but add it to "red" and it changes

This is why we don't want to just use "!important" for everything cos if everything is important than nothing is! we're back where we started.

We need a better way of being more specific

Let's get specific

"Specificity" is the term for how the computer knows what we really want when it gets conflicting instructions

So let's remove all the "!important" bits and do this a little more helpfully.

The primary way we tell the computer how we want to style stuff is with "classes"

Think of a class as a group. if we said, "every one in this class is going to wear red bowties tomorrow!" (and we did that) then we'd work kind of how css classes do. we'd all wear red bowties. that wouldn't mean anyone outside this class would wear red bowties, because it was just our class doing it.

Let's see how that works with css

In html, "class" is how we indicate a class, but in css it's a dot! (like this: ".")

So we add a class to one of our divs.

Classes can be whatever we want to call them, but they should be made up of letters and alloneword. hyphens are ok

Let's add class="fancy" to a div like this

(You only have to do it at the front part, not the closing element.)

Now let's add a class in our css. It looks like this:

.fancy {
    color: orange;
}

Stubbed out topics

Talk about CSS and fonts

Talk bout adding images and styling those in css

Box model and layout stuff with css

Draw wireframes on paper, then try to make the layout follow the wireframes.

Special elements - forms

The rest of the elements

Most html elements are about meaning
Accessibilty and meaning worth talking about here (screen readers)
CSS style override / css resets to make everything look uniform until it's been intentionally styled (just like your first div's)

Understanding stuff that goes in the : title, meta tags, etc

Move styles to a styles.css file added to github

Adding multiple pages

on github /foldername/index.html
talk about relative and absolute urls

sockdrawermoney/web-design-walkthrough.md