0% found this document useful (0 votes)

166 views

Project 2 Codejika - Com DT v2

Uploaded by

Arslan Coskun

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

166 views

Project 2 Codejika - Com DT v2

Uploaded by

Arslan Coskun

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 273

CODEJIKA.

COM

PROJECT 2 LET’S GO…

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 1

WHAT’S THE DEAL?
CODEJIKA.COM
PROJECT 2:

PROJECT 2 Present your skills and

plans in an attractive and

Training 1
engaging Website CV built
with HTML, CSS and
emojies.

PRONOUNCED: CODE–GEE-KA
LEARN:
JIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE. The practical skills of a
Jnr. Web Developer over
12 Projects.

PURPOSE:
Desktop – v1 Teach yourself. Teach
LEARN MORE: www.CODEJIKA.com your friends. Help others.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 2

PROJECT 2

Are you ready?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 3

PROJECT 2
TRAINING SESSIONS:

1. Review: HTML Structure / Setup: Header

2. CSS Classes & customize.

3. Box, Circle & center classes.
4. Learn: HTML Colors & Fonts.
5. Add skills section & lists.
6. Add emoji's & customize.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 4
VISION
In Project 2 you’ll create CV
Website.
1. You’ll build it with HTML,
2. style it with CSS
3. and there’s a surprise at the
end.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 5
PREVIEW

Your CV Website
will look like this:

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 6

TRAINING SNAPSHOT PROJECT 2 – TRAINING 1

These are your missions for today:

1. Review the Website Structure

2. Add the <header> Section and a
border.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 7

1.1.2

<!DOCTYPE html>
<head>

START
<style>
</style>
</head>
Start by setting up <body>
the skeleton of your
code.

TIP:
You learnt this in your last </body>
project.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 8
CHALLENGE
STEP 1 CODE :
Add this part:
<!DOCTYPE html>
<head>
<style>
</style>
</head>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 9
CHALLENGE
STEP 2 CODE :
Now add the <body>
section.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 10

CHECKPOINT <!DOCTYPE html>
Your code should <head>
look like this: <style>
</style>
</head>

<body>

</body>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 11

BRIEFING 1.1.2
<header> </header>
<header> Tag
The <header> section of a website
usually includes;
1. Company Name
2. Logo &
3. Menu

TIP:
Don’t get confused. It’s not the <head>.
The <header> goes in the <body> section.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 12
CHALLENGE
STEP 1 CODE :
Add a <header> .

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 13

CHALLENGE CODE :
STEP 2
Add your name in all-caps
(capital letters) in an <h1>
in <header> .

<h1>
THANDI NDLOVU
</h1>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 14
TIP :
Don’t forget to
close your tags!

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 15

GREAT JOB!
You’ll be a pro in no
time!

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 16

MISSION

Style your <header>.

...
This mission will include 4 challenges.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 17

You got this.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 18

BRIEFING 1.1.2 <head>
CSS <style>
<style>
CSS Basics
header {
background: #ce54c7;

REVIEW
border: solid #ad54ce;
border-width: 10px 0px 10px 0px;
} Is applied to
in <body>
</style>
CSS styles HTML. </head>
<body>
<header>
<h1>Thandi Ndlovu</h1>
</header>
</body>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 19
CHALLENGE CODE :
STEP 1
Add a CSS selector called
header.
Add some
styling to the
<style>
header.
header {
}
</style>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 20
CHALLENGE
STEP 2 CODE :
Add a lightblue background
to the header element.

background: lightblue;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 21

CHALLENGE CODE :
STEP 3
Add a simple blue border to
<header>.
Like this:

border: solid blue;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 22

THINK
If you want a border only on the
TOP and the BOTTOM.
Not all the way around.

How do you do this?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 23
BRIEFING 1.1.2
border-width:
Top & Bottom Border

With borders you say what

sides and what width you
want.

10px 0px 6px 0px;

4th Left
2nd Right

3rd Bottom
1st Top
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 24
CHALLENGE CODE :
STEP 4
Add a top and bottom border
to header.

Both should be 10px wide.

border-width: 10px 0px 10px 0px;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 25

How did you do?

EXCITING!!!
Go to the next slide and compare your
code.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 26

<!DOCTYPE html>
CHECKPOINT <head>
<style>
header {
background: lightblue;
Your code should border: solid blue;
look like this: border-width: 10px 0px 10px 0px;
}
</style>
</head>

<body>
<header>
<h1>
Thandi Ndlovu
</h1>
</header>
</body>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 27

FABULOUS!
Now your code looks
bomb…

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 28

WEB CHECK:

CHECKPOINT
Your code should
look something like
this:

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 29

Did you know?
The best way to learn how to
code is with friends?

When it gets complicated you can help

each other.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 30

QUESTION 2.1.1
QUIZ Where is a CSS rule located?
1. 2.
 A. <header>

B. <style>

C. <body>

D. Curly brackets

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 31

QUESTION 2.1.2
QUIZ How do you link CSS styles to
content in the HTML structure?
1. 2.
 A. Using colon & then semi-colon at the end.

B. Opening and closing tags.

C. The indent

D. CSS selectors & html tags of the same name.

PREVIOUS ANSWER: B.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 32
QUIZ
WHAT WAS YOUR SCORE?
1. 2.

50% 100%

PREVIOUS ANSWER: D.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 33
Ready for
Training 2?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 34

LET’S GO.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 35

LOADING . . .
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 36
WHAT’S THE DEAL?
CODEJIKA.COM
PROJECT 2:

PROJECT 2 Present your skills and

plans in an attractive and

Training 2
engaging Website CV built
with HTML, CSS and
emojies.

LEARN:
PRONOUNCED: CODE–GEE-KA The practical skills of a
JIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
Jnr. Web Developer over
12 Projects.

PURPOSE:
Desktop – v3 Teach yourself. Teach
LEARN MORE: www.CODEJIKA.com your friends. Help others.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 37

SAWUBONA*.

*”Hello” in Zulu.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 38
Here’s an overview of the
projects.
You’re on Project 2.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 39

PROJECTS OVERVIEW:
1. Simple Landing Page // 4 Sessions | 90 Minutes
<Certificate>

2. CV Website // 6 Sessions | 90 Minutes

Milestone
Project

3. Simple Biz Website // 6 Sessions | 2.5 Hours

4. Styling your Website // 4 Sessions | 3 Hours

5. JavaScript OrderForm // 4 Sessions | 3 Hours

6. Basic Business Website // 5 Sessions | 4 Hours

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 40

You’re also on Training 2
of Project 2.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 41

