CODEJIKA.COM PROJECT 2 · CODEJIKA.COM PROJECT 2 ... codejika.com
Transcript of CODEJIKA.COM PROJECT 2 · CODEJIKA.COM PROJECT 2 ... codejika.com
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 1
PROJECT 2LET’S GO…
CODEJIKA.COM
PROJECT 2
Training 1
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 2:
Present your skills and plans in an attractive and engaging Website CV built with HTML, CSS and emojies.
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 2www.codejika.com
Desktop – v1
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
Are you ready?
2019 Copyright Code for Change | Ultimate Growth 3www.codejika.com
PROJECT 2
1. Review: HTML Structure / Setup: Header
2. CSS Classes & customize.
3. Box, Circle & center classes.
4. Learn: HTML Colors & Fonts.
2019 Copyright Code for Change | Ultimate Growth 4www.codejika.com
5. Add skills section & lists.
6. Add emoji's & customize.
PROJECT 2TRAINING SESSIONS:
2019 Copyright Code for Change | Ultimate Growth 5www.codejika.com
VISIONIn Project 2 you’ll create CV Website.
1. You’ll build it with HTML,2. style it with CSS3. and there’s a surprise at the
end.
2019 Copyright Code for Change | Ultimate Growth 6www.codejika.com
PREVIEW
Your CV Website will look like this:
1. Review the Website Structure
2. Add the <header> Section and a
border.
TRAINING SNAPSHOTThese are your missions for today:
PROJECT 2 – TRAINING 1
2019 Copyright Code for Change | Ultimate Growth 7www.codejika.com
1.1.2
<!DOCTYPE html>
<head><style></style>
</head>
<body>
</body>
START
2019 Copyright Code for Change | Ultimate Growth 8www.codejika.com
Start by setting up the skeleton of your
code.
TIP:You learnt this in your last project.
Add this part:CODE :
CHALLENGESTEP 1
2019 Copyright Code for Change | Ultimate Growth 9www.codejika.com
<!DOCTYPE html>
<head><style></style>
</head>
Now add the <body> section.
CODE :CHALLENGE
STEP 2
2019 Copyright Code for Change | Ultimate Growth 10www.codejika.com
CHECKPOINTYour code should look like this:
<!DOCTYPE html><head>
<style></style>
</head>
<body>
</body>
2019 Copyright Code for Change | Ultimate Growth 11www.codejika.com
BRIEFING <header> </header>
The <header> section of a website usually includes;
1. Company Name2. Logo &3. Menu
1.1.2
<header> Tag
2019 Copyright Code for Change | Ultimate Growth 12www.codejika.com
Don’t get confused. It’s not the <head>. The <header> goes in the <body> section.
TIP:
Add a <header> .CODE :
CHALLENGESTEP 1
2019 Copyright Code for Change | Ultimate Growth 13www.codejika.com
<header></header>
Add your name in all-caps (capital letters) in an <h1> in <header> .
CODE :CHALLENGESTEP 2
2019 Copyright Code for Change | Ultimate Growth 14www.codejika.com
<h1>THANDI NDLOVU
</h1>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 15
TIP:Don’t forget to close your tags!
GREAT JOB!
2019 Copyright Code for Change | Ultimate Growth 16www.codejika.com
You’ll be a pro in no time!
Style your <header>.
. . .
MISSION
This mission will include 4 challenges.
2019 Copyright Code for Change | Ultimate Growth 17www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 18www.codejika.com
You got this.
1.1.2
2019 Copyright Code for Change | Ultimate Growth 19www.codejika.com
REVIEWCSS styles HTML.
<head>
<style>
header {
background: #ce54c7;
border: solid #ad54ce;
border-width: 10px 0px 10px 0px;
}
</style>
</head>
<body>
<header><h1>Thandi Ndlovu</h1>
</header></body>
Is applied to in <body>
CSS <style>BRIEFINGCSS Basics
Add a CSS selector called header.
CODE :CHALLENGESTEP 1
2019 Copyright Code for Change | Ultimate Growth 20www.codejika.com
<style>header { }
</style>
Add some styling to the header.
Add a lightblue background to the header element.
CODE :CHALLENGE
STEP 2
2019 Copyright Code for Change | Ultimate Growth 21www.codejika.com
background: lightblue;
Add a simple blue border to <header>.
Like this:
CODE :CHALLENGESTEP 3
2019 Copyright Code for Change | Ultimate Growth 22www.codejika.com
border: solid blue;
If you want a border only on the TOP and the BOTTOM.
How do you do this?
Not all the way around.
THINK
2019 Copyright Code for Change | Ultimate Growth 23www.codejika.com
10px 0px 6px 0px;
BRIEFING border-width: 1.1.2
Top & Bottom Border
2019 Copyright Code for Change | Ultimate Growth 24www.codejika.com
1stTo
p
2ndRi
ght
3rdBo
ttom
4thLe
ft
With borders you say what sides and what width you want.
Add a top and bottom border to header.
Both should be 10px wide.
CODE :CHALLENGESTEP 4
2019 Copyright Code for Change | Ultimate Growth 25www.codejika.com
border-width: 10px 0px 10px 0px;
2019 Copyright Code for Change | Ultimate Growth 26www.codejika.com
How did you do?
EXCITING!!!
Go to the next slide and compare your code.
CHECKPOINTYour code should look like this:
<!DOCTYPE html><head><style>header {background: lightblue;border: solid blue;border-width: 10px 0px 10px 0px;}
</style></head>
<body><header><h1>Thandi Ndlovu</h1>
</header></body>
2019 Copyright Code for Change | Ultimate Growth 27www.codejika.com
FABULOUS!
2019 Copyright Code for Change | Ultimate Growth 28www.codejika.com
Now your code looks bomb…
CHECKPOINTYour code should look something like this:
2019 Copyright Code for Change | Ultimate Growth 29www.codejika.com
W E B C H E C K :
2019 Copyright Code for Change | Ultimate Growth 30www.codejika.com
Did you know?
The best way to learn how to code is with friends?
When it gets complicated you can help each other.
Where is a CSS rule located?QUIZ
<header>
<style>
<body>
Curly brackets
QUESTION 2.1.1
A.
B.
C.
D.
1. 2.
2019 Copyright Code for Change | Ultimate Growth 31www.codejika.com
How do you link CSS styles to content in the HTML structure?
Using colon & then semi-colon at the end.
Opening and closing tags.
The indent
CSS selectors & html tags of the same name.
QUESTION 2.1.2
A.
B.
C.
D.
1. 2.
PREVIOUS ANSWER: B.
QUIZ
2019 Copyright Code for Change | Ultimate Growth 32www.codejika.com
1. 2.
PREVIOUS ANSWER: D.
WHAT WAS YOUR SCORE?
50% 100%
QUIZ
2019 Copyright Code for Change | Ultimate Growth 33www.codejika.com
Ready for Training 2?
2019 Copyright Code for Change | Ultimate Growth 34www.codejika.com
LET’S GO.
2019 Copyright Code for Change | Ultimate Growth 35www.codejika.com
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 36
LOADING . . .
PROJECT 2:
Present your skills and plans in an attractive and engaging Website CV built with HTML, CSS and emojies.
PROJECT 2
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?
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 37www.codejika.com
Desktop – v3
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
2019 Copyright Code for Change | Ultimate Growth 38www.codejika.com
SAWUBONA*.
*”Hello” in Zulu.
Here’s an overview of the projects.
You’re on Project 2.
2019 Copyright Code for Change | Ultimate Growth 39www.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 40www.codejika.com
5. JavaScript OrderForm // 4 Sessions | 3 Hours
6. Basic Business Website // 5 Sessions | 4 Hours
<Certificate> Milestone
Project
You’re also on Training 2 of Project 2.
2019 Copyright Code for Change | Ultimate Growth 41www.codejika.com
1. Review: HTML Structure / Setup: Header
2. Dream job, your birthday & center the header.
3. The Incredible Box ( and classes.)
4. Learn: HTML Colors & Fonts.
2019 Copyright Code for Change | Ultimate Growth 42www.codejika.com
5. Add skills section & lists.
6. The “Return” of the Emoji.
PROJECT 2
TRAINING SESSIONS:
1. Learn how to center everything.
2. Learn italics.
3. Add a section with your birthday.
TRAINING SNAPSHOTThese are your missions for today:
PROJECT 2 – TRAINING 2
2019 Copyright Code for Change | Ultimate Growth 43www.codejika.com
Center everything.
. . .
MISSION
This mission will include 2 challenges.
2019 Copyright Code for Change | Ultimate Growth 44www.codejika.com
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 45
1. First, margin: auto; to center everything inside <header>
( Including what we put in later.)
2. Center all text with: text-align: center;
We’ll use two ways to get everything in the middle:
BRIEFING margin: auto;
Margins are awesome.
But with this one you can even “Center” elements.
1.1.2
margin: auto;
2019 Copyright Code for Change | Ultimate Growth 46www.codejika.com
margin: auto;
Centered ( The text )
Center the <header> using margin: .
CODE :CHALLENGE
STEP 1
2019 Copyright Code for Change | Ultimate Growth 47www.codejika.com
margin: 0 auto;In the header { } selector in <style>.
T IP :
BRIEFING text-align:
Tells the text where to “lean”.
1.1.2
text-align:
2019 Copyright Code for Change | Ultimate Growth 48www.codejika.com
Left, right or center.
text-align: left;
text-align: right;
text-align: center;
Center the text in the <header> section.
Use:text-align:
CODE :CHALLENGE
STEP 2
2019 Copyright Code for Change | Ultimate Growth 49www.codejika.com
Close the element with a ; (semi-colon).
T IP :
CHECKPOINTYour code should look like this:
...header {
background: #ce54c7;border: solid #ad54ce;border-width: 10px 0px 10px 0px;margin: 0 auto;text-align: center;}
...<body><header><br><h1>THANDI NDLOVU
</h1></header>
</body>
2019 Copyright Code for Change | Ultimate Growth 50www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 51www.codejika.com
MISSION COMPLETE
You managed that like a BOSS!!!
1. Decide on your dream job, 2. Learn about italics.
. . .
MISSION
This mission will include 4 challenges.
2019 Copyright Code for Change | Ultimate Growth 52www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 53www.codejika.com
What’s your Dream?
We’re excited about you learning skills to make it a reality.
What do you want to do when you grow up?
THINK
2019 Copyright Code for Change | Ultimate Growth 54www.codejika.com
Add your dream job or future profession.
After the </h1> in <header> .
TYPE :CHALLENGESTEP 1
2019 Copyright Code for Change | Ultimate Growth 55www.codejika.com
</h1>Aspiring Mechanical Engineer</header>
E X A M PLE :
BRIEFING <i> </i>
The <i> tag stands for italics .
Italics is text slanted to the side.
1.1.2
Italic Tag
2019 Copyright Code for Change | Ultimate Growth 56www.codejika.com
I <i>LOVE</i> ICECREAM!
E X A M PLE :
1 of 2
Add italics to your dream job by using <i>.
TYPE :CHALLENGESTEP 2
2019 Copyright Code for Change | Ultimate Growth 57www.codejika.com
</h1><i>Aspiring Mechanical Engineer</i></header>
E X A M PL E :
BRIEFING <i> </i>
FYI: These are other ways to style specifIc words:
1.1.2
Italic Tag
2019 Copyright Code for Change | Ultimate Growth 58www.codejika.com
<em> (emphasized text)
<strong> (important text)
<mark> (marked/ highlighted text)
2 of 2
JUST FOR FUN: Try it in your next sentence.
2019 Copyright Code for Change | Ultimate Growth 59www.codejika.com
AWESOME!
You aced those italics.
2019 Copyright Code for Change | Ultimate Growth 60www.codejika.com
Now increase your <h1> font to give the website some
character.
Create a h1 {} rule.Use:font-size:
(To make it 3x the size.)
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 61www.codejika.com
h1 {font-size: 3em;
}
Make h1 text larger.
2019 Copyright Code for Change | Ultimate Growth 62www.codejika.com
NICE!
2019 Copyright Code for Change | Ultimate Growth 63www.codejika.com
Remember <br>?
We need a couple of them to space things a little.
BRIEFING <br> = New line
Typing <br> is like hitting the “Enter” key on your keyboard…
It adds a line.
1.1.2
<br> Tag
2019 Copyright Code for Change | Ultimate Growth 64www.codejika.com
Add <br> 1. After <header> opening tag.2. Twice after </i>3. After </header> closing tag.
CODE :CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 65www.codejika.com
CHECKPOINTYour code should look like this:
...
<body>
<header><br><h1>THANDI NDLOVU
</h1><i>Aspiring Mechanical Engineer
</i><br> <br>
</header><br>
</body>
2019 Copyright Code for Change | Ultimate Growth 66www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 67www.codejika.com
Yabadabadoo!
Now add some details about yourself.
Create a new section with; • a title, • your date of birth and • other details.
. . .
MISSION
This mission will include 4 challenges.
2019 Copyright Code for Change | Ultimate Growth 68www.codejika.com
As a title, type “DETAILS” between an opening and closing <h3> tag.
CODE :CHALLENGESTEP 1
2019 Copyright Code for Change | Ultimate Growth 69www.codejika.com
<h3>DETAILS
</h3>
Put this below the last <br> and before the </body> closing tag.
WHE RE :
Add a <p> with your Date of birth in it.
CODE :CHALLENGE
STEP 2
2019 Copyright Code for Change | Ultimate Growth 70www.codejika.com
<p>Date of Birth: 27 July 2006</p>
Below the <h3>.WHE RE :
2019 Copyright Code for Change | Ultimate Growth 71www.codejika.com
FANTASTIC!
Now two more lines.
Add another <p> with your School Name in it.
CODE :CHALLENGE
STEP 3
2019 Copyright Code for Change | Ultimate Growth 72www.codejika.com
<p>School: Sandringham Secondary</p>
Add one last <p> with what grade you are in.
CODE :CHALLENGE
STEP 4
2019 Copyright Code for Change | Ultimate Growth 73www.codejika.com
<P>Grade: 9</p>
CHECKPOINTYour code should look like this:
...
</header><br><h3>
DETAILS</h3><p>Date of Birth: 27 July 2006</p><p>School: Sandringham Secondary</p><P>Grade: 9</p>
</body>
2019 Copyright Code for Change | Ultimate Growth 74www.codejika.com
What is <i> for?QUIZ
Increase in font-size.
Italian font size originating in Bulgaria.
Slanted text.
For “Information” on websites.
QUESTION 2.2.1
A.
B.
C.
D.
1. 2.
2019 Copyright Code for Change | Ultimate Growth 75www.codejika.com
<h3> titles should be centered using CSS.
<h3 style=center>
h3 ( text-align: center; color: red; )
h3 { text-align: center; }
Use the tab key to center.
QUESTION 2.2.2
A.
B.
C.
D.
1. 2.
PREVIOUS ANSWER: C.
QUIZ
2019 Copyright Code for Change | Ultimate Growth 76www.codejika.com
1. 2.
PREVIOUS ANSWER: C.
WHAT WAS YOUR SCORE?
50% 100%
QUIZ
2019 Copyright Code for Change | Ultimate Growth 77www.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 78www.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 79www.codejika.com
LET’S GO.
2019 Copyright Code for Change | Ultimate Growth 80www.codejika.com
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 81
LOADING . . .
PROJECT 2:
Present your skills and plans in an attractive and engaging Website CV built with HTML, CSS and emojies.
PROJECT 2
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?
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 82www.codejika.com
Desktop – v4
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
2019 Copyright Code for Change | Ultimate Growth 83www.codejika.com
OMGThis is a SUPER FUN Lesson
But the next one (Training 4) is even better…
1. Make a box.
2. Transform it into a circle with 1 line.
3. Remember 3 things about Classes.
TRAINING SNAPSHOTThese are your missions for today:
PROJECT 2 – TRAINING 3
2019 Copyright Code for Change | Ultimate Growth 84www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 85www.codejika.com
What if, all of a sudden,...
you decided you wanted...
a mysterious box.
2019 Copyright Code for Change | Ultimate Growth 86www.codejika.com
In the middle of your website.
width: 100px;
height: 100px;
What would you do?!?
Make a box.
. . .
MISSION
This mission will include 3 challenges.
2019 Copyright Code for Change | Ultimate Growth 87www.codejika.com
BRIEFING MAKE A BOX:
All you have to do is write a simple CSS Class and :1. Define width2. Define height
1.1.2
Make a box
2019 Copyright Code for Change | Ultimate Growth 88www.codejika.com
.box {width: 100px;height: 100px;}
1 of 4
BRIEFING
And “magical” CSS does all the rest.
1.1.2
Make a box
2019 Copyright Code for Change | Ultimate Growth 89www.codejika.com
2 of 4 MAKE A BOX:
BRIEFING
Use class="box" to say where you want it.
1.1.2
Make a box
2019 Copyright Code for Change | Ultimate Growth 90www.codejika.com
.box {width: 100px;height: 100px;}
3 of 4 MAKE A BOX:
<div class="box"></div>
CSS
HTML
Amazing! Right?
BRIEFING
In this case, it’s in a <div>.
1.1.2
Make a box
2019 Copyright Code for Change | Ultimate Growth 91www.codejika.com
4 of 4 MAKE A BOX:
1. Make a .box CSS class.2. Make it 250px wide & high.
CODE :CHALLENGE
STEP 1
2019 Copyright Code for Change | Ultimate Growth 92www.codejika.com
.box {height: 250px;width: 250px;}In <style> section.
T IP :
1. Make a <div> in the <header> section above <h1>.
2. Add the .box class to the <div>.
CODE :CHALLENGE
STEP 2
2019 Copyright Code for Change | Ultimate Growth 93www.codejika.com
<div class="box"></div>
In <header> above <h1>.
T IP :
2019 Copyright Code for Change | Ultimate Growth 94www.codejika.com
To see your box, you have to add a border or
background.
Add this to the .box class:
CODE :CHALLENGE
STEP 3
2019 Copyright Code for Change | Ultimate Growth 95www.codejika.com
background: blue;
In .box { } .T IP :
CHECKPOINTYour code should look like this:
...
.box {height: 250px;width: 250px;background-color: blue;}
</style></head>
<body><header><div class="box"></div><h1>THANDI NDLOVU
</h1></header>
...2019 Copyright Code for Change | Ultimate Growth 96www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 97www.codejika.com
WOWYou are on
2019 Copyright Code for Change | Ultimate Growth 98www.codejika.com
Did you wonder why we had to use a <div> ?
Here’s a quick review…
2019 Copyright Code for Change | Ultimate Growth 99www.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>
2019 Copyright Code for Change | Ultimate Growth 100www.codejika.com
Ok.
2019 Copyright Code for Change | Ultimate Growth 101www.codejika.com
Did you enjoy making a box?
We are going to do something super cool now.
2019 Copyright Code for Change | Ultimate Growth 102www.codejika.com
With one line of code we are going to turn the box
into a circle.
Ready?
Make a circle.
. . .
MISSION
This mission will include 4 challenges.
2019 Copyright Code for Change | Ultimate Growth 103www.codejika.com
BRIEFING border-radius:
Make a circle out of a square ( 50% )
1.1.2
border-radius:
2019 Copyright Code for Change | Ultimate Growth 104www.codejika.com
50%
or add rounded corners. ( 5% )
5%
Add border-radius: to .box class with a value of 50%.
CODE :CHALLENGE
STEP 1
2019 Copyright Code for Change | Ultimate Growth 105www.codejika.com
border-radius: 50%;
1. Change CSS Class .box to .circle2. Replace “box” in: <div
class="box"> with circle .
CODE :CHALLENGE
STEP 2
2019 Copyright Code for Change | Ultimate Growth 106www.codejika.com
<div class="circle">
Change your class name.
CHECKPOINTYour code should look like this:
...
.circle {height: 250px;width: 250px;background-color: blue;border-radius: 50%;}
</style></head><body><header><br>
<div class="circle"></div><h1>THANDI NDLOVU
</h1></header></body>
2019 Copyright Code for Change | Ultimate Growth 107www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 108www.codejika.com
COOLJust two more small things
to finish the circle.
Add a border.
Add a solid, 10px wide, white border to the .circle CSS class.
CODE :CHALLENGE
STEP 3
2019 Copyright Code for Change | Ultimate Growth 109www.codejika.com
border: 10px solid white;
2019 Copyright Code for Change | Ultimate Growth 110www.codejika.com
In order to make sure the circle stays centered around
text, use this layout trick:
Add to the circle class:
CODE :CHALLENGE
STEP 3
2019 Copyright Code for Change | Ultimate Growth 111www.codejika.com
display: inline-block;
In .circle { } .T IP :
2019 Copyright Code for Change | Ultimate Growth 112www.codejika.com
GREAT!You’re done with the circle.
Keep it up. You’re doing amazing!
We believe in you!
Learn 3 things about CSS Classes.
. . .
MISSION
This mission will include 1 “Remember”.
2019 Copyright Code for Change | Ultimate Growth 113www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 114www.codejika.com
Don’t worry if you don’t understand this part.
It’s just so you have an idea of how they work.
2019 Copyright Code for Change | Ultimate Growth 115www.codejika.com
Here’s a simple CSS class.
.banner {color: pink;
}EXAMPLE:
BRIEFING
CSS CLASS
1.1.2
Make a box
2019 Copyright Code for Change | Ultimate Growth 116www.codejika.com
1 of 4
CSS Classes have two parts;
A. CSS: The styling.banner {
color: pink;}
B. HTML: Where it’s applied.<h3 class="banner" >
OVERVIEW
2019 Copyright Code for Change | Ultimate Growth 117www.codejika.com
Here are 3 things you should know about
CSS Classes
BRIEFING
CSS CLASS
1.1.2
Make a box
2019 Copyright Code for Change | Ultimate Growth 118www.codejika.com
2 of 4
OVERVIEW
Classes are SUPER POWERFUL
and make up most of CSS.
1.
BRIEFING
CSS CLASS
1.1.2
Make a box
2019 Copyright Code for Change | Ultimate Growth 119www.codejika.com
3 of 4
OVERVIEW
Classes always start with a dot
“.”.
2.
.banner {
color: pink;}
BRIEFING
CSS CLASS
1.1.2
Make a box
2019 Copyright Code for Change | Ultimate Growth 120www.codejika.com
4 of 4
OVERVIEW
Write them onceand
use them ANYWHERE.
3.
REMEMBER
Can you remember the 3 main things about
CSS Classes?
2019 Copyright Code for Change | Ultimate Growth 121www.codejika.com
TIP: Write it in your notebook.
2019 Copyright Code for Change | Ultimate Growth 122www.codejika.com
That was a HARD lesson.
Do you agree?
Invite a friend to work together to learn and “Debug”
(when code isn’t working).
CONGRATULATIONS
You’ve finished Training 3.
2019 Copyright Code for Change | Ultimate Growth 123www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 124www.codejika.com
Training 4 is SUPER FUN!
It’s actually magical.
See you there.
Hint=
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 125
LOADING . . .
PROJECT 2:
Present your skills and plans in an attractive and engaging Website CV built with HTML, CSS and emojies.
PROJECT 2
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?
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 126www.codejika.com
Desktop – v3
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
2019 Copyright Code for Change | Ultimate Growth 127www.codejika.com
Love colors?
Well, the wonderful thing about web design is…
2019 Copyright Code for Change | Ultimate Growth 128www.codejika.com
…you can use ANY color you want.
Yes. Even the ones that don’t have names.
1. Colors have codes.
2. Fonts (text styles) have families.
3. What is “Responsive” web design?
TRAINING SNAPSHOTWe gonna be learnin’…
PROJECT 2 – TRAINING 4
2019 Copyright Code for Change | Ultimate Growth 129www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 130www.codejika.com
This is how far you’ve come.
Two trainings left, then you’re done with P2.
1. Review: HTML Structure / Setup: Header
2. Dream job, your birthday & center the header.
3. The Incredible Box ( and classes.)
4. Learn: HTML Colors & Fonts.
2019 Copyright Code for Change | Ultimate Growth 131www.codejika.com
5. Add skills section & lists.
6. The “Return” of the Emoji.
PROJECT 2
TRAINING SESSIONS:
Use colors in CSS.
. . .
MISSION
This mission will include 6 challenges.
2019 Copyright Code for Change | Ultimate Growth 132www.codejika.com
BRIEFING 1.1.2
HTML Colors
2019 Copyright Code for Change | Ultimate Growth 133www.codejika.com
1 of 4 HTML Colors
A hexadecimal color( 6-Numbers) is specified with:
#RRGGBB
Red
Gree
n
Blue
BRIEFING 1.1.2
HTML Colors
2019 Copyright Code for Change | Ultimate Growth 134www.codejika.com
2 of 4 HTML Colors
For example, #0000FF is displayed as blue.
That’s because the blue component is set to its highest value (FF) and the others are set to 00.
= #0000FF
CONTENT
BRIEFING 1.1.2
HTML Colors
2019 Copyright Code for Change | Ultimate Growth 135www.codejika.com
3 of 4 HTML Colors
Numbers Between 00 and FF specify the intensity of the color.
= #ce54c7
CONTENT
EXAMPLE:
Here’s a great place to choose colors:https://www.w3schools.com/colors/colors_picker.asp
TIP:
BRIEFING 1.1.2
HTML Colors
2019 Copyright Code for Change | Ultimate Growth 136www.codejika.com
4 of 4 EXPERIMENT:
Replace some numbers with any you want.
Try it yourself
See what happens.
body {background: #ce54c7;
}
2019 Copyright Code for Change | Ultimate Growth 137www.codejika.com
Now we’re going to style <h3> with;
• Color• Padding• Font-size• border.
2019 Copyright Code for Change | Ultimate Growth 138www.codejika.com
READY?
Create a h3 selector.CODE :
CHALLENGE1 of 5
2019 Copyright Code for Change | Ultimate Growth 139www.codejika.com
h3 {}
In <style> section.T IP :
CHALLENGE2 of 5
2019 Copyright Code for Change | Ultimate Growth 140www.codejika.com
background-color: #ce54c7;
Add a background color to h3.
CODE :
BRIEFING 1.1.2
padding:
2019 Copyright Code for Change | Ultimate Growth 141www.codejika.com
padding:
It’s like having pillows around you when you are inside a box.
padding: 40px;
REVIEW:
CHALLENGE3 of 5
2019 Copyright Code for Change | Ultimate Growth 142www.codejika.com
Add 15px of padding to h3.CODE :
CHALLENGE4 of 5
2019 Copyright Code for Change | Ultimate Growth 143www.codejika.com
font-size: 1.5em;
Increase the h3 font size with em.
CODE :
CHALLENGE5 of 5
2019 Copyright Code for Change | Ultimate Growth 144www.codejika.com
border-left: 10px solid #d6d5cd;
Add a left border with this color: #d6d5cd
CODE :
You learned about borders in P1 (Project 1.)
T IP :
2019 Copyright Code for Change | Ultimate Growth 145www.codejika.com
SUPER COOL!You just styled the <h3>
section.
2019 Copyright Code for Change | Ultimate Growth 146www.codejika.com
Style two different sections at the
same time?
Do you want to learn how to:
BRIEFING 1.1.2
STYLING TWO ELEMENTS
2019 Copyright Code for Change | Ultimate Growth 147www.codejika.com
STYLING TWO ELEMENTS
This is VERY simple.
Just type both selectors with a comma( , ) between them.
header, h3 {
}
2019 Copyright Code for Change | Ultimate Growth 148www.codejika.com
That’s it.Easy right?
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 149www.codejika.com
header, h3 {color: white;}
Make both <header> & <h3> white using a single CSS element.
CODE :
Learn about fonts.
. . .
MISSION
This mission will include 1 challenge.
2019 Copyright Code for Change | Ultimate Growth 150www.codejika.com
BRIEFING 1.1.2
FONTS
2019 Copyright Code for Change | Ultimate Growth 151www.codejika.com
FONTS
Fonts are a certain style of text.
1 of 5
GRAPHIC
BRIEFING 1.1.2
FONTS
2019 Copyright Code for Change | Ultimate Growth 152www.codejika.com
FONTS
There are two main types of fonts;
2 of 5
Serif
Sans Serif
1.
2.
Has curly flicks.
Very straight.
BRIEFING 1.1.2
FONTS
2019 Copyright Code for Change | Ultimate Growth 153www.codejika.com
FONTS3 of 5
This is Times New Roman
This is Arial
Serif:
Sans Serif:
EXAMPLES:
BRIEFING 1.1.2
FONTS
2019 Copyright Code for Change | Ultimate Growth 154www.codejika.com
FONTS
Do you see the differences?
2 of 5
BRIEFING 1.1.2
FONTS
2019 Copyright Code for Change | Ultimate Growth 155www.codejika.com
FONTS2 of 5
For text we use:
And for code we use:
Radjdani
Consolas
For example ; (at CODEJIKA.COM)
Consolas is a third type of font: monospace
T IP :
2019 Copyright Code for Change | Ultimate Growth 156www.codejika.com
GREAT!Now let’s learn about font
familes.
BRIEFING 1.1.2
font-family:
2019 Copyright Code for Change | Ultimate Growth 157www.codejika.com
font-family:1 of 2
Sometimes a browser will not show the font you added.
So, add “back-up” fonts and a font-family like “sans serif” or “serif”, so that it looks similar.
The next font in the font-family is used, if the first font is missing.
T IP :
BRIEFING 1.1.2
font-family:
2019 Copyright Code for Change | Ultimate Growth 158www.codejika.com
font-family:2 of 2
This becomes a font family.
font-family: Arial, Helvetica, sans-serif;
Also great:font-family: "Times New Roman", Times, serif;
Most common:
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 159www.codejika.com
body {font-family: helvetica, arial,
san-serif;}
Use Helvetica, Arial and San-serif as font-family for body.
CODE :
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 160www.codejika.com
header, h3 {color: white;font-family: "Arial Black",
Gadget, sans-serif;}
Add Arial, Gadget and san serif as font-family for header & h3.
CODE :
Understand • “Responsive” web design,• Pixels• screen sizes.
. . .
MISSION
This mission will include 0 challenges.
2019 Copyright Code for Change | Ultimate Growth 161www.codejika.com
BRIEFING 1.1.2
RESPONSIVE WEB DESIGN
2019 Copyright Code for Change | Ultimate Growth 162www.codejika.com
RESPONSIVE WEB DESIGN
A responsive website works on different screen
sizes.
1 of 2
What do we mean by screen size?
BRIEFING 1.1.2
RESPONSIVE WEB DESIGN
2019 Copyright Code for Change | Ultimate Growth 163www.codejika.com
RESPONSIVE WEB DESIGN2 of 2
Screen size?DESKTOP:
MOBILE:
2019 Copyright Code for Change | Ultimate Growth 164www.codejika.com
GOOD.Now we’re gonna learn about how to measure
screen sizes.
BRIEFING 1.1.2
PIXELS
2019 Copyright Code for Change | Ultimate Growth 165www.codejika.com
PIXELS2 of 2
Pixels are a way to measure a screen.
Your screen is made of thousands of pixels.
pixel = px
BRIEFING 1.1.2
PIXELS
2019 Copyright Code for Change | Ultimate Growth 166www.codejika.com
PIXELS2 of 2
A pixel is like a dot of colour.
EXAMPLES:
Thousands of tiny pixels make up an image.
BRIEFING 1.1.2
PIXELS
2019 Copyright Code for Change | Ultimate Growth 167www.codejika.com
PIXELS2 of 2
This screen is 720 pixels by 1280 pixels.
EXAMPLES:
720px
1280px
BRIEFING 1.1.2
PIXELS
2019 Copyright Code for Change | Ultimate Growth 168www.codejika.com
PIXELS2 of 2
When a box is:
width: 100px
you are saying the box is 100 pixels wide.
EXAMPLES:
2019 Copyright Code for Change | Ultimate Growth 169www.codejika.com
YOU’RE DOING AMAZING.
We’re almost done.
BRIEFING 1.1.2
width %
2019 Copyright Code for Change | Ultimate Growth 170www.codejika.com
width %1 of 2
width: 50%;
1. Not sure how wide your screen is? 2. Want it to cover half the screen?
Make a box with % of screen size.
BRIEFING 1.1.2
width %
2019 Copyright Code for Change | Ultimate Growth 171www.codejika.com
width %2 of 2
50% will cover half the screen, no matter the size.
width: 50%;
Box50%
Box50%
EXAMPLES:
2019 Copyright Code for Change | Ultimate Growth 172www.codejika.com
Here’s a SUPER modern wayof changing the size of your
text.
Psst. Most web designers don’t even know about it yet.
BRIEFING 1.1.2
VIEWPORT FONT
2019 Copyright Code for Change | Ultimate Growth 173www.codejika.com
VIEWPORT FONT2 of 2
font-size: 10vw;
1 vw point size =
1% of screen width.
CONGRATULATIONS
You’ve finished Training 4.
2019 Copyright Code for Change | Ultimate Growth 174www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 175www.codejika.com
WHOA!That was a lot of
information.
2019 Copyright Code for Change | Ultimate Growth 176www.codejika.com
In the next lesson it’s more typing and less reading.
Take a quick quiz...
2019 Copyright Code for Change | Ultimate Growth 177www.codejika.com
What’s responsive web design for?QUIZ
Viewport font sizes adapt to screen size.
Same content looks great and all screens.
Pixels are tiny dots that make up a screen.
Allowing boxes to fit and align on a page.
QUESTION 2.4.1
A.
B.
C.
D.
1. 2.
2019 Copyright Code for Change | Ultimate Growth 178www.codejika.com
How would you apply verdana (font) to h3, <div> and header?
h3, div, header { font: verdana; }
h3 ( font-family; verdana, arial, sans-serif; }
<h3 style = font-family: verdana; >
All of the above.
QUESTION 2.4.2
A.
B.
C.
D.
1. 2.
PREVIOUS ANSWER: B.
QUIZ
2019 Copyright Code for Change | Ultimate Growth 179www.codejika.com
1. 2.
PREVIOUS ANSWER: A.
WHAT WAS YOUR SCORE?
50% 100%
QUIZ
2019 Copyright Code for Change | Ultimate Growth 180www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 181www.codejika.com
AMAZING!We made it.
See you in Training 5.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 182
LOADING . . .
PROJECT 2:
Present your skills and plans in an attractive and engaging Website CV built with HTML, CSS and emojies.
PROJECT 2
Training 5
PURPOSE: Teach yourself. Teach your friends. Help others.
LEARN: The practical skills of a Jnr. Web Developer over 12 Projects.
WHAT’S THE DEAL?
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 183www.codejika.com
Desktop – v2
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
2019 Copyright Code for Change | Ultimate Growth 184www.codejika.com
OK.So,… You’ve done some amazing work so far.
2019 Copyright Code for Change | Ultimate Growth 185www.codejika.com
PREVIEW
As you know we’re creating an awesome
CV Website.
2019 Copyright Code for Change | Ultimate Growth 186www.codejika.com
So now it’s time for you to add some
important information.
1. Your dreams.
2. Your goals.
3. You’ll also learn HTML Lists.
TRAINING SNAPSHOTToday it’s all about you;
PROJECT 2 – TRAINING 5
2019 Copyright Code for Change | Ultimate Growth 187www.codejika.com
1. Review: HTML Structure / Setup: Header
2. Dream job, your birthday & center the header.
3. The Incredible Box ( and classes.)
4. Learn: HTML Colors & Fonts.
2019 Copyright Code for Change | Ultimate Growth 188www.codejika.com
5. Add your skills section & HTML lists.
6. The “Return” of the Emoji.
PROJECT 2
TRAINING SESSIONS:
Add an “About Me” & “Experiences” to your CV.
. . .
MISSION
This mission will include 4 challenges.
2019 Copyright Code for Change | Ultimate Growth 189www.codejika.com
BRIEFING 1.1.2
CV Creation
2019 Copyright Code for Change | Ultimate Growth 190www.codejika.com
1 of 2 CV Creation
A CV is your personal advertisement and it tells your
story.
Most people use it to apply for jobs.
BRIEFING 1.1.2
CV Creation
2019 Copyright Code for Change | Ultimate Growth 191www.codejika.com
2 of 2 CV Creation
These are sections that are suggested;
• DETAILS
• EDUCATION
• EXPERIENCE
• SKILLS
• CONTACT DETAILS
Add an h3 with an “ABOUT ME” section.
CODE :CHALLENGE
1 of 4
2019 Copyright Code for Change | Ultimate Growth 192www.codejika.com
WHERE :Below the “DETAILS” section.
<h3>ABOUT ME
<h3>
Write about yourself in a <p>.CODE :
PREPARE
2019 Copyright Code for Change | Ultimate Growth 193www.codejika.com
WRITE :
What you are excited about.
What you love doing & your dream.
CHALLENGE2 of 4
2019 Copyright Code for Change | Ultimate Growth 194www.codejika.com
<p> I love.... </p><p> My dream is.... </p>
You can add different lines by making a new <p> for each line.
CODE :Write about yourself in a <p>.
WHERE :Below the h3.
EXAMPLE :TIP:
2019 Copyright Code for Change | Ultimate Growth 195www.codejika.com
GREAT.Did you manage?
2019 Copyright Code for Change | Ultimate Growth 196www.codejika.com
Now we’re going to add a few more sections.
Add “Education” and “Experiences” sections.
. . .
MISSION
This mission will include 2 challenges.
2019 Copyright Code for Change | Ultimate Growth 197www.codejika.com
CHALLENGE3 of 4
2019 Copyright Code for Change | Ultimate Growth 198www.codejika.com
2011-2015: East-gate Primary, Boksburg
2015- Ongoing: Itirele-ZenzeleSecondary, Diepsloot
Future: 2020-2024: BSC in Computer Science, University of Pretoria
CODE :Add an h3 “EDUCATION” section.
Add the text in a few <p> s.
E X A M P L E T E X T :
2019 Copyright Code for Change | Ultimate Growth 199www.codejika.com
We want to know more about you.
Special things you’ve lived through which make you, you.
CHALLENGE4 of 4
2019 Copyright Code for Change | Ultimate Growth 200www.codejika.com
<p>I was born in... </p><p>I enjoy...</p><p>I once saw ... </p>
CODE :Add an “EXPERIENCES” section.
You can write anything you want in the <p>.
EXAMPLE TEXT :
2019 Copyright Code for Change | Ultimate Growth 201www.codejika.com
We want to know more about you.
Special things you’ve lived through which make you, you.
Make a section with a list & bullet points.
. . .
MISSION
This mission will include 6 challenges.
2019 Copyright Code for Change | Ultimate Growth 202www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 203www.codejika.com
In order to make that look “PRO” you’re going to use a list with bullet points.
2019 Copyright Code for Change | Ultimate Growth 204www.codejika.com
AWESOME.Now we’re going to learn
about lists.
BRIEFING 1.1.2
LISTS
2019 Copyright Code for Change | Ultimate Growth 205www.codejika.com
1 of 5 LISTS
There are two types of lists:
• Item• Item• Item
<ul> Unordered
<ol> Ordered1. First item2. Second item3. Third item
BRIEFING 1.1.2
LISTS
2019 Copyright Code for Change | Ultimate Growth 206www.codejika.com
2 of 5 LISTS<ol> Ordered List
1. Starts with <ol> 2. Each item is wrapped with <li> and
</li>
3. Ends with </ol>
<ol><li>First item</li></ol>
BRIEFING 1.1.2
LISTS
2019 Copyright Code for Change | Ultimate Growth 207www.codejika.com
5 of 5 LISTS
<ol><li>First item</li><li>Second item</li><li>Third item</li></ol>
LIST EXAMPLE:
<ol> Ordered List
1. First item2. Second item3. Third item
BRIEFING 1.1.2
LISTS
2019 Copyright Code for Change | Ultimate Growth 208www.codejika.com
4 of 5 LISTS<ul> Unordered List
1. Starts with <ul> 2. Each item is wrapped with <li> and
</li>
3. Ends with </ul>
<ul><li>First item</li></ul>
BRIEFING 1.1.2
LISTS
2019 Copyright Code for Change | Ultimate Growth 209www.codejika.com
5 of 5 LISTS
<ul><li>Item</li><li>Item</li><li>Item</li></ul>
LIST EXAMPLE:
<ul> Unordered List
• Item• Item• Item
2019 Copyright Code for Change | Ultimate Growth 210www.codejika.com
Simple, right?
2019 Copyright Code for Change | Ultimate Growth 211www.codejika.com
FANTASTIC!Now for the fun part. Tell us about what you are
good at.
CHALLENGE1 of 4
2019 Copyright Code for Change | Ultimate Growth 212www.codejika.com
<h3>SKILLS</h3>
<ul><li>I can make an
amazing spaghetti. </li>
<li>Taught Michael Jackson to dance.
</li>
<li>Level 17: Tree-climber
</li></ul>
CODE :Add an “SKILLS” section.
E X A M P L E :
2019 Copyright Code for Change | Ultimate Growth 213www.codejika.com
Did you notice that the list doesn’t look amazing?
2019 Copyright Code for Change | Ultimate Growth 214www.codejika.com
What do you think?
Should we add a bit of good old CSS?
CHALLENGE2 of 4
2019 Copyright Code for Change | Ultimate Growth 215www.codejika.com
p, ul {}
CODE :Provide some padding and increase size of <ul> and <p>.
CHALLENGE3 of 4
2019 Copyright Code for Change | Ultimate Growth 216www.codejika.com
p, ul {padding-left: 50px;}
CODE :Try 50px of padding on the left only.
CHALLENGE4 of 4
2019 Copyright Code for Change | Ultimate Growth 217www.codejika.com
p, ul {padding-left: 50px;font-size: 1.3em;}
CODE :Increase the size of text within these selectors by 30%.
Use em.
2019 Copyright Code for Change | Ultimate Growth 218www.codejika.com
GOOD JOB!
2019 Copyright Code for Change | Ultimate Growth 219www.codejika.com
ALMOST DONE.
Add a “CONTACT” section.
2019 Copyright Code for Change | Ultimate Growth 220www.codejika.com
Here’s an example of how your address can look.
Address: Zone 1, Diepsloot, South Africa |
Phone: +27 76 899 9999 |
Email: [email protected]
BRIEFING 1.1.2
PRIVACY
2019 Copyright Code for Change | Ultimate Growth 221www.codejika.com
PRIVACY:
Use a fake phone number and email.
Your information is private and you may choose share your CV
design online.
CHALLENGE
2019 Copyright Code for Change | Ultimate Growth 222www.codejika.com
Add a paragraph with town, area and country you live in.
Add a phone number and email too.
CODE :Add an “CONTACT” section.
2019 Copyright Code for Change | Ultimate Growth 223www.codejika.com
DONE!Wow. You finished all that
writing.
That was a lot.
CONGRATULATIONS
You’ve finished Training 5.
2019 Copyright Code for Change | Ultimate Growth 224www.codejika.com
Ready for Training 6?
2019 Copyright Code for Change | Ultimate Growth 225www.codejika.com
LET’S GO.
2019 Copyright Code for Change | Ultimate Growth 226www.codejika.com
IT’S AMAZNG…!
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 227
LOADING . . .
PROJECT 2:
Present your skills and plans in an attractive and engaging Website CV built with HTML, CSS and emojies.
PROJECT 2
Training 6
PURPOSE: Teach yourself. Teach your friends. Help others.
LEARN: The practical skills of a Jnr. Web Developer over 12 Projects.
WHAT’S THE DEAL?
LEARN MORE: www.CODEJIKA.com
CODEJIKA.COM
2019 Copyright Code for Change | Ultimate Growth 228www.codejika.com
Desktop – v2
PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
2019 Copyright Code for Change | Ultimate Growth 229www.codejika.com
This is the lesson you have been waiting for
your whole life.
2019 Copyright Code for Change | Ultimate Growth 230www.codejika.com
EMOJI TIME!?!
Emojies
TRAINING SNAPSHOT
This one is all about:
PROJECT 2 – TRAINING 5
2019 Copyright Code for Change | Ultimate Growth 231www.codejika.com
1. Review: HTML Structure / Setup: Header
2. Dream job, your birthday & center the header.
3. The Incredible Box ( and classes.)
4. Learn: HTML Colors & Fonts.
2019 Copyright Code for Change | Ultimate Growth 232www.codejika.com
5. Add your skills section & HTML lists.
6. The “Return” of the Emoji.
PROJECT 2
TRAINING SESSIONS:
BRIEFING 1.1.2
EMOJIES
2019 Copyright Code for Change | Ultimate Growth 233www.codejika.com
1 of 4 EMOJIIES
Most internet browsers have a few emoji images locked inside their
system.
BRIEFING 1.1.2
EMOJIES
2019 Copyright Code for Change | Ultimate Growth 234www.codejika.com
2 of 4 EMOJIIES
Each emoji has a special password.
And you can release it if you know it.
BRIEFING 1.1.2
EMOJIES
2019 Copyright Code for Change | Ultimate Growth 235www.codejika.com
3 of 4 EMOJIIES
Emojis are “Special Characters”.
They have between 4 and 6 letters or numbers.
E X A M P L E :
#x1F60E=
BRIEFING 1.1.2
EMOJIES
2019 Copyright Code for Change | Ultimate Growth 236www.codejika.com
4 of 4 EMOJIIES
Tell the browser that this not just random text;
E X A M P L E :
😎=
In front put a: “&” (ampersand)
1. Add a big emoji in a new <div> .
2. Style it with class .emoji .
. . .
MISSION
This mission will include 4 challenges.
2019 Copyright Code for Change | Ultimate Growth 237www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 238www.codejika.com
READY?
Add a new div.
CHALLENGE1 of 4
2019 Copyright Code for Change | Ultimate Growth 239www.codejika.com
WHE RE :
Inside the <div> in <header>.
<header><div class="circle"><div></div>
</div></header>
CODE :
Place an emoji into the new <div>.
Use this one: 😎
CODE :CHALLENGE2 of 4
2019 Copyright Code for Change | Ultimate Growth 240www.codejika.com
<header><div class="circle"><div>
😎</div>
</div></header>
CHECK
Do you see the emoji you added?
Isn’t it too small and out of place?
2019 Copyright Code for Change | Ultimate Growth 241www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 242www.codejika.com
Let’s fix that.
BRIEFING 1.1.2
font-size: em;
2019 Copyright Code for Change | Ultimate Growth 243www.codejika.com
1 of 1 font-size: em;
em is a simple way to make fonts larger.
font-size: 8em;TIP:1em = 16px
EXAMPLE:
Create a new CSS Class: .emoji and increase the font size to 8em .
CHALLENGE3 of 4
2019 Copyright Code for Change | Ultimate Growth 244www.codejika.com
.emoji {font-size: 8em;}
CODE :
Link the .emoji class to the new <div>.
CHALLENGE4 of 4
2019 Copyright Code for Change | Ultimate Growth 245www.codejika.com
<div class="circle"><div class="emoji">😎
</div></div>
CODE :
CHECK
How does it look now?
Are you happy with it?
2019 Copyright Code for Change | Ultimate Growth 246www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 247www.codejika.com
That was fun.
Now let’s improve the section titles.
Put an emoji in front of each section title.
. . .
MISSION
This mission will include 2 challenges.
2019 Copyright Code for Change | Ultimate Growth 248www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 249www.codejika.com
Put an emoji inside each section of your CV.
Insert an emoji before your h3 text.
CHALLENGE1 of 2
2019 Copyright Code for Change | Ultimate Growth 250www.codejika.com
<h3>☉ DETAILS</h3>
CODE :
Here are suggested ones for the rest:
CHALLENGE2 of 2
2019 Copyright Code for Change | Ultimate Growth 251www.codejika.com
☉ ABOUT ME
✎ EDUCATION
✔ EXPERIENCE
⚽ SKILLS
✉ CONTACT
CODE :
CHECK
Do you like how it looks?
2019 Copyright Code for Change | Ultimate Growth 252www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 253www.codejika.com
If not, here are few others to play with…
REFERENCE 1.1.2
BROWSER EMBEDDED EMOJIES
2019 Copyright Code for Change | Ultimate Growth 254www.codejika.com
BROWSER EMBEDDED EMOJIESSET 1
EMOJI CODE:
❤ 10084
✽ 10045
✿ 10047
✞ 10014
⚡ 9889
⚪ 9898
⚫ 9899
⚠ 9888
✚ 10010
© copy;
SET 2
EMOJI CODE:
☕ 9749
♫ 9835
☆ 9734
☀ 9728
☺ 9786
⚽ 9917
❀ 10048
☔ 9748
∞ infin;
➜ 10140
More online here:https://www.w3schools.com/charsets/ref_utf_misc_symbols.asp
2019 Copyright Code for Change | Ultimate Growth 255www.codejika.com
Now let’s finish off this training with tweaking our
SKILLS List.
Replace bullet points with emojies.
. . .
MISSION
This mission will include 2 challenges.
2019 Copyright Code for Change | Ultimate Growth 256www.codejika.com
Add list-style: none; to the p, ul CSS.
This removes the black bullet-points.
CHALLENGE1 of 2
2019 Copyright Code for Change | Ultimate Growth 257www.codejika.com
p, ul {list-style: none; padding-left: 50px;font-size: 1.3em;}
CODE :
2019 Copyright Code for Change | Ultimate Growth 258www.codejika.com
How does it look without the bullet-points?
CHECK
Add ⚪ in front of each item on the list.
CHALLENGE2 of 2
2019 Copyright Code for Change | Ultimate Growth 259www.codejika.com
<li>⚪ Awesome at...
</li>
<li>⚪ Dance like ...
</li>
<li>⚪ Level 5:...
</li>
CODE :
2019 Copyright Code for Change | Ultimate Growth 260www.codejika.com
Do you prefer this look?
CHECK
2019 Copyright Code for Change | Ultimate Growth 261www.codejika.com
We’re going to finish now with a very simple, but
important “Special Character”.
BRIEFING 1.1.2
COPYRIGHT
2019 Copyright Code for Change | Ultimate Growth 262www.codejika.com
4 of 4 COPYRIGHT
Tell everyone that the content you’ve written is your original work.
E X A M P L E :
©=©
BRIEFING 1.1.2
COPYRIGHT
2019 Copyright Code for Change | Ultimate Growth 263www.codejika.com
4 of 4 COPYRIGHT
It could look like this:
<br>© Copyright 2021 Thandi Ndlovu Inc.
Add a copyright line at the end of your website right before </body> .
CHALLENGE1 of 4
2019 Copyright Code for Change | Ultimate Growth 264www.codejika.com
<br>© Copyright 2021 Thandi Ndlovu Inc.
CODE :
Add the year and your name after the copyright sign.
T IP :
2019 Copyright Code for Change | Ultimate Growth 265www.codejika.com
Here’s a quick way to center your copyright line:
Wrap the content you want to center in <center> tags.
CHALLENGE1 of 4
2019 Copyright Code for Change | Ultimate Growth 266www.codejika.com
<center><br>© Copyright 2021...</center>
CODE :
2019 Copyright Code for Change | Ultimate Growth 267www.codejika.com
WOW!
Good job!
Just double- check your code now.
CHECKPOINTYour code should look like this:
<h3>☉ ABOUT ME
</h3><p> Stuff.... </p><h3>
✎ EDUCATION</h3><p> Stuff... </p><h3>✔ EXPERIENCE</h3><p> Stuff... </p><h3>
⚽ SKILLS</h3><ul>
<li>⚪ List Stuff</li></ul><h3>
✉ CONTACT DETAILS</h3><p> Stuff... </p><center>
<br>© Copyright 2018 ...</center>
...2019 Copyright Code for Change | Ultimate Growth 268www.codejika.com
2019 Copyright Code for Change | Ultimate Growth 269www.codejika.com
You just finished Project 2.
That’s a MAJOR AWESOME accomplishment.
2019 Copyright Code for Change | Ultimate Growth 270www.codejika.com
Well done!
TIME TO CELEBRATE.
2019 Copyright Code for Change | Ultimate Growth 271www.codejika.com
If you enjoyed Project 2,...
You’ll LOVE Project 3.
2019 Copyright Code for Change | Ultimate Growth 272www.codejika.com
See you there.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 273
BYE.See you soon.