8. Let’s just have a basic
HTML/CSS course
1 <!DOCTYPE html> 1. This is saying hey I’m a web page
2 <html lang="en"> 2 Here we begin
3 ! <head> 3 The head of this page
4 ! ! <title>Hello World</title> 4 It’s Title is
5 ! </head> 5 End of the head
6 ! <body> 6 The body (under the head :)
7 ! ! <h1>Hello World</h1> 7 Some big heading begins
8 ! ! <p> 8 Then a Paragraph
9 pof! 9 some text in it
10 ! ! </p> 10 End of a Paragraph
11 ! </body> 11 End of the body
12 </html> 12 End of the Document
13. 1. Find the things u don’t want (text is easy) and
erase some blocks (it’s ok if u don’t understand)
2. Refresh the page you’re viewing
3. if bad then undo and try again (goto 1)
4. If looks better keep going...
15. 1. I search for “The nike foundation”
2. Changing it to My MVP
(i also kinda like the Girl
effect I keep it and name it for
dummies)
3. I’ve got
16. Now I need to add a background... (I assume you
don’t know how..)
Just delete some random lines till you find the one that makes it
disappear ... (40 min later if you don’t know html/css)
you’ll find that line
Open and copy the link in Chrome and copy it to a local file style.css
Then change the html file to point to this local file
PS: if you’re lost here, there is nothing I can do for you just read about CSS and HTML on google and come back
17. Now if we open it it looks ugly...
The reason is that the css (style) can’t find the picture used on the original fine
(because the link was local vs absolute) ...
Anyway search for a nice background and add the link in your local css file..
24. Almost there... Now let’s add a
field and a button
after 1 minute I found something like that
<form>
<input name="pof" placeholder="Pof Seattle">
<input type="submit" value="Yeah" class="submit">
</form>
25.
26. Ok let’s find a way to move that
make it bigger and we’re done!
Again Google is your friend (just found that in 40 seconds...)