Web Site for Teachers

STARTKLAAR

Phones Away in Your Bag or Pocket
Take Off Your Coat and Sit in Your Seat
Sit in Your Assigned Seat (If Applicable)
Name Tag on the Table
Keep Your Laptop Closed
Notebook on the Table
Push Your Chairs in When Leaving the Classroom

1 / 46

Slide 1: Slide

InformaticaMiddelbare schoolhavoLeerjaar 4

This lesson contains 46 slides, with interactive quiz and text slides.

Lesson duration is: 90 min

Items in this lesson

STARTKLAAR

Phones Away in Your Bag or Pocket
Take Off Your Coat and Sit in Your Seat
Sit in Your Assigned Seat (If Applicable)
Name Tag on the Table
Keep Your Laptop Closed
Notebook on the Table
Push Your Chairs in When Leaving the Classroom

Slide 1 - Slide

LEARNING OBJECTIVES

HTML: The structure (skeleton) of the webpage.
CSS: The styling (appearance) of the webpage.
JavaScript: The interaction and functionality of the webpage.

Slide 2 - Slide

What did you have done for website until now ?

Slide 3 - Open question

Slide 4 - Slide

Week 1: 2 October - 8 October

Slide 5 - Slide

Week 1: 2 October - 8 October

Assignment 1: Basic HTML Structure
Objective: Create the basic structure for the homepage of the website.

Instructions:

Create a homepage with a navigation bar, a heading, and a section that describes how the website connects teachers and schools.

Add placeholders for the About Us, Teacher Registration, and School Login sections.

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

RETROSPECTIVE

WHAT WENT WELL IN THE SPRINT

WHAT CAN BE IMPROVED

WHAT ARE YOU ENCOUNTERING IN YOUR DEVELOPMENT

Slide 16 - Slide

RETROSPECTIVE

WHAT WENT WELL IN THE SPRINT

WHAT CAN BE IMPROVED

WHAT ARE YOU ENCOUNTERING IN YOUR DEVELOPMENT

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Slide

Assignment 2: Styling the Homepage

Slide 20 - Slide

Slide 21 - Slide

CSS

Slide 22 - Slide

Assignment 2: Styling the Homepage

Slide 23 - Slide

CSS styling

Resetting margins and padding with box-sizing for consistent layout.
Styling the navigation bar: Use flexbox to align navigation links horizontally.
Headings and section styling: Add padding and center-align text to ensure content is easy to read.

Slide 24 - Slide

Slide 25 - Slide

Slide 26 - Slide

Slide 27 - Slide

Slide 28 - Slide

Slide 29 - Slide

Slide 30 - Slide

Slide 31 - Slide

ADDING FORM TO HTML

Slide 32 - Slide

Slide 33 - Slide

Adding into entire HTML

Step 1: You already have the basic structure of your webpage, with sections like Home, About Us, and placeholders for Teacher Registration and School Login.

Step 2: Find the Teacher Registration section where we previously had a placeholder (<p>[Placeholder for Teacher Registration form]</p>).

Step 3: Replace the placeholder with the Teacher Registration form, which includes input fields for Name, Subject, Experience, and Email.

Step 4: The form is now embedded into the main webpage, allowing teachers to fill it out directly on the website.

Slide 34 - Slide

Slide 35 - Slide

Slide 36 - Slide

Slide 37 - Slide

Slide 38 - Slide

Slide 39 - Slide

JAVA SCRIPT

Slide 40 - Slide

Slide 41 - Slide

Slide 42 - Slide

Slide 43 - Slide

Slide 44 - Slide

Slide 45 - Slide

Slide 46 - Slide