PROJECT 2
TRAINING SESSIONS:
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.
5. Add skills section & lists.
6. The “Return” of the Emoji.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 42
TRAINING SNAPSHOT PROJECT 2 – TRAINING 2

These are your missions for today:

1. Learn how to center everything.

2. Learn italics.
3. Add a section with your birthday.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 43

MISSION

Center everything.

...
This mission will include 2 challenges.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 44

We’ll use two ways to get
everything in the middle:

1. First, margin: auto; to center

everything inside <header>
( Including what we put in later.)

2. Center all text with:

text-align: center;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 45

BRIEFING 1.1.2
margin: auto;
margin: auto;
Margins are awesome.
But with this one you can even “Center”
elements.

Centered ( The text )

margin: auto;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 46

CHALLENGE
STEP 1 CODE :
Center the <header> using
margin: .

TIP: margin: 0 auto;

In the header { }
selector in <style>.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 47
BRIEFING 1.1.2
text-align:
text-align:
Tells the text where to “lean”.

text-align: left;
text-align: right;
text-align: center;

Left, right or center.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 48

CHALLENGE
STEP 2 CODE :
Center the text in the
<header> section.

Use:
text-align:
TIP:
Close the element with
a ; (semi-colon).
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 49
...
header {
CHECKPOINT background: #ce54c7;
border: solid #ad54ce;
border-width: 10px 0px 10px 0px;
Your code should margin: 0 auto;
text-align: center;
look like this: }

...
<body>
<header>
<br>
<h1>
THANDI NDLOVU
</h1>
</header>
</body>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 50
MISSION
COMPLETE

You managed that like a BOSS!!!

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 51
MISSION

1. Decide on your dream job,

2. Learn about italics.

...
This mission will include 4 challenges.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 52

What’s your Dream?
We’re excited about you learning skills
to make it a reality.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 53

THINK
What do you want to do when you
grow up?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 54

CHALLENGE
STEP 1
TYPE :
Add your dream job or future
profession.
After the </h1> in <header> .

EXAMPLE:

</h1>
Aspiring Mechanical Engineer
</header>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 55

BRIEFING 1 of 2 1.1.2
<i> </i>
Italic Tag
The <i> tag stands for italics .
Italics is text slanted to the side.

EXAMPLE:

I <i>LOVE</i> ICECREAM!

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 56

CHALLENGE
STEP 2
TYPE :
Add italics to your dream job by
using <i>.

EXAMPLE:

</h1>
<i>
Aspiring Mechanical Engineer
</i>
</header>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 57

BRIEFING 2 of 2 1.1.2
<i> </i>
Italic Tag
FYI: These are other ways to style
specifIc words:

<em> (emphasized text)

<strong> (important text)
<mark> (marked/ highlighted text)

JUST FOR FUN: Try it in your next sentence.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 58
AWESOME!

You aced those italics.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 59

Now increase your <h1> font
to give the website some
character.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 60

CHALLENGE
CODE :
Create a h1 {} rule.
Use:
font-size:
Make h1 text (To make it 3x the size.)
larger.
h1 {
font-size: 3em;
}

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 61

NICE!

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 62

Remember <br>?

We need a couple of them to

space things a little.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 63

BRIEFING 1.1.2
<br> = New line
<br> Tag
Typing <br> is like hitting the
“Enter” key on your keyboard…
It adds a line.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 64

CHALLENGE
CODE :
Add <br>
1. After <header> opening tag.
2. Twice after </i>
3. After </header> closing tag.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 65

...
CHECKPOINT <body>

Your code should <header>

<br>
look like this: <h1>
THANDI NDLOVU
</h1>
<i>
Aspiring Mechanical Engineer
</i>
<br> <br>
</header>
<br>

</body>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 66

Yabadabadoo!
Now add some details about
yourself.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 67

MISSION

Create a new section with;

• a title,
• your date of birth and
• other details.

...
This mission will include 4 challenges.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 68

CHALLENGE
STEP 1
CODE :
As a title, type “DETAILS” between an
opening and closing <h3> tag.

WHERE:
Put this below the last <br> and before the
</body> closing tag.

<h3>
DETAILS
</h3>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 69

CHALLENGE
STEP 2
CODE :
Add a <p> with your Date of birth in
it.

WHERE:
Below the <h3>.

<p>Date of Birth: 27 July 2006</p>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 70

FANTASTIC!

Now two more lines.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 71

CHALLENGE
STEP 3
CODE :
Add another <p> with your School
Name in it.

<p>School: Sandringham Secondary</p>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 72

CHALLENGE
STEP 4
CODE :
Add one last <p> with what grade you
are in.

<P>Grade: 9</p>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 73

...
CHECKPOINT
</header>
<br>
Your code should <h3>
look like this: DETAILS
</h3>
<p>Date of Birth: 27 July 2006</p>
<p>School: Sandringham Secondary</p>
<P>Grade: 9</p>

</body>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 74

QUESTION 2.2.1
QUIZ What is <i> for?
1. 2.
 A. Increase in font-size.

B. Italian font size originating in Bulgaria.

C. Slanted text.

D. For “Information” on websites.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 75

QUESTION 2.2.2
QUIZ <h3> titles should be centered
using CSS.
1. 2.
 A. <h3 style=center>

B. h3 ( text-align: center; color: red; )

C. h3 { text-align: center; }

D. Use the tab key to center.

PREVIOUS ANSWER: C.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 76
QUIZ
WHAT WAS YOUR SCORE?
1. 2.

50% 100%

PREVIOUS ANSWER: C.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 77
SUGGESTION:
If you have internet: We recommend:
Download and install a
better code editor. Notepad++

WHY?
It’s easier and shows any FOLLOW THE LINK:
mistakes in your code. https://notepad-plus-plus.org/download/

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 78

Ready for
Training 3?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 79

LET’S GO.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 80

LOADING . . .
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 81
WHAT’S THE DEAL?
CODEJIKA.COM
PROJECT 2:

PROJECT 2 Present your skills and

plans in an attractive and

Training 3
engaging Website CV built
with HTML, CSS and
emojies.

LEARN:
PRONOUNCED: CODE–GEE-KA The practical skills of a
JIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
Jnr. Web Developer over
12 Projects.

PURPOSE:
Desktop – v4 Teach yourself. Teach
LEARN MORE: www.CODEJIKA.com your friends. Help others.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 82

OMG
This is a SUPER FUN Lesson

But the next one (Training 4)

is even better…
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 83
TRAINING SNAPSHOT PROJECT 2 – TRAINING 3

These are your missions for today:

1. Make a box.
2. Transform it into a circle with 1 line.
3. Remember 3 things about Classes.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 84

What if,
all of a sudden,...

you decided you wanted...

