G5_C4_TeacherCopy
Topic
TA : Teacher Activity
SA : Student Activity
SAA : Student Additional Activity
FOR PREPARATION & REFERENCE
Slide No. |
Topic |
---|---|
2 | Class Structure |
3 | Class Prerequisites |
20-22 | TA Code solution |
37-39 | SAA Code Solution |
41 | Activity Links |
CLASS STRUCTURE
Activity No: |
Slide No. |
Topic | Time |
---|---|---|---|
1 | 4 | 2min | |
2 | 4-6 | 4 min | |
3 | 8-12 | 4 min | |
4 | 13-22 | 10min | |
6 | 23-27 | 5 min | |
7 | 29-31 | - | |
8 | 35-39 | 2 min |
FOR TEACHER
1. Computer with internet connection.
2. The latest browser installed.
3. Projector to present screen.
4. Repl.it login credentials.
FOR STUDENTS
1. Computer with internet connection.
2. The latest browser installed.
3. Repl.it login credentials.
External CSS is used to style the multiple pages of the website
External CSS
Internal CSS
Inline CSS
Internal CSS
External CSS
Inline CSS is used to style multiple components of single webpage
Inline CSS
Without
With
TO DO: Enhancing About Me Page by changing font style and adding borders
Serif
Sans-Serif
Monospace
Cursive
Fantasy
Times New Roman, Georgia, Garamond
Arial, Verdana, Helvetica
Courier New, Lucida Console, Monaco
3. Open style.css
4. Add "font-family" property in "<h1>" tag
Property to specify font of the text
Font name you want to use
Font Family
5. Similarly add "font-family" property to "<p>", "<h1>", and "<h3>". Also change the color of "<p>" tag
Before
After
6. Now we will add borders to our page
Before
After
TO DO: Change the layout of the page when we click on the image by adding a JavaScript component
To Do: Change the layout of the page when we click on the image by adding a JavaScript component
1. Search for bit.ly/activityc4
2. Click on Fork
STEP 1: Align the text to the center
Before
After
Implement changes in the "style.css" file. Align the text to the center.
STEP 2: Add the orange color to the heading and border to the page and the heading
Before
After
Implement changes in "style.css" file. Add the "border-style" and "border-color" to "body" and "h1"
STEP 3: Change the font of the heading tag
Implement changes in the "style.css" file. Choose the font by adding "font-family" feature to the "h1", "h3", and "p" tag
Before
After
"Solid" is the type of border style that is used in CSS. Some other border styles are, dotted, dashed, and double.
center
solid
white
font-change
border-style
font-family
TO DO: Change the layout of the entire page with just one click with the help of the "script.js" file
Additional Activity 1 Link: bit.ly/C04TAA1
Text Alignment is Center
Background Color is Darkblue
Text Color is white
h1 color is orange
<h3> is Yellow
TO DO: Change the layout of the entire page with just one click with the help of the "script.js" file
TO DO: Change the style of the "My School" page as shown below
TO DO: Change the style of the "My School" page as shown below
Activity Name | Links | |
---|---|---|
Teacher Activity 1 | Add Border & Font |
|
Teacher Activity 1 Solution | Add Border & Font |
|
Teacher Activity 2 | Add onclick function |
|
Teacher Activity 1 Solution | Add onclick function | |
Student Activity 1 | Add Border & Font |
|
Additional Activity 1 | Add onclick function | |
Teacher Reference Additional Activity 1 Solution |
Add onclick function | |
Additional Activity 2 | Add onclick function | |
Teacher Reference Additional Activity 2 Solution |
Add onclick function |