Website Development

Web Development Session
Year 12 CS
1 / 19
next
Slide 1: Slide
ComputingFurther Education (Key Stage 5)

This lesson contains 19 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 120 min

Items in this lesson

Web Development Session
Year 12 CS

Slide 1 - Slide

KO: To know how to create a website using Web Development tools.
All
  • To understand why we need key components such as HTML, CSS and JavaScript in a website.
  • To be-able to create a website using HTML & CSS.
Most 
  • To be-able to create a website using HTML and CSS, whilst understanding why they are needed.
Some
  • To be-able to create a website in HTML that has built-in interactivity using JavaScript and has effective CSS.

Slide 2 - Slide

Starter
What acronyms do you already know, that are associated with Web Development?

Slide 3 - Slide

Websites that we shouldn't be creating as Website Developers

Slide 4 - Slide

What is HTML?
Do we know what HTML stands for and it's place in Web Development?


Slide 5 - Slide

HTML stands for Hypertext Markup Language, which is a standard markup language used to create web pages. HTML provides a structure for web pages by defining the elements and attributes that make up a webpage, such as headings, paragraphs, images, and links.

Slide 6 - Slide

What is CSS?
Do we know what CSS stands for and it's place in Web Development?


Slide 7 - Slide

CSS stands for Cascading Style Sheets, which is a style sheet language used to describe the presentation of a web page. CSS is used to control the visual appearance of HTML elements on a web page, such as the colors, fonts, layouts, and sizes.

Slide 8 - Slide

What is JavaScript?
What is JavaScript and what is its place in Web Development?


Slide 9 - Slide

JavaScript is a scripting language used to add dynamic and interactive features to web pages. JavaScript allows web us to add functionality to a website that can respond to user interactions, such as clicking a button, submitting a form, or scrolling the page.

Slide 10 - Slide

What can we use to create our websites?

Slide 11 - Open question

Now, let's have a go at creating our own!

Slide 12 - Slide

HTML Template
<!doctype html> <!-- --!>
<html>
<head>
<title>Our Amazing HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>
<body>
Content goes here.
</body>
</html>


Slide 13 - Slide

Extension Task 1
Can you find a way of making your navigation bar on your website, look better?

Maybe a 'drop down' navigation?

Useful link

Slide 14 - Slide

Extension Task 2
Could you find a way to make a gallery on your website?

Useful link

Slide 15 - Slide

Plenary

Slide 16 - Slide

In order for our HTML document to work, what do we need to make sure we have declared?

Slide 17 - Open question

In order for our CSS and JavaScript to work, what do we need to make sure we have done?

Slide 18 - Open question

Why is it important to have 'ALT' tags on our images?

Slide 19 - Open question