a mysterious box.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 85
In the middle of your website.
width: 100px;

height: 100px;
What would you do?!?
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 86
MISSION

Make a box.

...
This mission will include 3 challenges.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 87

BRIEFING 1 of 4 1.1.2
MAKE A BOX:
Make a box
All you have to do is write a simple CSS
Class and :
1. Define width
2. Define height

.box {
width: 100px;
height: 100px;
}
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 88
BRIEFING 2 of 4 1.1.2
MAKE A BOX:
Make a box

And “magical” CSS does all

the rest. 

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 89

BRIEFING 3 of 4 1.1.2
MAKE A BOX: CSS
Make a box
.box {
width: 100px;
Use height: 100px;
class="box" to }
say where you
want it.
HTML

<div class="box">
</div>
Amazing! Right?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 90

BRIEFING 4 of 4 1.1.2
MAKE A BOX:
Make a box

In this case, it’s in a <div>.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 91

CHALLENGE
STEP 1 CODE :
1. Make a .box CSS class.
2. Make it 250px wide & high.

.box {
height: 250px;
width: 250px;
TIP:
}
In <style> section.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 92
CHALLENGE
STEP 2 CODE :
1. Make a <div> in the <header>
section above <h1>.
2. Add the .box class to the
<div>.

<div class="box">
TIP:
</div>
In <header> above
<h1>.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 93
To see your box, you have
to add a border or
background.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 94

CHALLENGE
STEP 3 CODE :
Add this to the .box class:

TIP:
background: blue;
In .box { } .
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 95
...
CHECKPOINT .box {
height: 250px;
width: 250px;
background-color: blue;
Your code should }
look like this: </style>
</head>

<body>
<header>
<div class="box">
</div>
<h1>
THANDI NDLOVU
</h1>
</header>

www.codejika.com
...
2019 Copyright Code for Change | Ultimate Growth 96
WOW
You are on

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 97

Did you wonder why we had
to use a <div> ?

Here’s a quick review…

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 98

BRIEFING 1.1.2

<div> Tag

<div>
What’s a It’s like a magical
DIV? stretchy container &
you can put any type
of object in it.
</div>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 99

Ok.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 100

Did you enjoy making a
box?

We are going to do something

super cool now.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 101

With one line of code we
are going to turn the box
into a circle.

Ready?
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 102
MISSION

Make a circle.

...
This mission will include 4 challenges.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 103

BRIEFING 1.1.2
border-radius:
border-radius:

Make a circle out of a square ( 50% )

50%

or add rounded corners. ( 5% )

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 104

CHALLENGE
STEP 1 CODE :
Add border-radius: to .box class
with a value of 50%.

border-radius: 50%;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 105

CHALLENGE
STEP 2 CODE :
1. Change CSS Class .box to .circle
2. Replace “box” in: <div
Change your class="box"> with circle .
class name.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 106

...
CHECKPOINT .circle {
height: 250px;
width: 250px;
background-color: blue;
Your code should border-radius: 50%;
}
look like this:
</style>
</head>
<body>
<header>
<br>
<div class="circle">
</div>
<h1>
THANDI NDLOVU
</h1>
</header>
</body>

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 107

COOL
Just two more small things
to finish the circle.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 108

CHALLENGE
STEP 3 CODE :
Add a border.
Add a solid, 10px wide, white border
to the .circle CSS class.

border: 10px solid white;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 109

In order to make sure the
circle stays centered around
text, use this layout trick:

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 110

CHALLENGE
STEP 3 CODE :
Add to the circle class:

TIP:
display: inline-block;
In .circle { } .
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 111
GREAT!
You’re done with the circle.

Keep it up. You’re doing amazing! 

We believe in you!
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 112
MISSION

Learn 3 things about CSS Classes.

...
This mission will include 1 “Remember”.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 113

Don’t worry if you don’t
understand this part.
It’s just so you have an idea of
how they work.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 114

Here’s a simple CSS
class.

.banner {
EXAMPLE: color: pink;
}
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 115
BRIEFING 1 of 4 1.1.2

Make a box
CSS Classes have two parts;

A. CSS: The styling

.banner {
CSS CLASS }
color: pink;
OVERVIEW
B. HTML: Where it’s applied.
<h3 class="banner" >

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 116

Here are 3 things you
should know about
CSS Classes

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 117

BRIEFING 2 of 4 1.1.2

Make a box
1.
Classes are
SUPER POWERFUL
CSS CLASS
OVERVIEW and make up
most of CSS.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 118

BRIEFING 3 of 4 1.1.2

Make a box
2.
Classes always
start with a dot
CSS CLASS
OVERVIEW
.
“ ”.
.banner {
color: pink;
}

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 119

BRIEFING 4 of 4 1.1.2

Make a box
3.
Write them once
and
CSS CLASS
OVERVIEW use them
ANYWHERE.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 120

REMEMBER

Can you remember the

3 main things about
CSS Classes?

TIP: Write it in your notebook.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 121
That was a HARD lesson.

Do you agree?

Invite a friend to work together to

learn and “Debug”
(when code isn’t working).

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 122

CONGRATULATIONS

You’ve finished
Training 3.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 123
Training 4 is SUPER
FUN!
It’s actually magical.

= Hint

See you there.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 124

LOADING . . .
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 125
WHAT’S THE DEAL?
CODEJIKA.COM
PROJECT 2:

PROJECT 2 Present your skills and

plans in an attractive and

Training 4
engaging Website CV built
with HTML, CSS and
emojies.

LEARN:
PRONOUNCED: CODE–GEE-KA The practical skills of a
JIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
Jnr. Web Developer over
12 Projects.

PURPOSE:
Desktop – v3 Teach yourself. Teach
LEARN MORE: www.CODEJIKA.com your friends. Help others.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 126

Love colors?

Well, the wonderful thing about

web design is…

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 127

…you can use ANY color
you want.

Yes. Even the ones that

don’t have names.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 128

TRAINING SNAPSHOT PROJECT 2 – TRAINING 4

We gonna be learnin’…

1. Colors have codes.

2. Fonts (text styles) have families.
3. What is “Responsive” web design?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 129

This is how far you’ve
come.

Two trainings left, then

you’re done with P2.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 130

PROJECT 2
TRAINING SESSIONS:
1. Review: HTML Structure / Setup: Header

2. Dream job, your birthday & center the header.

Use colors in CSS.

...
This mission will include 6 challenges.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 132

BRIEFING 1 of 4 1.1.2
HTML Colors
HTML Colors

A hexadecimal color
( 6-Numbers) is specified with:

#RRGGBB

Green

Blue
www.codejika.com Red
2019 Copyright Code for Change | Ultimate Growth 133
BRIEFING 2 of 4 1.1.2
HTML Colors CONTENT
HTML Colors

