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
- 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)
- talk about what DNS is
- show what IP addresses are how DNS works by showing what Google's ip address is
- 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"
- 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)
- 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)
- go to google images or whatever
- pick a file and download it to their desktop
- go use github to upload it
- 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)
- 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
- 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/
- 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
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
- 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;
}
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
"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;
}
Draw wireframes on paper, then try to make the layout follow the wireframes.
- 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)
- on github /foldername/index.html
- talk about relative and absolute urls
Find a site that isn't very user friendly and make an improvement to it.