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 | 8-13 | 4 min | |
3 | 14-22 | 4 min | |
4 | 23-27 | 5min | |
6 | 29-33 | 10 min | |
7 | 34-36 | 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 a single webpage.
Inline CSS
Serif
Sans-Serif
Monospace
Cursive
Fantasy
Times New Roman, Georgia, Garamond
Arial, Verdana, Helvetica
Courier New, Lucida Console, Monaco
Without
With
TO DO: Enhancing "All About Me" page by changing font style and adding borders
3. Open the style.css file.
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.
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
TO DO: Change the layout of the entire page with just one click with the help of the "script.js" file
Additional Activity 1:
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.
"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
Activity Name | Links | |
---|---|---|
Teacher Activity 1 | Add Border & Font |
|
Teacher Activity 1 Solution | Add Border & Font |
|
Teacher Activity 2 | Add onclick function |
|
Teacher Activity 2 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 |