= #0000FF
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.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 134

BRIEFING 3 of 4 1.1.2
HTML Colors CONTENT
HTML Colors

Numbers Between 00 and FF

specify the intensity of the color.
EXAMPLE:

= #ce54c7
TIP:
Here’s a great place to choose colors:
https://www.w3schools.com/colors/colors_picker.asp
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 135
BRIEFING 4 of 4 1.1.2
EXPERIMENT:
HTML Colors

Try it yourself
Replace some numbers with any you want.

body {
background: #ce54c7;
}

See what happens.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 136

Now we’re going to style
<h3> with;
• Color
• Padding
• Font-size
• border.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 137

READY?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 138

CHALLENGE
1 of 5 CODE :
Create a h3 selector.

h3 {
}
TIP:
In <style> section.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 139
CHALLENGE
2 of 5 CODE :
Add a background color to
h3.

background-color: #ce54c7;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 140

BRIEFING 1.1.2
padding:
padding:

It’s like having pillows around

you when you are inside a box.
REVIEW:

padding: 40px;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 141

CHALLENGE
3 of 5 CODE :
Add 15px of padding to h3.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 142

CHALLENGE
4 of 5 CODE :
Increase the h3 font size
with em.

font-size: 1.5em;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 143

CHALLENGE
5 of 5 CODE :
Add a left border with this
color: #d6d5cd

border-left: 10px solid #d6d5cd;

TIP:
You learned about
borders in P1 (Project 1.)
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 144
SUPER COOL!
You just styled the <h3>
section.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 145

Do you want to learn how to:

Style two different

sections at the
same time?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 146

BRIEFING 1.1.2
STYLING TWO ELEMENTS
STYLING TWO ELEMENTS

This is VERY simple.

Just type both selectors with a comma

( , ) between them.

header, h3 {
}

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 147

That’s it.
Easy right?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 148

CHALLENGE
CODE :
Make both <header> &
<h3> white using a single
CSS element.

header, h3 {
color: white;
}

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 149

MISSION

Learn about fonts.

...
This mission will include 1 challenge.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 150

BRIEFING 1 of 5 1.1.2
FONTS
FONTS

Fonts are a certain style

of text.

GRAPHIC

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 151

BRIEFING 2 of 5 1.1.2
FONTS
FONTS
There are two main types
of fonts;

1. Serif
Has curly flicks.
2. Sans Serif
Very straight.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 152
BRIEFING 3 of 5 1.1.2
FONTS
FONTS

Serif:
EXAMPLES: This is Times New Roman

Sans Serif:
This is Arial
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 153
BRIEFING 2 of 5 1.1.2
FONTS
FONTS
Do you see the differences?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 154

BRIEFING 2 of 5 1.1.2
FONTS
FONTS (at CODEJIKA.COM)
For example ;
For text we use:
Radjdani
And for code we use:
TIP:
Consolas is a third type
Consolas
of font: monospace
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 155
GREAT!
Now let’s learn about font
familes.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 156

BRIEFING 1 of 2 1.1.2
font-family:
font-family:
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.
TIP:
The next font in the font-
family is used, if the first
font is missing.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 157

BRIEFING 2 of 2 1.1.2
font-family:
font-family:

This becomes a font family.

Most common:
font-family: Arial, Helvetica,
sans-serif;

Also great:
font-family: "Times New Roman",
Times, serif;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 158

CHALLENGE
CODE :
Use Helvetica, Arial and San-
serif as font-family for body.

body {
font-family: helvetica, arial,
san-serif;
}

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 159

CHALLENGE
CODE :
Add Arial, Gadget and san serif
as font-family for header & h3.

header, h3 {
color: white;
font-family: "Arial Black",
Gadget, sans-serif;
}

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 160

MISSION

Understand
• “Responsive” web design,
• Pixels
• screen sizes.
...
This mission will include 0 challenges.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 161

BRIEFING 1 of 2 1.1.2
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN

A responsive website
works on different screen
sizes.
What do we mean by screen size?

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 162

BRIEFING 2 of 2 1.1.2
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN
Screen size?
DESKTOP:
MOBILE:

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 163

GOOD.
Now we’re gonna learn
about how to measure
screen sizes.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 164

BRIEFING 2 of 2 1.1.2
PIXELS
PIXELS

Pixels are a way to measure a

screen.
Your screen is made of thousands
of pixels.

pixel = px

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 165

BRIEFING 2 of 2 1.1.2
PIXELS
PIXELS

A pixel is like a dot of colour.

EXAMPLES:

Thousands of tiny pixels make up

an image.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 166
BRIEFING 2 of 2 1.1.2
PIXELS
PIXELS

720px

This screen is

1280px
EXAMPLES: 720 pixels by
1280 pixels.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 167

BRIEFING 2 of 2 1.1.2
PIXELS
PIXELS

When a box is:

width: 100px
EXAMPLES:
you are saying the box is
100 pixels wide.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 168

YOU’RE DOING AMAZING.
We’re almost done.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 169

BRIEFING 1 of 2 1.1.2
width %
width %

1. Not sure how wide your screen is?

2. Want it to cover half the screen?

Make a box with % of screen size.

width: 50%;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 170

BRIEFING 2 of 2 1.1.2
width %
width %

Box
50%
50% will cover half
the screen, no
EXAMPLES: Box
matter the size. 50%
width: 50%;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 171

Here’s a SUPER modern way
of changing the size of your
text.

Psst. Most web designers don’t even know

about it yet.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 172

BRIEFING 2 of 2 1.1.2
VIEWPORT FONT
VIEWPORT FONT

1 vw point size
=
1% of screen width.

font-size: 10vw;

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 173

CONGRATULATIONS

You’ve finished
Training 4.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 174
WHOA!
That was a lot of
information.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 175

In the next lesson it’s more
typing and less reading.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 176

Take a quick quiz...

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 177

QUESTION 2.4.1
QUIZ What’s responsive web design for?
1. 2.
 A. Viewport font sizes adapt to screen size.

B. Same content looks great and all screens.

C. Pixels are tiny dots that make up a screen.

D. Allowing boxes to fit and align on a page.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 178

QUESTION 2.4.2
QUIZ How would you apply verdana (font)
to h3, <div> and header?
1. 2.
 A. h3, div, header { font: verdana; }

B. h3 ( font-family; verdana, arial, sans-serif; }

C. <h3 style = font-family: verdana; >

D. All of the above.

PREVIOUS ANSWER: B.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 179
QUIZ
WHAT WAS YOUR SCORE?
1. 2.

50% 100%

