codejika.com project 1 project 1...purpose: teach yourself. teach your friends. help others. learn:...
TRANSCRIPT
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 1
PROJECT 1YAAAAAYYYYY!
CODEJIKA.COM
INTRO GUIDE
PURPOSE: Teach yourself. Teach your friends. Help others.
LEARN: The practical skills of a Jnr. Web Developer over 12 Projects.
WHAT’S THE DEAL?
PROJECT 1: Introduces you to building a website. The outcome is a simple, colorful landing page.
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 2www.codejika.com
Desktop - Version 1
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
SO EXCITED!
2019 Copyright Code for Change | Ultimate Growth 3www.codejika.com
Ready to start a new chapter of
your life?
2019 Copyright Code for Change | Ultimate Growth 4www.codejika.com
Start by opening “Notepad” on
your PC.
2019 Copyright Code for Change | Ultimate Growth 5www.codejika.com
ACTION:CHALLENGESTEP 1
1. Click “Start”.
WINDOWS PC:
2. Type “Notepad”Open Notepadon your PC.
3. Open Notepad.
2019 Copyright Code for Change | Ultimate Growth 6www.codejika.com
ACTION:CHALLENGESTEP 2
1. Click “File”.
NOTEPAD:
2. Click “Save”.Save a file in notepad. 2
1
2019 Copyright Code for Change | Ultimate Growth 7www.codejika.com
ACTION:CHALLENGE
STEP 3
1. Type your name and .htmlat the end.
2. Click “Save”.
NOTEPAD:
Save an .html file.
1
22019 Copyright Code for Change | Ultimate Growth 8www.codejika.com
GOOD JOB!
Now add a <h1> with your name in it.
2019 Copyright Code for Change | Ultimate Growth 9www.codejika.com
CODE:CHALLENGESTEP 1 In Notepad type <h1> and your
name. Close it with </h1>.
<h1>Your name
</h1>
TIP: Notice the / ?
E X A M PL E :
2019 Copyright Code for Change | Ultimate Growth 10www.codejika.com
Good programmers know lots of keyboard shortcuts.
Learn your first one.
2019 Copyright Code for Change | Ultimate Growth 11www.codejika.com
REVIEW:CHALLENGE
STEP 21. Click “File”.
NOTEPAD:
2. Click “Save”.
Learn a keyboard shortcut for “Save”.
Save your file: Ctrl + S
TIP: Hold down the “Ctrl” key and hit the “S” key at the same time.
SHORTCUT:
2019 Copyright Code for Change | Ultimate Growth 12www.codejika.com
ACTION:CHALLENGE
STEP 3
1. Double click on the file you saved on the Desktop.
BROWSER:
View your saved .html file.
TIP: If you saved it with .html it should open in a web browser.
Your file name should be: name.html NOT .txt
2019 Copyright Code for Change | Ultimate Growth 13www.codejika.com
CHECKPOINT
Your browser should look something like this:( With your name. )
BROWSER :
2019 Copyright Code for Change | Ultimate Growth 14www.codejika.com
THINKHow do you see
changes you’ve made to your html file?
2019 Copyright Code for Change | Ultimate Growth 15www.codejika.com
Here’s a simple way.
2019 Copyright Code for Change | Ultimate Growth 16www.codejika.com
BRIEFING 1.1.2
1 of 2See Changes
See changes in your browser:
1. Save your file.
2. Refresh your browser.
2019 Copyright Code for Change | Ultimate Growth 17www.codejika.com
BRIEFING 1.1.2
2 of 2See Changes Refresh the browser:
1. Click anywhere on it (to select it.)
2. Hit the Short-cut key: F5
TIP: F5 is on the top row of your keyboard.2019 Copyright Code for Change | Ultimate Growth 18www.codejika.com
ACTION:CHALLENGE
1. Change some of the text in the <h1>.
2. Save it. ( Ctrl + S )
3. Refresh browser & see changes. ( F5 )
BROWSER:
Modify code, save & view it.
2019 Copyright Code for Change | Ultimate Growth 19www.codejika.com
GREAT!
You’re almost done the INTRO LESSON.
2019 Copyright Code for Change | Ultimate Growth 20www.codejika.com
You want to see three things on your desktop (screen) :
1. Slides ( These slides )
2. Code Editor ( Notepad++ )
3. The Results ( In the browser )
Here’s how some people do it…2019 Copyright Code for Change | Ultimate Growth 21www.codejika.com
22
Write code in the notepad and see the output the browser.
Preview -BROWSER
Slides - ADOBE READER
Editor - NOTEPAD++
SETUP YOUR DESKTOP:
2019 Copyright Code for Change | Ultimate Growthwww.codejika.com
Want to know how the curriculum works?
2019 Copyright Code for Change | Ultimate Growth 23www.codejika.com
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 24
1.
CURRIC | HOW IT WORKS?
BRIEFINGSLIDES
Give you information.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 25
2.
CURRIC | HOW IT WORKS?
CHALLENGESLIDES
Tell you what to do.
When you see yellow – It’s time to take action.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 26
3.
CURRIC | HOW IT WORKS?
CHECKPOINTSLIDES
Check your work.
BRIEFING 1.1.2
2 of 2See Changes Refresh the browser:
1. Click anywhere on it (to select it.)
2. Hit the Short-cut key: F5
TIP: F5 is on the top row of your keyboard.2019 Copyright Code for Change | Ultimate Growth 27www.codejika.com
To allow you to dream of building digital tools for
your community.
Our Mission:
2019 Copyright Code for Change | Ultimate Growth 28www.codejika.com
And provide you with the tools to do so.
BUT WAIT,…
2019 Copyright Code for Change | Ultimate Growth 29www.codejika.com
Say I close down notepad.
When I open my file, it only opens in the internet browser.
What if I want to add more code?
BRIEFING 1.1.2
1 of 2Open with
How to edit .html files?
TIP: Remember where you saved your file?2019 Copyright Code for Change | Ultimate Growth 30www.codejika.com
METHOD A:1. Right-click on the .html file.
2. Click on Open with.
3. Click on Notepad.
2
1
3
BRIEFING 1.1.2
2 of 2Open with
How to edit .html files?
TIP: Remember where you saved your file?2019 Copyright Code for Change | Ultimate Growth 31www.codejika.com
METHOD B:
1. Click Notepad .2. Click File .3. Click Open… .4. Find your file.
Click Open.
21
Take a quick quiz...
2019 Copyright Code for Change | Ultimate Growth 32www.codejika.com
What’s a shortcut to save a file?QUIZ
F5
Ctrl + S
Click “File” then “Save”.
<h1>
QUESTION 1.1
A.
B.
C.
D.
1. 2.
2019 Copyright Code for Change | Ultimate Growth 33www.codejika.com
What’s a shortcut to refresh your browser?
Ctrl + S
Click “File” then “Refresh”.
F5 key on the top row.
Click “Start”
QUESTION 1.2
A.
B.
C.
D.
1. 2.
PREVIOUS ANSWER: B.
QUIZ
2019 Copyright Code for Change | Ultimate Growth 34www.codejika.com
1. 2.
PREVIOUS ANSWER: C.
WHAT WAS YOUR SCORE?
50% 100%
QUIZ
2019 Copyright Code for Change | Ultimate Growth 35www.codejika.com
FANTASTIC!
Now you’re ready to get started with Training 1.
2019 Copyright Code for Change | Ultimate Growth 36www.codejika.com
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 37
LOADING . . .
PURPOSE: Teach yourself. Teach your friends. Help others.
LEARN: The practical skills of a Jnr. Web Developer over 12 Projects.
WHAT’S THE DEAL?
PROJECT 1: Introduces you to building a website. The outcome is a simple, colorful landing page.
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 38www.codejika.com
PROJECT 1
Training 1
Desktop – v13
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
PROJECT 1
1. Structure <body> // <h1>, <h3> & <p>
2. CSS <style> // Type Selector
3. Page Sections // Header, Section & Footer
4. <div> // Fonts, borders & padding
TRAINING SESSIONS:
2019 Copyright Code for Change | Ultimate Growth 39www.codejika.com
Let’s start with the page structure.
2019 Copyright Code for Change | Ultimate Growth 40www.codejika.com
Add a HTML structure to a new file.
…
MISSION
This mission will include 4 challenges.
2019 Copyright Code for Change | Ultimate Growth 41www.codejika.com
1.1.2
TIP: Remember this.
<head>
</head>
<body>
</body>
HTML STRUCTURE:
2019 Copyright Code for Change | Ultimate Growth 42www.codejika.com
REMEMBER
What’s the structure of a website?
2019 Copyright Code for Change | Ultimate Growth 43www.codejika.com
GREAT!
Now add a <head> section.
2019 Copyright Code for Change | Ultimate Growth 44www.codejika.com
CODE :
CHALLENGESTEP 1
Add: <head></head>
In the code editor.
2019 Copyright Code for Change | Ultimate Growth 45www.codejika.com
Add a body section below your head section.
CODE :
Check the “Structure” slide.T IP :
CHALLENGESTEP 2
2019 Copyright Code for Change | Ultimate Growth 46www.codejika.com
CHECKPOINTYour code should look something like this:
CODE :
<head></head>
<body></body>
2019 Copyright Code for Change | Ultimate Growth 47www.codejika.com
NICE.
Let’s add some content now.
2019 Copyright Code for Change | Ultimate Growth 48www.codejika.com
DEFINITION
A “Landing Page” is a simple, one-pagewebsite.
It tells visitors that the main website is launching soon.
LANDING PAGE
2019 Copyright Code for Change | Ultimate Growth 49www.codejika.com
BRIEFING <h1> </h1>
<h1> My Name
</h1>
EXAMPLE:
1. Is used for the largest text on your page.
2. Goes in the <body> section.
1.1.2
<h1> Tag
2019 Copyright Code for Change | Ultimate Growth 50www.codejika.com
REMEMBER
What’s the <h1> used for?
2019 Copyright Code for Change | Ultimate Growth 51www.codejika.com
CODE :CHALLENGE
STEP 4
Type an opening & closing<h1> tag.
In the <body> section.T IP :
2019 Copyright Code for Change | Ultimate Growth 52www.codejika.com
CODE :CHALLENGE
STEP 5
Insert your First & Last name between the <h1>tags.
Check the example in the <h1> briefing. T IP :
2019 Copyright Code for Change | Ultimate Growth 53www.codejika.com
Now we’re going to learn about tags.
2019 Copyright Code for Change | Ultimate Growth 54www.codejika.com
READY?
2019 Copyright Code for Change | Ultimate Growth 55www.codejika.com
Think of tags as taps.
If you open a tap (tag) close it.
BRIEFING1.1.3
1 of 3Tags
<h1>
Open Close
</h1> 2019 Copyright Code for Change | Ultimate Growth 56www.codejika.com
<h1> My name</h1>
<div>
</div>
EXAMPLE:
To close, put “/” (a backslash) in front of the closing tag name.
BRIEFING1.1.3
2 of 3TagsOpen
Close
Open
Close
2019 Copyright Code for Change | Ultimate Growth 57www.codejika.com
GOOD!
You learned about tags.Now let’s move on.
2019 Copyright Code for Change | Ultimate Growth 58www.codejika.com
<body><h1> My Name
</h1><h3> Launching Soon…</h3>
</body>
EXAMPLE:
<h3> is used mainly for subtitles.
BRIEFING1.1.4
<h3> </h3><h3> Tag
2019 Copyright Code for Change | Ultimate Growth 59www.codejika.com
REMEMBER
What’s <h3> used for?
2019 Copyright Code for Change | Ultimate Growth 60www.codejika.com
CODE :CHALLENGE
Write: “Launching Soon…” between <h3> tags.
Below <h1> .WHERE :
2019 Copyright Code for Change | Ultimate Growth 61www.codejika.com
CODE :CHALLENGE
Write: “Launching Soon…” between <h3> tags.
Below <h1> .WHERE :
2019 Copyright Code for Change | Ultimate Growth 62www.codejika.com
BRIEFING <p> </p>
<body><p>My stuff...
</p></body>
EXAMPLE:
1. Stands for “paragraph”. 2. You can have lots of <p> tags
in your site.
1.1.2
<p> Tag
2019 Copyright Code for Change | Ultimate Growth 63www.codejika.com
REMEMBER
What’s the <p> used for?
2019 Copyright Code for Change | Ultimate Growth 64www.codejika.com
CODE :CHALLENGE
Add a <p> with today’s date.
Below <h3> .WHERE :
<p>10 October, 2021
</p>
EXAMPLE:
2019 Copyright Code for Change | Ultimate Growth 65www.codejika.com
CHECKPOINTYour code should look something like this:
<!DOCTYPE html>
<head></head>
<body><h1>Your Name
</h1><h3>Launching soon...
</h3><p>10 October, 2021
</p> </body>
2019 Copyright Code for Change | Ultimate Growth 66www.codejika.com
CHECKPOINTAnd your websitelike this:
2019 Copyright Code for Change | Ultimate Growth 67www.codejika.com
CONGRATULATIONS
You’ve finished Training 1.
2019 Copyright Code for Change | Ultimate Growth 68www.codejika.com
Set a time every day to do coding.
Twice per week is fine too.
SCHEDULE IT.
2019 Copyright Code for Change | Ultimate Growth 69www.codejika.com
Ready to start Training 2?
2019 Copyright Code for Change | Ultimate Growth 70www.codejika.com
THINKWho do you want
to make a website for?
TIP: A sister, a brother, small business, a celebrity, a project of your own, your class or your school.
2019 Copyright Code for Change | Ultimate Growth 71www.codejika.com
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 72
LOADING . . .
PROJECT 1
Training 2
PURPOSE: Teach yourself. Teach your friends. Help others.
LEARN: The practical skills of a Jnr. Web Developer over 12 Projects.
WHAT’S THE DEAL?
PROJECT 1: Introduces you to building a website. The outcome is a simple, colorful landing page.
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 73www.codejika.com
Desktop – v2
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
AWESOME!
Are you ready to JIKA*?
2019 Copyright Code for Change | Ultimate Growth 74www.codejika.com
*party
PROJECT 1
1. Structure <body> // <h1>, <h3> & <p>
2. CSS <style> // Type Selector
3. Page Sections // Header, Section & Footer
4. <div> // Fonts, borders & padding
TRAINING SESSIONS:
2019 Copyright Code for Change | Ultimate Growth 75www.codejika.com
Before we start, here’s a quick
overview:
2019 Copyright Code for Change | Ultimate Growth 76www.codejika.com
PROJECTS OVERVIEW:
1. Simple Landing Page // 4 Sessions | 90 Minutes
2. CV Website // 6 Sessions | 90 Minutes
3. Simple Biz Website // 6 Sessions | 2.5 Hours
4. Styling your Website // 4 Sessions | 3 Hours
2019 Copyright Code for Change | Ultimate Growth 77www.codejika.com
5. JavaScript OrderForm // 4 Sessions | 3 Hours
6. Basic Business Website // 5 Sessions | 4 Hours
<Certificate> Milestone
Project
1. Learn CSS structure.
2. Add some text in an <h3>.
3. Learn <i> & <br>
TRAINING SNAPSHOTThese are your missions for today:
PROJECT 1 – TRAINING 2
2019 Copyright Code for Change | Ultimate Growth 78www.codejika.com
1.1.2
<!DOCTYPE html>
<head><style></style>
</head>
<body>
</body>
HTMLSTRUCTURE
2019 Copyright Code for Change | Ultimate Growth 79www.codejika.com
REMEMBER THIS?
1.1.2
2019 Copyright Code for Change | Ultimate Growth 80www.codejika.com
CSS is the STYLE ( BLING )
<style>
h1 {
color: pink;
}
</style>
CSSCascading Style Sheets
BRIEFINGCSS Basics
1. Add a <stlye> section.2. Style the <h1> using CSS.
. . .
MISSION
This mission will include 3 challenges.
2019 Copyright Code for Change | Ultimate Growth 81www.codejika.com
BRIEFING <style> </style>
<head><style>
</style></head>
EXAMPLE:
1. All code in the <style> section is CSS.
2. <style> goes in the <head>.
1.1.2
<style> Tag
2019 Copyright Code for Change | Ultimate Growth 82www.codejika.com
REMEMBER
Where does the <style>section go?
2019 Copyright Code for Change | Ultimate Growth 83www.codejika.com
Add a <style> section.CODE :
Remember to close the <style> tag.
T IP :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 84www.codejika.com
DID YOU KNOW?
CSS code is slightly different then HTML?
2019 Copyright Code for Change | Ultimate Growth 85www.codejika.com
CSS uses cute “curly brackets” { } to wrap the
style.
MEMORY JOGGER
2019 Copyright Code for Change | Ultimate Growth 86www.codejika.com
When you see curly brackets
…think BLING (CSS).
{ }
2019 Copyright Code for Change | Ultimate Growth 87www.codejika.com
Ready to learn some CSS?
1.1.2
2019 Copyright Code for Change | Ultimate Growth 88www.codejika.com
CSSIt works like this:
h1 { }
Selector
Selector is the “name”.
BRIEFINGCSS Basics
1.1.2
2019 Copyright Code for Change | Ultimate Growth 89www.codejika.com
CSS h1 { font-size: 75; }It works like this:
Styling
property
Property & value say what.
value
BRIEFINGCSS Basics
1.1.2
2019 Copyright Code for Change | Ultimate Growth 90www.codejika.com
CSSh1 { font-size: 75; }
It works like this:
Rule
The whole thing is a “rule”.
2. Property3. Value
1. Selector
BRIEFINGCSS Basics
2019 Copyright Code for Change | Ultimate Growth 91www.codejika.com
Let’s talk practical…
You want to add CSS styling to the <h1> text.
1.1.2
2019 Copyright Code for Change | Ultimate Growth 92www.codejika.com
CSSIt works like this:
<head><style>
h1 {font-size: 75;}</style>
</head>
<body>
<h1>
Hi, It’s me! :-)
</h1>
</body>
Is applied to <h1> in <body>
CSS <style>BRIEFINGCSS Basics
2019 Copyright Code for Change | Ultimate Growth 93www.codejika.com
Now you’ll add a h1 selector.
h1 { }
EXAMPLE:
Add a h1 selector.CODE :
In <style> section.T IP :
CHALLENGESTEP 1
2019 Copyright Code for Change | Ultimate Growth 94www.codejika.com
Add font-size: 75px;
CODE :
Between the curly brackets.
T IP :
CHALLENGESTEP 2
2019 Copyright Code for Change | Ultimate Growth 95www.codejika.com
CHECKPOINTYour code should look something like this:
<!DOCTYPE html><head><style>h1 {font-size: 75;}
</style></head>
<body>
...2019 Copyright Code for Change | Ultimate Growth 96www.codejika.com
GREAT!
The next one is even more fun.
2019 Copyright Code for Change | Ultimate Growth 97www.codejika.com
Add a <h3> with a title and a short sentence.
. . .
MISSION
This mission will include 3 challenges.
2019 Copyright Code for Change | Ultimate Growth 98www.codejika.com
MOTIVATION:
TYPE:
CHALLENGESTEP 1
2019 Copyright Code for Change | Ultimate Growth 99www.codejika.com
Place it below the <h1> tags.
Wrap it in <h3> tags.CODE :
Between the <body> tags.
T IP :
CHALLENGESTEP 2
2019 Copyright Code for Change | Ultimate Growth 100www.codejika.com
<h3>MOTIVATION:
</h3>
2019 Copyright Code for Change | Ultimate Growth 101www.codejika.com
NOW IT’S YOUR TURN.
Tell us why you want to learn how to code.
2019 Copyright Code for Change | Ultimate Growth 102www.codejika.com
It could look something like this:
I want to learn to code because...
EXAMPLE:
A short sentence about why you are learning coding.
TYPE:CHALLENGESTEP 1
2019 Copyright Code for Change | Ultimate Growth 103www.codejika.com
Below “Motivation” inside the <h3>tags.
WHERE:
GOOD JOB!
2019 Copyright Code for Change | Ultimate Growth 104www.codejika.com
Learn about italics and how to create a new line.
. . .
MISSION
This mission will include 3 challenges.
2019 Copyright Code for Change | Ultimate Growth 105www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 106www.codejika.com
Let’s learn about italics and apply CSS to your sentence.
BRIEFING<i> </i>
I <i>LOVE</i> ICECREAM!
The <i> tag stands for italics .
Italics is text slanted to the side.
1.1.2
<i> Tag
2019 Copyright Code for Change | Ultimate Growth 107www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 108www.codejika.com
You can add italics to a sentence like this:
<i>Because...
</i>
EXAMPLE:
Put your sentence into italics with the <i> tag.
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 109www.codejika.com
<h3>MOTIVATION<i>Sentence...</i>
</h3>
2019 Copyright Code for Change | Ultimate Growth 110www.codejika.com
Change the size of your <i> text in CSS like this:
i {font-size: 25px;}
EXAMPLE:
Using CSS reduce the size of the italics text to 25px.
CODE :
Start with i { } in style.
T IP :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 111www.codejika.com
NICE!
2019 Copyright Code for Change | Ultimate Growth 112www.codejika.com
DID YOU KNOW?
In HTML there’s a special symbol to make
a new line.
2019 Copyright Code for Change | Ultimate Growth 113www.codejika.com
DEFINITION
Typing <br> is like hitting the “Enter” key on your keyboard…
It adds a line.
<br> = New line
2019 Copyright Code for Change | Ultimate Growth 114www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 115www.codejika.com
Where to place the <br> ?
<h3>
MOTIVATION:
<br> <br>
<i>
Because...
</i>
</h3>
CHECK:
Add <br> twice immediately after MOTIVATION: </h3> closing tag.
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 116www.codejika.com
<br><br>
CHECKPOINTYour code should look something like this:
...
<h3>
MOTIVATION:
<br> <br>
<i>
I want to learn how to code because...[your reasons].
</i>
</h3>
...
2019 Copyright Code for Change | Ultimate Growth 117www.codejika.com
CONGRATULATIONS
You’ve finished Training 2.
2019 Copyright Code for Change | Ultimate Growth 118www.codejika.com
STUCK?
2019 Copyright Code for Change | Ultimate Growth 119www.codejika.com
Invite your friends to learn how to code.
When working together one of the squad will usually figure it out.
Whatsapp Groups are great for sharing screenshots and code.T I P :
Take a quick quiz...
2019 Copyright Code for Change | Ultimate Growth 120www.codejika.com
In the rule: h1 { font-size: 75px; }
what is h1?
QUIZ
An increase in text size.
Value
Selector
CSS
QUESTION 2.1
A.
B.
C.
D.
1. 2.
2019 Copyright Code for Change | Ultimate Growth 121www.codejika.com
How would you start to write a new rule for <h3> ?
<h3> Hello World! </h3>
h3 { }
<style>
<br>
QUESTION 2.2
A.
B.
C.
D.
1. 2.
PREVIOUS ANSWER: C.
QUIZ
2019 Copyright Code for Change | Ultimate Growth 122www.codejika.com
1. 2.
PREVIOUS ANSWER: B.
WHAT WAS YOUR SCORE?
50% 100%
QUIZ
2019 Copyright Code for Change | Ultimate Growth 123www.codejika.com
If you have internet:Download and install a better code editor.
WHY?It’s easier and shows any mistakes in your code.
2019 Copyright Code for Change | Ultimate Growth 124www.codejika.com
https://notepad-plus-plus.org/download/
We recommend:
Notepad++
FOLLOW THE LINK:
SUGGESTION:
Ready for Training 3?
2019 Copyright Code for Change | Ultimate Growth 125www.codejika.com
LET’S GO.
2019 Copyright Code for Change | Ultimate Growth 126www.codejika.com
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 127
LOADING . . .
PROJECT 1
Training 3
PURPOSE: Teach yourself. Teach your friends. Help others.
LEARN: The practical skills of a Jnr. Web Developer over 12 Projects.
WHAT’S THE DEAL?
PROJECT 1: Introduces you to building a website. The outcome is a simple, colorful landing page.
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 128www.codejika.com
Desktop – v2
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
Let’s ROCKthis!
2019 Copyright Code for Change | Ultimate Growth 129www.codejika.com
PROJECT 1
1. Structure <body> // <h1>, <h3> & <p>
2. CSS <style> // Type Selector
3. Page Sections // Header, Section & Footer
4. <div> // Fonts, borders & padding
TRAINING SESSIONS:
2019 Copyright Code for Change | Ultimate Growth 130www.codejika.com
1. Learn page sections.
2. Add a LIT background.
3. Add a footer.
TRAINING SNAPSHOTMissions for today:
PROJECT 1 – TRAINING 3
2019 Copyright Code for Change | Ultimate Growth 131www.codejika.com
Ace page sections.
. . .
MISSION
This mission will include 0 challenges.
2019 Copyright Code for Change | Ultimate Growth 132www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 133www.codejika.com
This is a Desktop WebsitePage Structure.
BRIEFING 1.1.2
Desktop Website Structure
2019 Copyright Code for Change | Ultimate Growth 134www.codejika.com
Mobile Website Page Structure
BRIEFING 1.1.2
Mobile Website StructureHEADER
SECTION
STUFF
FOOTER
lll MENU
OBSERVE
2019 Copyright Code for Change | Ultimate Growth 135www.codejika.com
How is the Desktop PC website structure differentthen the Mobile website?
THINK
How do you think the sections are created?
2019 Copyright Code for Change | Ultimate Growth 136www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 137www.codejika.com
BRIEFING 1.1.2
Website StructureHEADER
SECTION
STUFF
FOOTER
lll
STRUCTURE:
Remember this.T I P :
Each section is constructed with;
1. CSS boxes and styles linked to
2. HTML sections.
2019 Copyright Code for Change | Ultimate Growth 138www.codejika.com
BRIEFING 1.1.2
Website Structure
SECTIONS:
Here are some commonHTML sections:
<header><menu><section><footer>
2019 Copyright Code for Change | Ultimate Growth 139www.codejika.com
BRIEFING 1.1.2
Website Structure
SECTIONS:
All placed inside <body>. <header><menu><section><footer>
<body>
2019 Copyright Code for Change | Ultimate Growth 140www.codejika.com
BRIEFING 1.1.2
Website Structure
SECTIONS:
Like this:
<header></header><menu></menu><section><stuff></stuff>
</section><footer></footer>
<body>
</body>
2019 Copyright Code for Change | Ultimate Growth 141www.codejika.com
All good so far?
Style your <header>.
. . .
MISSION
This mission will include 2 challenges.
2019 Copyright Code for Change | Ultimate Growth 142www.codejika.com
<header>
Logo, Company Name & Menu go here.
1.1.21 of 2
2019 Copyright Code for Change | Ultimate Growth 143www.codejika.com
1. Goes in the <body> section.2. <header> has nothing to do
with <head>.
BRIEFING<header> Tag
<header>
1.1.22 of 2
2019 Copyright Code for Change | Ultimate Growth 144www.codejika.com
BRIEFING<header> Tag
EXAMPLE: ...<body><header> <h1>My Name
</h1><h3> Launching soon...
</h3><p>18th June, 2018
</p></header><section>
...
NOTICE
Insert a <header> .CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 145www.codejika.com
1. Open it before <h1> .2. Close it after the <p> tags .
WHERE:
AWESOME!
That’s a great first step.
2019 Copyright Code for Change | Ultimate Growth 146www.codejika.com
Let’s give this <header> a LIT
background.
2019 Copyright Code for Change | Ultimate Growth 147www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 148www.codejika.com
Like this:
background: linear-gradient(110deg, yellow 40%, pink 40%);
2019 Copyright Code for Change | Ultimate Growth 149www.codejika.com
I know, you’re thinking…
2019 Copyright Code for Change | Ultimate Growth 150www.codejika.com
Just try it.
Add a header selector in <style> .
CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 151www.codejika.com
header {
}
STEP 1
Add this first half of the rule:
CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 152www.codejika.com
header {
background: linear-gradient
}
STEP 2
Complete the rule with this line:
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 153www.codejika.com
header {
background: linear-gradient(110deg, yellow 40%, pink 40%);
}
STEP 3
No space between gradient & (110 .
T I P :
BE PROUD.
You now have an awesome background.
2019 Copyright Code for Change | Ultimate Growth 154www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 155www.codejika.com
Let’s rock this next <section>.
2019 Copyright Code for Change | Ultimate Growth 156www.codejika.com
<section>
<section> is for the main content of your site.
1.1.2
2019 Copyright Code for Change | Ultimate Growth 157www.codejika.com
BRIEFING<section> Tag
<section> All my stuff...
</section>
Were you wondering what “Content”
means?
2019 Copyright Code for Change | Ultimate Growth 158www.codejika.com
BTW,…(By the way)
DEFINITION
1. The main message of the webpage.
2. Can be text, graphics and video.
CONTENT
2019 Copyright Code for Change | Ultimate Growth 159www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 160www.codejika.com
Now,..Wrap the motivation content in the <section> tag.
<section><h3>
MOTIVATION:<br><br>Because...
</h3></section>
Place your “Motivation” <h3> within <section> tags.
CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 161www.codejika.com
STEP 1
Style <section> with a grey background.
CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 162www.codejika.com
section {
background: lightgrey;
}
STEP 2
NICE.
Add a footer to make your Landing Page
look more complete.
2019 Copyright Code for Change | Ultimate Growth 163www.codejika.com
Add and style a footer.
. . .
MISSION
This mission will include 3 challenges.
2019 Copyright Code for Change | Ultimate Growth 164www.codejika.com
<footer>
1. Important links & resources are listed.
2. Copyright symbol is inserted here.
1.1.2
2019 Copyright Code for Change | Ultimate Growth 165www.codejika.com
BRIEFING<footer> Tag
<footer> © 2021 My Name
</footer>
Insert a <footer> before the closing </body> tag.
CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 166www.codejika.com
STEP 1
Copyright
Copyright says “You can’t copy my content without asking.”
1.1.2
2019 Copyright Code for Change | Ultimate Growth 167www.codejika.com
BRIEFINGCopyright Line
<footer> © 2021 My Name
</footer>
It is normally the last line on the website.
Copyright1.1.2
2019 Copyright Code for Change | Ultimate Growth 168www.codejika.com
BRIEFINGCopyright Line
The line should include:
1. Copyright symbol ( © ) 2. The Year3. Your Name
Add a copyright line in <footer>.
CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 169www.codejika.com
<footer>
© 2021 My Name
</footer>
STEP 2
2019 Copyright Code for Change | Ultimate Growth 170www.codejika.com
Style your footer with a black background and white text.
background: black;color: white;
These two lines of CSS should work:
Using a footer { } selector in CSS, make your footer background black and the text white.
CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 171www.codejika.com
STEP 3
CONGRATULATIONS
You’ve finished Training 3.
2019 Copyright Code for Change | Ultimate Growth 172www.codejika.com
CHECKPOINTYour code should look something like this:
...
<h3>
MOTIVATION:
<br> <br>
<i>
I want to learn how to code because...[your reasons].
</i>
</h3>
...
2019 Copyright Code for Change | Ultimate Growth 173www.codejika.com
STUCK?
2019 Copyright Code for Change | Ultimate Growth 174www.codejika.com
Invite your friends to learn how to code.
When working together one of the squad will usually figure it out.
Whatsapp Groups are great for sharing screenshots and code.T I P :
Take a quick quiz...
2019 Copyright Code for Change | Ultimate Growth 175www.codejika.com
What’s the rule for tags?QUIZ
Open it? Close it.
Do or Die!
Catch whoever you can.
Only close the tag if you have to.
QUESTION 3.1
A.
B.
C.
D.
1. 2.
2019 Copyright Code for Change | Ultimate Growth 176www.codejika.com
How do you write a rule in CSS?
h2 { background: lime; }
<footer> © 2021 My Name </footer>
section ( color; blue: )
<style> h1 { } </style>
QUESTION 3.2
A.
B.
C.
D.
1. 2.
PREVIOUS ANSWER: A.
QUIZ
2019 Copyright Code for Change | Ultimate Growth 177www.codejika.com
1. 2.
PREVIOUS ANSWER: A.
WHAT WAS YOUR SCORE?
50% 100%
QUIZ
2019 Copyright Code for Change | Ultimate Growth 178www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 179www.codejika.com
Change some colors
header { background: linear-gradient(110deg, yellow 40%, pink 40%);}
Try these colors;teal maroon grey lightblue red
PLAY
2019 Copyright Code for Change | Ultimate Growth 180www.codejika.com
Change this to 250
header { background: linear-gradient(110deg, yellow 40%, pink 40%);}
EXPERIMENT
What happened?
Discuss with your friends why.
Ready for Training 4?
2019 Copyright Code for Change | Ultimate Growth 181www.codejika.com
YIPPEEE.
2019 Copyright Code for Change | Ultimate Growth 182www.codejika.com
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 183
LOADING . . .
PROJECT 1
Training 4
PURPOSE: Teach yourself. Teach your friends. Help others.
LEARN: The practical skills of a Jnr. Web Developer over 12 Projects.
WHAT’S THE DEAL?
PROJECT 1: Introduces you to building a website. The outcome is a simple, colorful landing page.
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 184www.codejika.com
Desktop – v2
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
Let’s DOthis!
2019 Copyright Code for Change | Ultimate Growth 185www.codejika.com
PROJECT 1
1. Structure <body> // <h1>, <h3> & <p>
2. CSS <style> // Type Selector
3. Page Sections // Header, Section & Footer
4. <div> // Fonts, borders & padding
TRAINING SESSIONS:
2019 Copyright Code for Change | Ultimate Growth 186www.codejika.com
1. Learn <div>.
2. Be “Font” savvy.
3. Add borders and padding.
TRAINING SNAPSHOTMissions for today:
PROJECT 1 – TRAINING 4
2019 Copyright Code for Change | Ultimate Growth 187www.codejika.com
Do the <div>.1. Understand it.2.Wrap content in it.
. . .
MISSION
This mission will include 0 challenges.
2019 Copyright Code for Change | Ultimate Growth 188www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 189www.codejika.com
BRIEFING 1.1.2
<div> Tag
What’s a DIV?
<div>It’s like a magical stretchy container & you can put any type of object in it. </div>
1 of 2
<div> </div> 1.1.22 of 2
2019 Copyright Code for Change | Ultimate Growth 190www.codejika.com
1. A HTML section.2.There can be lots of <div> s in
a site.3.You can even put a <div>
inside another <div> .
BRIEFING<div> Tag
REMEMBER
What’s a <div> ?
2019 Copyright Code for Change | Ultimate Growth 191www.codejika.com
What can you put in it?
Insert a <div> in <header> .CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 192www.codejika.com
1. Open it before <h1> .
2. Close it after the <p> tags .
WHERE :
CHECKPOINTYour code should look something like this:
...
<header>
<div><h1>
My Name</h1><h3>
Launching soon... </h3><p>
18th June, 2018</p>
</div></header>...
2019 Copyright Code for Change | Ultimate Growth 193www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 194www.codejika.com
Now wrap the <section> content in a <div>.
Insert a <div> in <section>.CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 195www.codejika.com
1. Open the <div> before your <h3> .
2. Close it after the </h3> tags .
WHERE :
CHECKPOINTYour code should look something like this:
...
<section><div><h3>
MOTIVATION:<br><br>Because...
</h3></div>
</section>...
2019 Copyright Code for Change | Ultimate Growth 196www.codejika.com
GOOD JOB!
2019 Copyright Code for Change | Ultimate Growth 197www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 198www.codejika.com
Do the same in <footer> .
Wrap the content in <footer> with a <div> .
CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 199www.codejika.com
CHECKPOINTYour code should look something like this:
...
<footer><div>
© 2021 My Name</div>
</footer>...
2019 Copyright Code for Change | Ultimate Growth 200www.codejika.com
GREAT!
2019 Copyright Code for Change | Ultimate Growth 201www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 202www.codejika.com
Now let’s style these divs.
2019 Copyright Code for Change | Ultimate Growth 203www.codejika.com
The rules (styles) you write to the div {} are applied to allthe <div> s.
FYI(For Your Information)
1.1.2
2019 Copyright Code for Change | Ultimate Growth 204www.codejika.com
CSSIt works like this:
<body><header>
<div></div>
</header><section>
<div></div>
</section><footer>
<div></div>
</footer></body>
BRIEFINGCSS Multiple Selector Styling
div {font-size: 75;}
Applied to all <div> s.
Style the <div> s.
. . .
MISSION
This mission will include 3 challenges.
2019 Copyright Code for Change | Ultimate Growth 205www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 206www.codejika.com
BRIEFING 1.1.2
<div> Styling
Styling the <div>
Use div { } to apply style to everything in the <div> .
1 of 2
T IP :Make sure your CSS rule is in the <style> section.
div {text-align:center;padding: 40px;
}
Add a div {} selector in the <style> section.
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 207www.codejika.com
div {}
STEP 1
2019 Copyright Code for Change | Ultimate Growth 208www.codejika.com
BRIEFING 1.1.2
text-align:
CSS Styling Tells the text where to “lean”.
text-align:
text-align: left;
text-align: right;
text-align: center;
Left, right or center.
Center align all the content in the <div> s.
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 209www.codejika.com
STEP 2
2019 Copyright Code for Change | Ultimate Growth 210www.codejika.com
BRIEFING 1.1.2
padding:
CSS Styling It’s like having pillows around you when you are inside a box.
padding:
padding: 40px;
2019 Copyright Code for Change | Ultimate Growth 211www.codejika.com
Your CSS div (Selector) will look something like this:
FYI(For Your Information)
div {text-align: center;padding: 40px;
}
Using CSS, add 40px padding to div.
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 212www.codejika.com
STEP 3
CHECKPOINTIs all the content (text) on the page centered?
...<style>h1 {font-size: 75px;}i {font-size: 25px;}header { background: linear-gradient(110deg, yellow 40%, ...}section { background: grey; }footer {background: black;color: white;}div {text-align:center;padding: 40px;}</style>
...
2019 Copyright Code for Change | Ultimate Growth 213www.codejika.com
If not, then something’s wrong.
CSS Code Review:
2019 Copyright Code for Change | Ultimate Growth 214www.codejika.com
You completed the mission.
Style the <h3> s.
. . .
MISSION
This mission will include 5 challenges.
2019 Copyright Code for Change | Ultimate Growth 215www.codejika.com
Add the h3 Selector to <style> section.
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 216www.codejika.com
STEP 1
border: 2px solid white;
2019 Copyright Code for Change | Ultimate Growth 217www.codejika.com
Start with a cool border.
2019 Copyright Code for Change | Ultimate Growth 218www.codejika.com
BRIEFING 1.1.2
border:
CSS Styling Puts a border around text or objects.
border:
border: 2px solid white;
border: 4px dashed red;
EXAMPLE 1:
EXAMPLE 2:
Add a white solid 2px border to h3 { } .
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 219www.codejika.com
STEP 2
Add a font-size 45px & a padding of 15px to h3 { } .
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 220www.codejika.com
STEP 3
font-size: 45px;padding: 15px;
2019 Copyright Code for Change | Ultimate Growth 221www.codejika.com
BRIEFING 1.1.2
margin:
CSS Styling It’s the boundaries outside your box or text.
margin:
20px;
margin: 20px;20px;20px;
20px;
This is a trick to center your box or text.
margin: auto;TIP:
Center your h3 { } by using the margin: auto; trick.
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 222www.codejika.com
STEP 4
margin: auto;
2019 Copyright Code for Change | Ultimate Growth 223www.codejika.com
BRIEFING 1.1.2
max-width:
CSS Styling It’s the maximum width your container will become.
max-width:
max-width: 400px;
400px
This is important if your site will be viewed on different screen sizes.
(For example, mobile & desktop.)
Beautify your h3 border by giving it a max-width of 400px.
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 224www.codejika.com
STEP 5
max-width: 400px;
CHECKPOINTYour h3 CSS code should look something like this:
...
h3 {border: 2px solid white;font-size: 45px;padding: 15px;margin: auto;max-width: 400px;}
...
2019 Copyright Code for Change | Ultimate Growth 225www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 226www.codejika.com
One last thing…
Give your <h1> some class.
See if you like it more white.
h1 {font-size: 75px;color: white;}
2019 Copyright Code for Change | Ultimate Growth 227www.codejika.com
Like this:
Make your h1 text white.CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 228www.codejika.com
STEP 6
2019 Copyright Code for Change | Ultimate Growth 229www.codejika.com
GUESS WHAT JUST HAPPENED
???
2019 Copyright Code for Change | Ultimate Growth 230www.codejika.com
You just completed PROJECT 1.
2019 Copyright Code for Change | Ultimate Growth 231www.codejika.com
That’s so amazing.
It’s time to PAAARTYYYY!!!
2019 Copyright Code for Change | Ultimate Growth 232www.codejika.com
See you in PROJECT 2.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 233
BYE.See you soon.