Recommended
More Related Content
What's hot
What's hot (18)
Similar to Teaching Web Frontend Technologies To A Toddler
Similar to Teaching Web Frontend Technologies To A Toddler (20)
Recently uploaded
Recently uploaded (12)
Teaching Web Frontend Technologies To A Toddler
- 1. -Dotun Longe, Devcribber KIDS + CODE = WIN! FRONT-END LIKE A NATURAL ( TODDLER EDITION )
- 2. There are 3 things that make up today's frontend. Html, CSS and javascript. HTML is where you put the text and other content. CSS makes your website pretty. Javascript adds the magic. like making stuff move, appear and disappear on command.
- 3. This is by far the simplest, kiddo. Open up Notepad, type "I like ice cream" Save it as icecream.html. Open it in your web browser. Viola, You have a Website. HTML (SIMPLE)
- 4. Open up icecream.html in notepad. Delete the content. and add <!DOCTYPE html><html><head></head><body><div><p></p></div> </body></html> HTML (ADVANCED) doctype html =tell the browser, this is a web page. html = we put all html web stuff inside here head = this is where we link our css files. body = this is where we put our stuff. div= think of it as a bucket. p = paragraph <x>y</x> = this is an element. while just the <x> is a tag and anything with a / infront means we closing what we opened.
- 5. Now add "i like ice-cream between the p's" <!DOCTYPE html><html><head></head><body><div><p>I like ice- cream</p></div></body></html> save as index.html inside a folder called ice-cream Now we really have a website. :) HTML
- 6. Open up Notepad Write html,body{height:100% width;100%} .div p {background:blue; color:white;} Save it as style.css In your html, inside the head tag, type <link rel="stylesheet" href="style.css"> now we have a page with styling :) CSS
- 7. Open up Notepad Write document.body.style.backgroundcolor = "red"; Save it as "javascript.js" inside the ice-cream folder In your Html, inside the body tag, right before the closing body tag, i.e"</body>". type <script src="javascript.js"></script> Now we have a page with javascript. JAVASCRIPT
- 8. If You Want To Do More. Or Get Lost/Confused. Get On StackOverflow.com Or just google or your problem. DO MORE