PREVIOUS ANSWER: A.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 180
AMAZING!
We made it.

See you in Training 5.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 181
LOADING . . .
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 182
WHAT’S THE DEAL?
CODEJIKA.COM
PROJECT 2:

PROJECT 2 Present your skills and

plans in an attractive and

Training 5
engaging Website CV built
with HTML, CSS and
emojies.

LEARN:
PRONOUNCED: CODE–GEE-KA The practical skills of a
JIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
Jnr. Web Developer over
12 Projects.

PURPOSE:
Desktop – v2 Teach yourself. Teach
LEARN MORE: www.CODEJIKA.com your friends. Help others.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 183

OK.
So,… You’ve done some
amazing work so far.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 184

PREVIEW
As you know we’re
creating an awesome
CV Website.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 185

So now it’s time for
you to add some
important information.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 186

TRAINING SNAPSHOT PROJECT 2 – TRAINING 5

Today it’s all about you;

1. Your dreams.
2. Your goals.
3. You’ll also learn HTML Lists.

www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 187

PROJECT 2
TRAINING SESSIONS:
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.
5. Add your skills section & HTML lists.
6. The “Return” of the Emoji.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 188
MISSION

Add an “About Me” & “Experiences”

to your CV.

...
This mission will include 4 challenges.

BRIEFING 1 of 2 1.1.2
CV Creation
CV Creation

A CV is your personal
advertisement and it tells your
story.

Most people use it to apply for jobs.

BRIEFING 2 of 2 1.1.2
CV Creation
CV Creation

These are sections that are

suggested;
• DETAILS
• EDUCATION
• EXPERIENCE
• SKILLS
• CONTACT DETAILS

CHALLENGE
1 of 4 CODE :
Add an h3 with an “ABOUT
ME” section.
WHERE:
Below the “DETAILS” section.

<h3>
ABOUT ME
<h3>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 192
PREPARE
CODE :
Write about yourself in a <p>.

WRITE:
What you are excited about.
What you love doing & your dream.

CHALLENGE
2 of 4 CODE :
Write about yourself in a <p>.

WHERE:
Below the h3.

EXAMPLE:
TIP:
You can add different <p> I love.... </p>
lines by making a new
<p> for each line. <p> My dream is.... </p>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 194
GREAT.
Did you manage?

Now we’re going to add a
few more sections.

MISSION

Add “Education” and “Experiences”

sections.

...
This mission will include 2 challenges.

CHALLENGE
3 of 4 CODE : EXAMPLE TEXT:

Add an h3 2011-2015:
East-gate Primary,
“EDUCATION” Boksburg
section.
2015- Ongoing:
Itirele-Zenzele
Add the text in a Secondary, Diepsloot

few <p> s. Future: 2020-2024:

BSC in Computer
Science, University
of Pretoria

We want to know more
about you.

Special things you’ve lived through

which make you, you.

CHALLENGE
4 of 4 CODE :
Add an “EXPERIENCES” section.
You can write anything you
want in the <p>.
EXAMPLE TEXT:

<p>I was born in... </p>

<p>I enjoy...</p>
<p>I once saw ... </p>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 200
We want to know more
about you.

Special things you’ve lived through

which make you, you.

MISSION

Make a section with a list & bullet

points.

...
This mission will include 6 challenges.

In order to make that look
“PRO” you’re going to use
a list with bullet points.

AWESOME.
Now we’re going to learn
about lists.

BRIEFING 1 of 5 1.1.2
LISTS
LISTS

There are two types of lists:

<ol> Ordered
1. First item
2. Second item
3. Third item
<ul> Unordered
• Item
• Item
• Item

BRIEFING 2 of 5 1.1.2
LISTS
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 5 of 5 1.1.2
LISTS
LISTS
<ol> Ordered List
LIST EXAMPLE:

1. First item
2. Second item
3. Third item

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 207
BRIEFING 4 of 5 1.1.2
LISTS
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 5 of 5 1.1.2
LISTS
LISTS
<ul> Unordered List
LIST EXAMPLE:

•Item
•Item
•Item

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 209
Simple, right?

FANTASTIC!
Now for the fun part. Tell
us about what you are
good at.

CHALLENGE EXAMPLE:

1 of 4 CODE : <h3>SKILLS</h3>
Add an “SKILLS”
<ul>
section. <li>I can make an
amazing spaghetti.
</li>
<li>Taught Michael
Jackson to dance.
</li>
<li>Level 17: Tree-
climber
</li>
</ul>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 212
Did you notice that the
list doesn’t look amazing?

What do you think?

Should we add a bit of

good old CSS?

CHALLENGE
2 of 4 CODE :
Provide some padding and
increase size of <ul> and <p>.

p, ul {
}

CHALLENGE
3 of 4 CODE :
Try 50px of padding on the left
only.

p, ul {
padding-left: 50px;
}
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 216
CHALLENGE
4 of 4 CODE :
Increase the size of text within
these selectors by 30%.
Use em.

p, ul {
padding-left: 50px;
font-size: 1.3em;
}
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 217
GOOD JOB!

ALMOST DONE.
Add a “CONTACT” section.

Here’s an example of how
your address can look.

Address: Zone 1, Diepsloot, South Africa |

Phone: +27 76 899 9999 |
Email: [email protected]
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 220
BRIEFING 1.1.2
PRIVACY:
PRIVACY

Use a fake phone number and

email.

Your information is private and

you may choose share your CV
design online.

CHALLENGE
CODE :
Add an “CONTACT” section.

Add a paragraph with town, area and

country you live in.
Add a phone number and email too.

DONE!
Wow. You finished all that
writing.

That was a lot.

CONGRATULATIONS

You’ve finished
Training 5.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 224
Ready for
Training 6?

IT’S AMAZNG…!
LET’S GO.

LOADING . . .
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 227
WHAT’S THE DEAL?
CODEJIKA.COM
PROJECT 2:

PROJECT 2 Present your skills and

plans in an attractive and

Training 6
engaging Website CV built
with HTML, CSS and
emojies.

LEARN:
PRONOUNCED: CODE–GEE-KA The practical skills of a
JIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.
Jnr. Web Developer over
12 Projects.

PURPOSE:
Desktop – v2 Teach yourself. Teach
LEARN MORE: www.CODEJIKA.com your friends. Help others.

This is the lesson you
have been waiting for
your whole life.

EMOJI TIME!?!

TRAINING SNAPSHOT PROJECT 2 – TRAINING 5

This one is all about:

Emojies

PROJECT 2
TRAINING SESSIONS:
1. Review: HTML Structure / Setup: Header

2. Dream job, your birthday & center the header.

Most internet browsers have a few

emoji images locked inside their
system.

