00:00:00

Web Development From Scratch

Notes

What is this course about?

  • Learn basic HTML5, CSS and Javascript from scratch
  • No pre-requisite necessary
  • Won't teach you everything there is about Web Dev, but enough so you can explore on your own after the course

Notes

1. HTML5

What is HTML5?

  • HTML5 is the latest version of HyperText Markup Language, or HTML
  • It is the language of the Web
  • It describes the structure and content of web pages
  • It is used together with CSS (Cascading StyleSheet) and Javascript to make web pages rich and interactive

By the end of this chapter

  • Make a self profile page

Notes

Starting very simply

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Carl Fredricksen's Profile</title>
  </head>
  <body>
    Welcome to Carl Fredricksen's Profile page!
  </body>
</html>
  • HTML5 is made up of tags that usually come in nested pairs
  • ... like <X> <Y> ... </Y> </X>
  • The top-most tag is <html>, which has two child tags: <head> and <body>
  • <title> is a child tag of <head>
  • Content of the web page goes inside the <body> tag

Notes

A very simple web page

Notes

Images and links

1
2
3
4
5
6
<body>
  Welcome to Carl Fredricksen's Profile page!
  <img src='img/mugshot.jpg'>
  Click <a href='http://pixar.wikia.com/wiki/Carl_Fredricksen'>here</a> 
  to go to my wiki page.
</body>
  • Tags have attributes (or properties), specified like name='value'
  • Did you notice?
    • <img> has no closing tag
    • Browser ignores line breaks. How do we change that?

Notes