Comment on page
1. Introduction
2 hours
- Understand how internet works and browers work
- First experience of making a web page
- Understand role of html/js/css
- Slide deck by Emmanuel
- Infographic How internet works
- Infographic on How browser works
- Html example file can create
Web Development Lesson 1.pptx
698KB
Binary
Slide deck
Web Dev_Lesson 1.pptx
2MB
Binary
Class Ex - As the teacher explain how to perform a task. Then each student individually performs the task on their machine. Once 80% of class has completed task move on.
- Explain how the internet and browser works. Make sure explain browser is chrome/firefox/Safari...
- Explain Html and demonstrate a html page
- What does HTML stand for? Ask class Answer: Hypertext Markup Language: Mark up language so way of describing text and how it should look.
- Explain may ways of creating a website: e.g. can use wix or wordpress which are more drag and drop. But all create HTML, js, and css. And this is what brower reads and unpacks to display info.
- Explain at moment html file browser just unpacking a file like word unpacks a word document. And that file is local. Later file will be online and browser will go to a site to get file (as in diagram)
- Explain opening and closing tags. Closing tag lets the computer know when something ends.
- Explain tag is <...>
- Go through some key tags: Like:<html>, <body>, <head>, <p>, <h1>, <title>, <div><ul>, <ol>, <li>
- Title: shows up on the tab header of the page
- Div: grouping element. Will cover in more depth later in the course but this is one of the most versatile element in html
- List element. Explain difference between <ul> and <ol>.
- Page layout.
<html><head><title>This is a title</title></head><body><div><p>Hello world!</p></div></body></html> - Class Ex: open a webpage. View source (right click>View Page Source) and get them to spot the tags went through
- Visual learning watch this Video:
Class Ex: Walk through (already set up) VS code. Then class to write the code teacher wrote, then add an extra tag of their choosing.
- Explain CSS and demonstrate how css styling can change the background colour / text colourClass Ex Everyone in class do that
- Explain Javascript:
- Demonstrate how to open debug console in chrome
- Write code in chrome console (alert)
- Write a js file and link to html Will discuss more about js tomorrow.Class Ex: Everyone in class do above steps
- Live server:Class Ex Install liveserver plugin and demonstrate how to use to display live updating data. (By e.g. changing the colour of a page)
Class Ex: Recreate the webpage. But each student to add own individual twist from what learnt
Make lesson interactive for example:
- Asking them if know internet works
- Get them to pick the background colour of page
The test student went bit over top and did a website with pics and sound. Was relatively easy homework
Last modified 2yr ago