BRIEFING 2 of 4 1.1.2
EMOJIIES
EMOJIES

Each emoji has a special password.

And you can release it if you know

it.

BRIEFING 3 of 4 1.1.2
EMOJIIES
EMOJIES

Emojis are “Special Characters”.

They have between 4 and 6 letters
or numbers.

EXAMPLE:

= #x1F60E
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 235
BRIEFING 4 of 4 1.1.2
EMOJIIES
EMOJIES

Tell the browser that this not just

random text;
In front put a: “&” (ampersand)

EXAMPLE:

= &#x1F60E
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 236
MISSION

1. Add a big emoji in a new <div> .

2. Style it with class .emoji .
...
This mission will include 4 challenges.

READY?

CHALLENGE CODE :
1 of 4
Add a new div.

WHERE:
Inside the <div> in <header>.

<header>
<div class="circle">
<div>
</div>
</div>
</header>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 239
CHALLENGE CODE :
2 of 4
Place an emoji into the new <div>.
Use this one: 😎

<header>
<div class="circle">
<div>
😎
</div>
</div>
</header>
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 240
CHECK
Do you see the emoji you
added?

Isn’t it too small and out of

place?

Let’s fix that.

BRIEFING 1 of 1 1.1.2
font-size: em;
font-size: em;

em is a simple way to make

fonts larger.

EXAMPLE:

font-size: 8em;
TIP:
1em = 16px
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 243
CHALLENGE CODE :
3 of 4
Create a new CSS Class: .emoji
and increase the font size to 8em .

.emoji {
font-size: 8em;
}

CHALLENGE CODE :
4 of 4
Link the .emoji class to the
new <div>.

CHECK
How does it look now?

Are you happy with it?

That was fun.
Now let’s improve the
section titles.

MISSION

Put an emoji in front of each section title.

...
This mission will include 2 challenges.

Put an emoji inside each
section of your CV.

CHALLENGE CODE :
1 of 2
Insert an emoji before your h3
text.

<h3>
&#9737 DETAILS
</h3>

CHALLENGE CODE :
2 of 2
Here are &#9737 ABOUT ME
suggested &#9998 EDUCATION
ones for
the rest: &#10004 EXPERIENCE

&#9917 SKILLS

&#9993 CONTACT

CHECK
Do you like how it looks?

If not, here are few others
to play with…

REFERENCE 1.1.2
BROWSER EMBEDDED EMOJIES
BROWSER EMBEDDED EMOJIES
SET 1 SET 2
EMOJI CODE: EMOJI CODE:
☕ 9749 ❤ 10084
♫ 9835 ✽ 10045
☆ 9734 ✿ 10047
☀ 9728 ✞ 10014
☺ 9786 ⚡ 9889
⚽ 9917 ⚪ 9898
❀ 10048 ⚫ 9899
More online here: ☔ 9748 ⚠ 9888
https://www.w3schools.com ∞ infin; ✚ 10010
/charsets/ref_utf_misc_sy ➜ 10140 © copy;
mbols.asp

Now let’s finish off this
training with tweaking our
SKILLS List.

MISSION

Replace bullet points with emojies.

...
This mission will include 2 challenges.

CHALLENGE CODE :
1 of 2
Add list-style: none; to the p,
ul CSS.
This removes the black bullet-points.

p, ul {
list-style: none;
padding-left: 50px;
font-size: 1.3em;
}
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 257
CHECK

How does it look without

the bullet-points?

CHALLENGE CODE :
2 of 2
Add &#9898 <li>&#9898 Awesome at...

in front of
</li>
<li>&#9898 Dance like ...
each item on </li>

the list. <li>&#9898 Level 5:...

</li>

CHECK

Do you prefer this look?

We’re going to finish now
with a very simple, but
important “Special
Character”.

BRIEFING 4 of 4 1.1.2
COPYRIGHT
COPYRIGHT

Tell everyone that the content

you’ve written is your original
work.

EXAMPLE:

It could look like this:

CHALLENGE CODE :
1 of 4
Add a copyright line at the end of
your website right before </body> .

<br>
TIP: &copy Copyright 2021 Thandi Ndlovu
Add the year and your Inc.
name after the copyright
sign.
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 264
Here’s a quick way to
center your copyright line:

CHALLENGE CODE :
1 of 4
Wrap the content you want to
center in <center> tags.

WOW!
Good job!
Just double- check your
code now.

<h3>
&#9737 ABOUT ME

CHECKPOINT
</h3>
<p> Stuff.... </p>
<h3>
&#9998 EDUCATION
</h3>

Your code should

<p> Stuff... </p>
<h3>

look like this:

&#10004 EXPERIENCE
</h3>
<p> Stuff... </p>
<h3>
&#9917 SKILLS
</h3>
<ul>
<li>&#9898 List Stuff</li>
</ul>
<h3>
&#9993 CONTACT DETAILS
</h3>
<p> Stuff... </p>
<center>
<br>&copy Copyright 2018 ...
</center>

...
www.codejika.com 2019 Copyright Code for Change | Ultimate Growth 268
You just finished Project 2.

That’s a MAJOR AWESOME

accomplishment.

Well done!

TIME TO CELEBRATE.

If you enjoyed Project 2,...

You’ll LOVE Project 3.

See you there.

BYE.
See you soon.

