G5_C5_ForTeacher
HTML List tags, CSS styling
CLASS STRUCTURE
FOR PREPARATION & REFERENCE
|
Activity No: |
Slide No. |
Topic | Time |
|---|---|---|---|
| 1 | 4 | Ice Breaker activity | 2 |
| 2 | 6 | Warm up quiz | 4 |
| 3 | 10-16 | Teacher Activity 1 -2 | 12 |
| 4 | 18-22 | Student Activity 1 -4 | 14 |
| 5 | 23-24 | Student Additional Activity | 5 |
| 6 | 23-24 | Wrap Up Quiz | 3 |
TA : Teacher Activity
SA : Student Activity
SAA : Student Additional ActivityΩ
Topic
Slide
No.
|
Slide No. |
Topic |
|---|---|
| 2 | Class Structure |
| 3 | Class Prerequisites |
| 12-16 | TA Code solution |
| 24 | SAA Code solution |
| 40 | Activity Link |
PRE REQUISITES
FOR TEACHER
-
Computer with internet connection
-
Latest browser installed
-
Repl.it Login credentials
-
Projector to present screen
FOR STUDENTS
-
Computer with internet connection
-
Latest browser installed
-
Repl.it Login credentials
How many ways are there to add CSS in my HTML website?
3 ways
1. Inline CSS
2. Internal CSS
3. External CSS
Which method of adding CSS is shown in the image ?
B. Internal CSS
A. Inline CSS
C. External CSS
Let's move ahead.
Excellent!
Hi, My name is Daisy
***note for Illustrator ***
Daisy waving, in a computer class
About Me Page
Font helps us to change the style of the texts present in the website
***note for Illustrator ***
Daisy standing here and thinking
***note for Illustrator ***
Image of daisy in 3 different dresses
1. School dress
2. Party dress
3. Sports dress
Just like you wear different dresses for different occasions
Adding Borders
***note for Illustrator ***
GIF of a Daisy drawing borders on a paper
Activity
Teacher Activity
Font Examples
Serif
Sans-Serif
Monospace
Cursive
Fantasy
Times New Roman, Georgia, Garamond
Arial, Verdana, Helvetica
Courier New, Lucida Console, Monaco
Brush Script MT, Lucida Handwriting
Copperplate, Papyrus
STEPS TA
1. Click on the Link
2. Click Fork
Teacher Activity
1. Open style.css
Teacher Activity
1. Open style.css
Teacher Activity
Property to specify font of the text
Font name you want to use
Font Family
2. Add font-family property in <h1> tag
3. Similarly add font-family property to <p>, <h1>, and <h3>
Teacher Activity
4. Now we will add borders to our page
Teacher Activity
5. Change layout of page when we click on the image by adding JS component
TA2 link
Teacher Activity
Teacher Activity
Carol is giving 2 coins from her wallet
Text
Student Activity
1. Search for bit.ly/activityc4
2. Click on Fork
Student Activity
Current Output
Expected Output
Student Activity
HINT
show, Carol is giving 3 coins from wallet
Run and Check output
Let's start with Quiz
Wrap Up Quiz
Choose the correct code for changing font in CSS
A. font-change
B. font-family
C. border-style
D. border-color
Which one of the following can be a border style?
A. solid
B. center
C. white
D. <h1>
Additional Challenge
TO DO : Change layout of the entire page with just one click with the help of "script.js"
Additional Challenge Link: bit.ly/C04TAA
Additional Challenge CODE
HINT
| Activity Number | Activity Name | Links |
|---|---|---|
| Teacher Activity | All About Me | https://replit.com/@AkshitSharma8/G5C3TATemplate |
| Teacher Activity Solution | All About Me(Inline CSS) | https://replit.com/@AkshitSharma8/G5C3TAInlineSolution |
| Teacher Activity Solution | All about Me(Internal CSS) | https://replit.com/@AkshitSharma8/G5C3TAInternalSolution#index.html |
| Teacher Activity Solution | All about Me(External CSS) | https://replit.com/@AkshitSharma8/G5C3TAExternalSolution#index.html |
| Student Activity 1 | All About Me | https://replit.com/@AkshitSharma8/G5C3SATemplate |
| Student Activity 1 Solution | All About Me | https://replit.com/@AkshitSharma8/G5C3TAInternalSolution#index.html |
| Student Activity 2 | All About Me(using External CSS) | https://replit.com/@AkshitSharma8/G5C3SAExternalTemplate#index.html |
| Student Activity 2 | All About Me(using External CSS) | https://replit.com/@AkshitSharma8/G5C3TAExternalSolution#index.html |
LINKS
Grade 5 Session 5
By Akshit Sharma
