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
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavoLeerjaar 4

Cette leçon contient 46 diapositives, avec quiz interactif et diapositives de texte.

time-iconLa durée de la leçon est: 90 min

Éléments de cette leçon

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 - Diapositive

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 - Diapositive

What did you have done for website until now ?

Slide 3 - Question ouverte

Slide 4 - Diapositive

Week 1: 2 October - 8 October

Slide 5 - Diapositive

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 - Diapositive

Slide 7 - Diapositive

Slide 8 - Diapositive

Slide 9 - Diapositive

Slide 10 - Diapositive

Slide 11 - Diapositive

Slide 12 - Diapositive

Slide 13 - Diapositive

Slide 14 - Diapositive

Slide 15 - Diapositive

RETROSPECTIVE
WHAT WENT WELL IN THE SPRINT
WHAT CAN BE IMPROVED
WHAT ARE YOU ENCOUNTERING IN YOUR DEVELOPMENT

Slide 16 - Diapositive

RETROSPECTIVE
WHAT WENT WELL IN THE SPRINT
WHAT CAN BE IMPROVED
WHAT ARE YOU ENCOUNTERING IN YOUR DEVELOPMENT

Slide 17 - Diapositive

Slide 18 - Diapositive

Slide 19 - Diapositive

Assignment 2: Styling the Homepage

Slide 20 - Diapositive

Slide 21 - Diapositive

CSS

Slide 22 - Diapositive

Assignment 2: Styling the Homepage

Slide 23 - Diapositive

 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 - Diapositive

Slide 25 - Diapositive

Slide 26 - Diapositive

Slide 27 - Diapositive

Slide 28 - Diapositive

Slide 29 - Diapositive

Slide 30 - Diapositive

Slide 31 - Diapositive

ADDING FORM TO HTML

Slide 32 - Diapositive

Slide 33 - Diapositive

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 - Diapositive

Slide 35 - Diapositive

Slide 36 - Diapositive

Slide 37 - Diapositive

Slide 38 - Diapositive

Slide 39 - Diapositive

JAVA SCRIPT

Slide 40 - Diapositive

Slide 41 - Diapositive

Slide 42 - Diapositive

Slide 43 - Diapositive

Slide 44 - Diapositive

Slide 45 - Diapositive

Slide 46 - Diapositive