The Monocle Book of Japan_review_balqis
0% (1)
The Monocle Book of Japan_review_balqis
5 pages
Udemy - The Complete 2024 Web Development Bootcamp Torrent Info
0% (1)
Udemy - The Complete 2024 Web Development Bootcamp Torrent Info
18 pages
Web Development Course Outline
100% (3)
Web Development Course Outline
5 pages
2023 Project 4 - Codejika - Com DT v2
No ratings yet
2023 Project 4 - Codejika - Com DT v2
300 pages
07-Raspberry Pi I2C
100% (1)
07-Raspberry Pi I2C
7 pages
CSS (With HTML5) Learn CSS in One Day and Learn It Well. CSS for Beginners With Hands-On Project. Includes HTML5. (Learn Coding Fast With Hands-On Project Book 2) by LCF Publishing Jamie Chan (Z-lib.or
No ratings yet
CSS (With HTML5) Learn CSS in One Day and Learn It Well. CSS for Beginners With Hands-On Project. Includes HTML5. (Learn Coding Fast With Hands-On Project Book 2) by LCF Publishing Jamie Chan (Z-lib.or
119 pages
Project 3 Codejika - Com DT v1
No ratings yet
Project 3 Codejika - Com DT v1
300 pages
201903 Project 1 - Codejika Dt v1
No ratings yet
201903 Project 1 - Codejika Dt v1
228 pages
Module 1
No ratings yet
Module 1
22 pages
201908-Intro-Guide-CodeJIKA.com-v2
No ratings yet
201908-Intro-Guide-CodeJIKA.com-v2
36 pages
HTML & CSS Projects for Beginners
No ratings yet
HTML & CSS Projects for Beginners
59 pages
3.use CSS To Style A Web Page Simulation Transcript - EN
No ratings yet
3.use CSS To Style A Web Page Simulation Transcript - EN
4 pages
Assignment 1 - SF Dev Workshop
No ratings yet
Assignment 1 - SF Dev Workshop
7 pages
Computer 9: WEB DESIGN: Cascading Style Sheet
No ratings yet
Computer 9: WEB DESIGN: Cascading Style Sheet
8 pages
Internship Report - (3012)
No ratings yet
Internship Report - (3012)
21 pages
Frontend Roadmap
No ratings yet
Frontend Roadmap
30 pages
Lesson 1 - Introduction HTML Css
No ratings yet
Lesson 1 - Introduction HTML Css
38 pages
HTML Projects
No ratings yet
HTML Projects
3 pages
CSS in HTML
No ratings yet
CSS in HTML
8 pages
Akira - GA - Intro-To-Coding-Html-Css
No ratings yet
Akira - GA - Intro-To-Coding-Html-Css
46 pages
Full Stack Web Development Course - Brochure
100% (1)
Full Stack Web Development Course - Brochure
35 pages
Internship Report: Sohansingh Gaur
No ratings yet
Internship Report: Sohansingh Gaur
11 pages
CSS (With HTML5) Learn CSS in One Day and Learn It Well
No ratings yet
CSS (With HTML5) Learn CSS in One Day and Learn It Well
118 pages
Frontend Roadmap
0% (1)
Frontend Roadmap
30 pages
Top 9 Beginner JavaScript Practice Projects (Yes, Code Included!
No ratings yet
Top 9 Beginner JavaScript Practice Projects (Yes, Code Included!
32 pages
Css
No ratings yet
Css
55 pages
The Woork Handbook
100% (2)
The Woork Handbook
133 pages
Learn CSS in One Day and Learn It Well (Includes HTML5) - CSS For Beginners With Hands-On Project. The Only Book You Need To Start Coding in CSS ... Coding Fast With Hands-On Project) (Volume 2)
No ratings yet
Learn CSS in One Day and Learn It Well (Includes HTML5) - CSS For Beginners With Hands-On Project. The Only Book You Need To Start Coding in CSS ... Coding Fast With Hands-On Project) (Volume 2)
108 pages
Cse 443
No ratings yet
Cse 443
21 pages
CSS
No ratings yet
CSS
5 pages
Sample Master HTML and CSS Along With 100 Projects
No ratings yet
Sample Master HTML and CSS Along With 100 Projects
4 pages
CSS Bullets A comprehensive reference to all the CSS you need (Ankush Sharma) (Z-Library)
No ratings yet
CSS Bullets A comprehensive reference to all the CSS you need (Ankush Sharma) (Z-Library)
144 pages
Web Dev Full Stack
No ratings yet
Web Dev Full Stack
17 pages
1808 HTML and CSS Visual QuickStart Guide 9th Edition
No ratings yet
1808 HTML and CSS Visual QuickStart Guide 9th Edition
571 pages
ADITYA
No ratings yet
ADITYA
23 pages
Altcademy S Web Development Syllabus
No ratings yet
Altcademy S Web Development Syllabus
46 pages
Web Development Test
No ratings yet
Web Development Test
5 pages
Cascading Style Sheet
No ratings yet
Cascading Style Sheet
14 pages
Week1 Day 1 May 05 24
No ratings yet
Week1 Day 1 May 05 24
17 pages
How+to+Become+a+Web+Developer+in+4 6+months 1
No ratings yet
How+to+Become+a+Web+Developer+in+4 6+months 1
15 pages
The EveryMatrix Front End Academy - Presentation
No ratings yet
The EveryMatrix Front End Academy - Presentation
65 pages
Design Our Job I I: Education Program Manual
No ratings yet
Design Our Job I I: Education Program Manual
20 pages
Ebook 23
No ratings yet
Ebook 23
51 pages
5f539d517b806737a1bb7e14 Web Development
No ratings yet
5f539d517b806737a1bb7e14 Web Development
1 page
CSSMasterclassBook PDF
No ratings yet
CSSMasterclassBook PDF
168 pages
Ict Reviewer
No ratings yet
Ict Reviewer
2 pages
From_CodeNewbie_To_Full_Time_Freelancer_In_One_Year_v3
No ratings yet
From_CodeNewbie_To_Full_Time_Freelancer_In_One_Year_v3
32 pages
Points Takes From Evangadi Network
No ratings yet
Points Takes From Evangadi Network
8 pages
Iwt Practical Rahul
No ratings yet
Iwt Practical Rahul
21 pages
Building PDF
No ratings yet
Building PDF
13 pages
Sample HTML Code for Homepage
No ratings yet
Sample HTML Code for Homepage
15 pages
LEARN DJANGO IN 24 HOURS FOR BEGINNER
No ratings yet
LEARN DJANGO IN 24 HOURS FOR BEGINNER
154 pages
New Perspectives on HTML5 CSS3 JavaScript 6th Edition Carey Solutions Manual download
100% (2)
New Perspectives on HTML5 CSS3 JavaScript 6th Edition Carey Solutions Manual download
34 pages
Fe Uk 1.1 Intro To HTML
No ratings yet
Fe Uk 1.1 Intro To HTML
32 pages
Book
100% (2)
Book
165 pages
Taking Your Talent To The Web
100% (1)
Taking Your Talent To The Web
449 pages
Kids Can Code!: Fun Ways to Learn Computer Programming
From Everand
Kids Can Code!: Fun Ways to Learn Computer Programming
Ian Garland
No ratings yet
Mastering Adobe Commerce Frontend: Build optimized, user-centric e-commerce sites with tailored theme design and enhanced interactivity
From Everand
Mastering Adobe Commerce Frontend: Build optimized, user-centric e-commerce sites with tailored theme design and enhanced interactivity
Jakub Winkler
No ratings yet
Learn Html In 1 Hour
From Everand
Learn Html In 1 Hour
John Bura
No ratings yet
Coding Basics with Microsoft Visual Studio: A Step-by-Step Guide to Microsoft Cloud Services
From Everand
Coding Basics with Microsoft Visual Studio: A Step-by-Step Guide to Microsoft Cloud Services
Kiet Huynh
No ratings yet
Vue.js: Tools & Skills
From Everand
Vue.js: Tools & Skills
James Hibbard
No ratings yet
Visual Studio 2022 In-Depth: Explore the Fantastic Features of Visual Studio 2022 - 2nd Edition
From Everand
Visual Studio 2022 In-Depth: Explore the Fantastic Features of Visual Studio 2022 - 2nd Edition
Ockert J. du Preez
No ratings yet
04_Firewall
No ratings yet
04_Firewall
57 pages
14_Postfix
No ratings yet
14_Postfix
84 pages
12_BIND
No ratings yet
12_BIND
78 pages
10_IDS&IPS
No ratings yet
10_IDS&IPS
11 pages
15_AdvancedMail
No ratings yet
15_AdvancedMail
100 pages
09_Common_Security_Issue
No ratings yet
09_Common_Security_Issue
18 pages
11_DNS
No ratings yet
11_DNS
30 pages
03_DHCP_NAT
No ratings yet
03_DHCP_NAT
38 pages
13_MailSystem
No ratings yet
13_MailSystem
33 pages
18 EventsValidation
No ratings yet
18 EventsValidation
12 pages
06_OpenVPN
No ratings yet
06_OpenVPN
21 pages
08_Server_Load_Balancer
No ratings yet
08_Server_Load_Balancer
30 pages
Django VS Flask
No ratings yet
Django VS Flask
4 pages
07_WireGuard
No ratings yet
07_WireGuard
18 pages
16 DOMTree
No ratings yet
16 DOMTree
30 pages
02_Routing
No ratings yet
02_Routing
28 pages
15 UnobtrusiveJS
No ratings yet
15 UnobtrusiveJS
24 pages
Raspberry Pi - Part 13 - Activating USB
No ratings yet
Raspberry Pi - Part 13 - Activating USB
5 pages
Raspberry Pi - Part 18 - Backup Restore
No ratings yet
Raspberry Pi - Part 18 - Backup Restore
9 pages
14 DOMTimers
No ratings yet
14 DOMTimers
16 pages
Raspberry Pi - Part 16 - Partitions Filesystems
No ratings yet
Raspberry Pi - Part 16 - Partitions Filesystems
19 pages
Raspberry Pi - Part 01 - Hardware Info
No ratings yet
Raspberry Pi - Part 01 - Hardware Info
24 pages
09 PHP Forms
No ratings yet
09 PHP Forms
17 pages
Raspberry Pi - Part 05 - Extra Configurations
No ratings yet
Raspberry Pi - Part 05 - Extra Configurations
7 pages
Raspberry Pi - Part 02 - Software Info
No ratings yet
Raspberry Pi - Part 02 - Software Info
58 pages
Raspberry Pi - Part 03 - Prepare SD Card
No ratings yet
Raspberry Pi - Part 03 - Prepare SD Card
11 pages
Raspberry Pi - Part 06 - Activating PiCamera
No ratings yet
Raspberry Pi - Part 06 - Activating PiCamera
14 pages
Internet of Things With Raspberry Pi
No ratings yet
Internet of Things With Raspberry Pi
48 pages
A'dan Z'ye React-1
No ratings yet
A'dan Z'ye React-1
27 pages
'Savi Rajamarga' - Passing Package - (English Medium) _ PDF _ Ag
No ratings yet
'Savi Rajamarga' - Passing Package - (English Medium) _ PDF _ Ag
13 pages
Zdzislaw Ziolkowski Destylacja I Rektyfikacja W Przemysle Chemicznym
No ratings yet
Zdzislaw Ziolkowski Destylacja I Rektyfikacja W Przemysle Chemicznym
1,000 pages
How To Reset Waste Ink in Canon MP160 and MP145
No ratings yet
How To Reset Waste Ink in Canon MP160 and MP145
2 pages
Review of Literature: I. Consumer Behavior
No ratings yet
Review of Literature: I. Consumer Behavior
4 pages
10k Runners
No ratings yet
10k Runners
29 pages
Lane Broderson C
No ratings yet
Lane Broderson C
5 pages
Government Arts and Science College,Nemmeli
No ratings yet
Government Arts and Science College,Nemmeli
4 pages
Jms Student Organization Treasurer Jma Student Organization Treasurer Jms Student Organization Adviser Jma Student Organization Adviser
No ratings yet
Jms Student Organization Treasurer Jma Student Organization Treasurer Jms Student Organization Adviser Jma Student Organization Adviser
2 pages
CEDAW Primer (U-WPS Office
No ratings yet
CEDAW Primer (U-WPS Office
23 pages
Mass Media 9 Form
No ratings yet
Mass Media 9 Form
14 pages
Karaoke Company Names
No ratings yet
Karaoke Company Names
3 pages
Complete Download The Transformation of Television Sport: New Methods, New Rules 1st Edition Mike Milne (Auth.) PDF All Chapters
100% (3)
Complete Download The Transformation of Television Sport: New Methods, New Rules 1st Edition Mike Milne (Auth.) PDF All Chapters
52 pages
Domestic Wiring PDF _
No ratings yet
Domestic Wiring PDF _
135 pages
Magazine Article Writing Types
No ratings yet
Magazine Article Writing Types
5 pages
Discord #Try-not-To-laugh Its Mwad Not M-Wad
No ratings yet
Discord #Try-not-To-laugh Its Mwad Not M-Wad
1 page
Cruel Summer Tab
No ratings yet
Cruel Summer Tab
4 pages
Dhanak Event Logistics2017
No ratings yet
Dhanak Event Logistics2017
8 pages
IMC REPORT NHÓM 8
No ratings yet
IMC REPORT NHÓM 8
16 pages
Fury of the Swarm- co-op 40K skitters over the finish line Goonhammer
No ratings yet
Fury of the Swarm- co-op 40K skitters over the finish line Goonhammer
12 pages
Marshmello Mask PDF
No ratings yet
Marshmello Mask PDF
14 pages
Letter To Self
No ratings yet
Letter To Self
2 pages
Advertorials
100% (1)
Advertorials
3 pages
Law and the Media 4th Edition Tom Crone all chapter instant download
100% (9)
Law and the Media 4th Edition Tom Crone all chapter instant download
85 pages
Technopreneurship-Business Model Canvas - Technogineers
No ratings yet
Technopreneurship-Business Model Canvas - Technogineers
8 pages
CEO Contact v2
No ratings yet
CEO Contact v2
12 pages
Acting Resume Template Free
100% (1)
Acting Resume Template Free
8 pages
X200by Best Combo Cloud
No ratings yet
X200by Best Combo Cloud
11 pages
User Manual 5708181
No ratings yet
User Manual 5708181
7 pages
Bonne-Maman MKG TT
No ratings yet
Bonne-Maman MKG TT
22 pages