So, you want to be a web developer? These are my notes on one-on-one teaching of web developement
Lesson 1 (2.5 hours) 4 October
I'm happy to help you build a website, but first you'll need to understand some basics. Let's start with your favorite website, what actually happens when you load it up in your browser?
Steps to load a website http://p2pu.org
- Type in the domain name
- Press go
- Profit!
Great, you can load a page. But can you explain what happens when when you press go? I know you won't remember all of this, but I'll mention it now as it's the base for why things work the way they do.
Topics covered in depth.
- Abstraction is key, it's used to separate responsibility
- This is a recurring theme, I always point it out along the way
- Quick review of the 7 layers of OSI model... pointing out things that the student is already familiar with
- Interfaces are defined, each application follows a specific language and doesn't care who/what it is talking to as long as it speaks the same language.
- Example: wireless and wired networks work the same way, with the same software
- Webpages are documents
- Your browser is a client, it asks for documents by name
- Servers are responsible for delivering the documents
- We need to make a request and then the page is rendered locally
- Request steps
- You request a URL
- Your browser opens up a connection via an operating system call
- Operating system looks up IP address
- local, router, and ISP caches
- domain registrar
- name server
- A record
- inspect using dig, ping
- Connection established on port 80
- ports aren't physical things
- ways to handle multipe types of connections at the same address
- TCP/IP
- reliable transport
- as opposed to UDP (ex audio/video streaming)
- Browser requests a document using HTTP
- Verb - explain what each is used for
- GET
- POST
- PUT
- DELETE
- There are more, but we won't cover them, you can read more if you're interested
- Requests are made for documents, the Verb specifies action to take
- demonstrate with telnet
- Server responds with document and headers
- Browser requests additional assets
- web pages are made up of lots of assets
- demonstrate with inspector network tab
- Browser renders the page
- What makes a webpage?
- Content - Stuff the requester cares about
- Structure - Markup
- Style - CSS
- Activity: Make some content
- Save as .html
- Open in a browser
- Notice content, but it's all on one line, no spacing
- What is a tag - adds structure
- Starts like this <p>
- Ends like this </p>
- Things go inside, <p>like this</p>
- Basic tags
- <h1>..<h6>
- <p>
- <blockquote>
- <ol> <ul> <li>
- Activity: Mark up your content
- Save as .html
- Open it in a browser
- Viola now it looks like a document, spacing headings are bigger etc
- Basic CSS
- Selectors for elements
- Properties
- like this p { color: red; }
- color
- background
- padding
- margin
- border
- width
- height
- Activity: Style your content
- give the heading a background color
- add space between paragraphs
- put a border around your blockquote
- Using ids
- What if you want to style just one p, not all of them in your document?
- name it with an id
- style it with an id selector
- Web inspector
- Each element gets a box
- Box has
- width
- height
- border
- padding
- margin
Things we didn't cover in the first lesson (on purpose)
Themes
- Abstraction
- Separation of responsibility
- Interfaces
- Pages are documents
- Separation of structure and style
Student Notes from Lesson 1:
Firstly i dont know if its important
but i remeber the talk about Layers of the web - that was interesting for me.
Second. I am getting them bullendpoints kind like a mindmapping.
Biggest part for me was in a our converestion, asking and heaving answer.
It was all included on them things you wote, but i guess its verry important
issue about our learning.
What was amazing as i know now- You'd showed me how html and css
are working together and which things goes here and there.
Linked in that shape of abstraction.
Lesson 2 (2.5 hours) 8 October
- Formatting/whitespace is important
- Always properly indent
- Wax on / Wax off
- Box Model
- Block Elements
- Inline Elements
- Introduced <div> element
- CSS float property
- CSS classes
- Selectors
- Classes
- IDs
- pseudo
- :before
- :after
- :hover
- :active
- What does cascading really mean
- Use broad stroaks at first with element styling
- Use classes to style many similar elements
- Use ids to style specific elements
- Browsers have default CSS rules
- Some people use resets
- example reset
- including multiple css files (order matters)
Student Notes from Lesson 2:
We started with some questions you had, what were they about?
1. I knew that i have a mess in html file wich is cousing css problems
and i wantet to have it pointed in a way wich shows me a structural thinking
of what im wrinting in html and how i manage this content in css
2. For me, typography is a verry important thing so i had couple questions
here. Margins, padding - differences when its about txt content.
3. How to make "text content" going from left to right in a boxes. My experiments
after first lesson showed me that there is only one way top - bottom :)
Float - and using it.
4. How tu use small images, and if I need to use them, maybe i can write them in html&css
5. Using web fonts - google fonts
6. I dont know how to say but MOST important thing was cleat the knowlesge aout using
html tags in connection with cms tags. Basicly whole 2nd lessons was about that.
I would call it html to cms optimalization.
There was a lot things about that point its hard to write about them now.
I think it would be easier after some exercises :]
7. Resets - i know from now that browsers are "involved" in your cms
giving styles to your <h's> ets. And i know that google has answeres here.
These are the reset css files and i know how to include them in html
8. I know about file paths - how to include them in html codes
a) http://file
b) /file
c) file.
9. I strongly believe that a "purist" way of making html and css its best way to
learn. Its more than classical - for me its essential knowlege. On time, fresh,
without errors (they are some prob.) easy to find.
10. Using chrome inspector - thats a first and a second lesson. Verry helpfull tool
after 2nd lesson i know a lot more, i know how to seek errors and its easier
to see what im doing.
Idea for exercise after 2nd lesson:
Target: Heaving stucture way of thinking about html&css
improved&remebred.
Method: Writing same layout of a page, but constructed by rectangles
Analizing layout while working on rectangled-copy
PROBLEMS:
1. margin&padding - positioning headline <h1>
- i dont know why adding margin to h1 moves whole #main down
- found solution - cheeting :(
2. can't remember what's class but im using it
3. dont know why im using "clear" in footer css
- i remember - float :)
4. can't place footer :/
NOTES AFTER: i was hopin' it'll tooks me much less time :)
idea of structure a lot better
div's are hard to see on html i need some guides in tm
TARGET: ACHIEVED :]
Things i've learnt today:
Im a lot closer to have this thing called structure in my mind.
For me was v.hard to see it in tags <tag>
I've learnt how i can use divs and id's witch made my last lesson
kind of structured?
Firs lesson left a bit of mess in my head, divs,p's... etc.
how many ia can use? how to put them together and where they should be.
I wasnt shure about this after first, but i;ve noticed their existance and like 50%
about meanind and use.
Todays lessons took all the experience from firstope and puted in shape.
Now i can imagin in my head structure of a squares and rectangles and they all together
are making "website" a sketch of it. And i can name them as div's, p's, id's, containers etc..
I know ho to name this "sections" and how to manage them to have a clear look on
what im going to make
Student Notes from Lesson 2:
- Questions about footer sticking to the bottom of the page
- using padding instead of margin to get the background color of a header
- structure of a page exercise with empty elements and background colors, reproduced from memory... without viewing in a browser
- proper webpage for a design shop, images, fonts, selectors (how to use classes and ids together to write less code)
- margins from left to right add, but top to bottom do not, they use the greater of the two
Lesson 3 (2.5 hours) October 11
Questions:
How do I make a "back" button?
- Don't make "back" the browser has a back button, you can do it with javascript... prefer a button to go back to home page
- How do I link to subpages
- We covered relative and absolute paths briefly /page.html vs page.html
- How to veritcally and horizontally center a div
-----
- CSS display property
- example, building a drop down menu, start with nested list structure and use CSS hover pseudo element
- What is Javascript, jQuery
Student Notes from Lesson 3: