powerpoint presentation · title: powerpoint presentation author: jonathan d. novotny novo created...

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

PROJECT 1YAAAAAYYYYY!

CODEJIKA.COM

INTRO GUIDE

PURPOSE: Teach yourself. Teach your friends. Help others.

LEARN: The practical skills of a Jnr. Web Developer over 12 Projects.

WHAT’S THE DEAL?

PROJECT 1: Introduces you to building a website. The outcome is a simple, colorful landing page.

LEARN MORE: www.CODEJIKA.com

CODEJIKA.COM

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

Desktop - Version 1

PRONOUNCED: CODE–GEE-KAJIKA MEANS “DANCE” OR TURN IN ZULU, A SOUTH AFRICAN LANGUAGE.

SO EXCITED!


Ready to start a new chapter of

your life?


Start by opening “Notepad” on

your PC.


ACTION:CHALLENGESTEP 1

1. Click “Start”.

WINDOWS PC:

2. Type “Notepad”Open Notepadon your PC.

3. Open Notepad.


ACTION:CHALLENGESTEP 2

1. Click “File”.

NOTEPAD:

2. Click “Save”.Save a file in notepad. 2

1


ACTION:CHALLENGE

STEP 3

1. Type your name and .htmlat the end.

2. Click “Save”.

NOTEPAD:

Save an .html file.

1


GOOD JOB!

Now add a <h1> with your name in it.


CODE:CHALLENGESTEP 1 In Notepad type <h1> and your

name. Close it with </h1>.

<h1>Your name

</h1>

TIP: Notice the / ?

E X A M PL E :


Good programmers know lots of keyboard shortcuts.

Learn your first one.


REVIEW:CHALLENGE

STEP 21. Click “File”.

NOTEPAD:

2. Click “Save”.

Learn a keyboard shortcut for “Save”.

Save your file: Ctrl + S

TIP: Hold down the “Ctrl” key and hit the “S” key at the same time.

SHORTCUT:


ACTION:CHALLENGE

STEP 3

1. Double click on the file you saved on the Desktop.

BROWSER:

View your saved .html file.

TIP: If you saved it with .html it should open in a web browser.

Your file name should be: name.html NOT .txt


Your browser should look something like this:

( With your name. )


THINKHow do you see

changes you’ve made to your html file?


Here’s a simple way.


BRIEFING 1.1.2

1 of 2See Changes

See changes in your browser:

1. Save your file.

2. Refresh your browser.


BRIEFING 1.1.2

2 of 2See Changes Refresh the browser:

1. Click anywhere on it (to select it.)

2. Hit the Short-cut key: F5

TIP: F5 is on the top row of your keyboard.2019 Copyright Code for Change | Ultimate Growth 18www.codejika.com

ACTION:CHALLENGE

1. Change some of the text in the <h1>.

2. Save it. ( Ctrl + S )

3. Refresh browser & see changes. ( F5 )

BROWSER:

Modify code, save & view it.


GREAT!

You’re almost done the INTRO LESSON.


You want to see three things on your desktop (screen) :

1. Slides ( These slides )

2. Code Editor ( Notepad++ )

3. The Results ( In the browser )

Here’s how some people do it…2019 Copyright Code for Change | Ultimate Growth 21www.codejika.com

22

Write code in the notepad and see the output the browser.

Preview -BROWSER

Slides - ADOBE READER

Editor - NOTEPAD++

SETUP YOUR DESKTOP:

2019 Copyright Code for Change | Ultimate Growthwww.codejika.com

To allow you to dream of building digital tools for

your community.

Our Mission:


And provide you with the tools to do so.

Take a quick quiz...


What’s a shortcut to save a file?QUIZ

F5

Ctrl + S

Click “File” then “Save”.

<h1>

QUESTION 1.1

A.

B.

C.

D.

1. 2.


What’s a shortcut to refresh your browser?

Ctrl + S

Click “File” then “Refresh”.

F5 key on the top row.

Click “Start”

QUESTION 1.2

A.

B.

C.

D.

1. 2.

PREVIOUS ANSWER: B.

QUIZ


1. 2.

PREVIOUS ANSWER: C.

WHAT WAS YOUR SCORE?

50% 100%

QUIZ


FANTASTIC!

Now you’re ready to get started with Training 1.



LOADING . . .



WHAT’S THE DEAL?



CODEJIKA.COM


PROJECT 1

Training 1

Desktop – v13


PROJECT 1

1. Structure <body> // <h1>, <h3> & <p>

2. CSS <style> // Type Selector

3. Page Sections // Header, Section & Footer

4. <div> // Fonts, borders & padding

TRAINING SESSIONS:


Let’s start with the page structure.


Add a HTML structure to a new file.

…

MISSION

This mission will include 4 challenges.


1.1.2

TIP: Remember this.

<!DOCTYPE html>

<head>

</head>

<body>

</body>

HTML STRUCTURE:


<!DOCTYPE html>

Says what type of document (doc ) this is.

Hi, I am a website:<!DOCTYPE html>

BRIEFING1.1.2

2 of 3Doctype Tag


<!DOCTYPE html>

Start every html file with:

BRIEFING 1.1.2

3 of 3Doctype Tag


CODE :CHALLENGE

STEP 1

Add:

<!DOCTYPE html>

In the code editor.


REMEMBER

What’s the structure of a website?


GREAT!

Now add a <head> section.


CODE :

CHALLENGESTEP 2

Add: <head></head>

In the code editor.


Add a body section below your head section.

CODE :

Do it without checking.ADVANCED:

CHALLENGESTEP 3


CHECKPOINTYour code should look something like this:

CO DE :

<!DOCTYPE html>

<head></head>

<body></body>


NICE.

Let’s add some content now.


DEFINITION

A “Landing Page” is a simple, one-pagewebsite.

It tells visitors that the main website is launching soon.

LANDING PAGE


BRIEFING <h1> </h1>

<h1> My Name

</h1>

EXAMPLE:

1. Is used for the largest text on your page.

2. Goes in the <body> section.

1.1.2

<h1> Tag


REMEMBER

What’s the <h1> used for?


CODE :CHALLENGE

STEP 4

Type an opening & closing<h1> tag.

In the <body> section.T IP :


CODE :CHALLENGE

STEP 5

Insert your First & Last name between the <h1>tags.

Check the example in the <h1> briefing. T IP :


Now we’re going to learn about tags.


READY?


Think of tags as taps.

If you open a tap (tag) close it.

BRIEFING1.1.3

1 of 3Tags

<h1>

Open Close

</h1> 2019 Copyright Code for Change | Ultimate Growth 51www.codejika.com

<h1> My name</h1>

<div>

</div>

EXAMPLE:

To close, put “/” (a backslash) in front of the closing tag name.

BRIEFING1.1.3

2 of 3TagsOpen

Close

Open

Close


GOOD!

You learned about tags.Now let’s move on.


<body><h1> My Name

</h1><h3> Launching Soon…</h3>

</body>

EXAMPLE:

<h3> is used mainly for subtitles.

BRIEFING1.1.4

<h3> </h3><h3> Tag


REMEMBER

What’s <h3> used for?


CODE :CHALLENGE

Write: “Launching Soon…” between <h3> tags.

Below <h1> .WHERE :


BRIEFING <p> </p>

<body><p>My stuff...

</p></body>

EXAMPLE:

1. Stands for “paragraph”. 2. You can have lots of <p> tags

in your site.

1.1.2

<p> Tag


REMEMBER

What’s the <p> used for?


CODE :CHALLENGE

Add a <p> with today’s date.

Below <h3> .WHERE :

<p>10 October, 2021

</p>

EXAMPLE:



<!DOCTYPE html>

<head></head>

<body><h1>Your Name

</h1><h3>Launching soon...

</h3><p>10 October, 2021

</p> </body>


CHECKPOINTAnd your websitelike this:


CONGRATULATIONS

You’ve finished Training 1.


Set a time every day to do coding.

Twice per week is fine too.

SCHEDULE IT.


Ready to start Training 2?


THINKWho do you want

to make a website for?

TIP: A sister, a brother, small business, a celebrity, a project of your own, your class or your school.



LOADING . . .

PROJECT 1

Training 2



WHAT’S THE DEAL?



CODEJIKA.COM


Desktop – v2


AWESOME!

Are you ready to JIKA*?


*party

PROJECT 1





TRAINING SESSIONS:


Before we start, here’s a quick

overview:


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


5. JavaScript OrderForm // 4 Sessions | 3 Hours

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

<Certificate> Milestone

Project

1. Learn CSS structure.

2. Add some text in an <h3>.

3. Learn <i> & <br>

TRAINING SNAPSHOTThese are your missions for today:

PROJECT 1 – TRAINING 2


1.1.2

<!DOCTYPE html>

<head><style></style>

</head>

<body>

</body>

HTMLSTRUCTURE


REMEMBER THIS?

1.1.2


CSS is the STYLE ( BLING )

<style>

h1 {

color: pink;

}

</style>

CSSCascading Style Sheets

BRIEFINGCSS Basics

1. Add a <stlye> section.2. Style the <h1> using CSS.

. . .

MISSION



BRIEFING <style> </style>

<head><style>

</style></head>

EXAMPLE:

1. All code in the <style> section is CSS.

2. <style> goes in the <head>.

1.1.2

<style> Tag


REMEMBER

Where does the <style>section go?


Add a <style> section.CODE :

Remember to close the <style> tag.

T IP :

CHALLENGE


DID YOU KNOW?

CSS code is slightly different then HTML?


CSS uses cute “curly brackets” { } to wrap the

style.

MEMORY JOGGER


When you see curly brackets

…think BLING (CSS).

{ }


Ready to learn some CSS?

1.1.2


CSSIt works like this:

h1 { }

Selector

Selector is the “name”.

BRIEFINGCSS Basics

1.1.2


CSS h1 { font-size: 75; }It works like this:

Styling

property

Property & value say what.

value

BRIEFINGCSS Basics

1.1.2


CSSh1 { font-size: 75; }

It works like this:

Rule

The whole thing is a “rule”.

2. Property3. Value

1. Selector

BRIEFINGCSS Basics


Let’s talk practical…

You want to add CSS styling to the <h1> text.

1.1.2



<head><style>

h1 {font-size: 75;}</style>

</head>

<body>

<h1>

Hi, It’s me! :-)

</h1>

</body>

Is applied to <h1> in <body>

CSS <style>BRIEFINGCSS Basics


Now you’ll add a h1 selector.

h1 { }

EXAMPLE:

Add a h1 selector.CODE :

In <style> section.T IP :

CHALLENGESTEP 1


Add font-size: 75px;

CODE :

Between the curly brackets.

T IP :

CHALLENGESTEP 2



<!DOCTYPE html><head><style>h1 {font-size: 75;}

</style></head>

<body>

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

GREAT!

The next one is even more fun.


Add a <h3> with a title and a short sentence.

. . .

MISSION



MOTIVATION:

TYPE:

CHALLENGESTEP 1


Place it below the <h1> tags.

Wrap it in <h3> tags.CODE :

Between the <body> tags.

T IP :

CHALLENGESTEP 2


<h3>MOTIVATION:

</h3>


NOW IT’S YOUR TURN.

Tell us why you want to learn how to code.


It could look something like this:

I want to learn to code because...

EXAMPLE:

A short sentence about why you are learning coding.

TYPE:CHALLENGESTEP 1


Below “Motivation” inside the <h3>tags.

WHERE:

GOOD JOB!


Learn about italics and how to create a new line.

. . .

MISSION




Let’s learn about italics and apply CSS to your sentence.

i

BRIEFING<i> </i>

I <i>LOVE</i> ICECREAM!

The <i> tag stands for italics .

Italics is text slanted to the side.

1.1.2

<i> Tag



You can add italics to a sentence like this:

<i>Because...

</i>

EXAMPLE:

Put your sentence into italics with the <i> tag.

CODE :CHALLENGE


<h3>MOTIVATION<i>Sentence...</i>

</h3>


Change the size of your <i> text in CSS like this:

i {font-size: 25px;}

EXAMPLE:

Using CSS reduce the size of the italics text to 25px.

CODE :

Start with i { } in style.

T IP :

CHALLENGE


NICE!


DID YOU KNOW?

In HTML there’s a special symbol to make

a new line.


DEFINITION

Typing <br> is like hitting the “Enter” key on your keyboard…

It adds a line.

<br> = New line



Where to place the <br> ?

<h3>

MOTIVATION:

<br> <br>

<i>

Because...

</i>

</h3>

CHECK:

Add <br> twice immediately after MOTIVATION: </h3> closing tag.

CODE :CHALLENGE


<br><br>


...

<h3>

MOTIVATION:

<br> <br>

<i>

I want to learn how to code because...[your reasons].

</i>

</h3>

...


CONGRATULATIONS



STUCK?


Invite your friends to learn how to code.

When working together one of the squad will usually figure it out.

Whatsapp Groups are great for sharing screenshots and code.T I P :

In the rule: h1 { font-size: 75px; }

what is h1?

QUIZ

An increase in text size.

Value

Selector

CSS

QUESTION 2.1

A.

B.

C.

D.

1. 2.


How would you start to write a new rule for <h3> ?

<h3> Hello World! </h3>

h3 { }

<style>

<br>

QUESTION 2.2

A.

B.

C.

D.

1. 2.

PREVIOUS ANSWER: C.

QUIZ


1. 2.

PREVIOUS ANSWER: B.


50% 100%

QUIZ


If you have internet:Download and install a better code editor.

WHY?It’s easier and shows any mistakes in your code.


https://notepad-plus-plus.org/download/

We recommend:

Notepad++

FOLLOW THE LINK:

SUGGESTION:

Ready for Training 3?


LET’S GO.



LOADING . . .

PROJECT 1

Training 3



WHAT’S THE DEAL?



CODEJIKA.COM


Desktop – v2


Let’s ROCKthis!


PROJECT 1





TRAINING SESSIONS:


1. Learn page sections.

2. Add a LIT background.

3. Add a footer.

TRAINING SNAPSHOTMissions for today:



Ace page sections.

. . .

MISSION




This is a Desktop WebsitePage Structure.

BRIEFING 1.1.2

Desktop Website Structure


Mobile Website Page Structure

BRIEFING 1.1.2

Mobile Website StructureHEADER

SECTION

STUFF

FOOTER

lll MENU

OBSERVE


How is the Desktop PC website structure differentthen the Mobile website?

THINK

How do you think the sections are created?



BRIEFING 1.1.2

Website StructureHEADER

SECTION

STUFF

FOOTER

lll

STRUCTURE:

Remember this.T I P :

Each section is constructed with;

1. CSS boxes and styles linked to

2. HTML sections.


BRIEFING 1.1.2

Website Structure

SECTIONS:

Here are some commonHTML sections:

<header><menu><section><footer>


BRIEFING 1.1.2

Website Structure

SECTIONS:

All placed inside <body>. <header><menu><section><footer>

<body>


BRIEFING 1.1.2

Website Structure

SECTIONS:

Like this:

<header></header><menu></menu><section><stuff></stuff>

</section><footer></footer>

<body>

</body>


All good so far?

Style your <header>.

. . .

MISSION



<header>

Logo, Company Name & Menu go here.

1.1.21 of 2


1. Goes in the <body> section.2. <header> has nothing to do

with <head>.

BRIEFING<header> Tag

<header>

1.1.22 of 2


BRIEFING<header> Tag

EXAMPLE: ...<body><header> <h1>My Name

</h1><h3> Launching soon...

</h3><p>18th June, 2018

</p></header><section>

...

NOTICE

Insert a <header> .CODE :

CHALLENGE


1. Open it before <h1> .2. Close it after the <p> tags .

WHERE:

AWESOME!

That’s a great first step.


Let’s give this <header> a LIT

background.



Like this:

background: linear-gradient(110deg, yellow 40%, pink 40%);


I know, you’re thinking…


Just try it.

Add a header selector in <style> .

CODE :

CHALLENGE


header {

}

STEP 1

Add this first half of the rule:

CODE :

CHALLENGE


header {

background: linear-gradient

}

STEP 2

Complete the rule with this line:

CODE :CHALLENGE


header {

background: linear-gradient(110deg, yellow 40%, pink 40%);

}

STEP 3

No space between gradient & (110 .

T I P :

BE PROUD.

You now have an awesome background.


Let’s rock this next <section>.


<section>

<section> is for the main content of your site.

1.1.2


BRIEFING<section> Tag

<section> All my stuff...

</section>

Were you wondering what “Content”

means?


BTW,…(By the way)

DEFINITION

1. The main message of the webpage.

2. Can be text, graphics and video.

CONTENT



Now,..Wrap the motivation content in the <section> tag.

<section><h3>

MOTIVATION:<br><br>Because...

</h3></section>

Place your “Motivation” <h3> within <section> tags.

CODE :

CHALLENGE


STEP 1

Style <section> with a grey background.

CODE :

CHALLENGE


section {

background: lightgrey;

}

STEP 2

NICE.

Add a footer to make your Landing Page

look more complete.


Add and style a footer.

. . .

MISSION



<footer>

1. Important links & resources are listed.

2. Copyright symbol is inserted here.

1.1.2


BRIEFING<footer> Tag

<footer> &copy 2021 My Name

</footer>

Insert a <footer> before the closing </body> tag.

CODE :

CHALLENGE


STEP 1

Copyright

Copyright says “You can’t copy my content without asking.”

1.1.2


BRIEFINGCopyright Line

<footer> &copy 2021 My Name

</footer>

It is normally the last line on the website.

Copyright1.1.2


BRIEFINGCopyright Line

The line should include:

1. Copyright symbol ( &copy ) 2. The Year3. Your Name

Add a copyright line in <footer>.

CODE :

CHALLENGE


<footer>

&copy 2021 My Name

</footer>

STEP 2


Style your footer with a black background and white text.

background: black;color: white;

These two lines of CSS should work:

Using a footer { } selector in CSS, make your footer background black and the text white.

CODE :

CHALLENGE


STEP 3

CONGRATULATIONS




...

<h3>

MOTIVATION:

<br> <br>

<i>

I want to learn how to code because...[your reasons].

</i>

</h3>

...


STUCK?


Invite your friends to learn how to code.

When working together one of the squad will usually figure it out.

Whatsapp Groups are great for sharing screenshots and code.T I P :

What’s the rule for tags?QUIZ

Open it? Close it.

Do or Die!

Catch whoever you can.

Only close the tag if you have to.

QUESTION 3.1

A.

B.

C.

D.

1. 2.


How do you write a rule in CSS?

h2 { background: lime; }

<footer> &copy 2021 My Name </footer>

section ( color; blue: )

<style> h1 { } </style>

QUESTION 3.2

A.

B.

C.

D.

1. 2.

PREVIOUS ANSWER: A.

QUIZ


1. 2.

PREVIOUS ANSWER: A.


50% 100%

QUIZ



Change some colors

header { background: linear-gradient(110deg, yellow 40%, pink 40%);}

Try these colors;teal maroon grey lightblue red

PLAY


Change this to 250

header { background: linear-gradient(110deg, yellow 40%, pink 40%);}

EXPERIMENT

What happened?

Discuss with your friends why.

Ready for Training 4?


YIPPEEE.



LOADING . . .

PROJECT 1

Training 4



WHAT’S THE DEAL?



CODEJIKA.COM


Desktop – v2


Let’s DOthis!


PROJECT 1





TRAINING SESSIONS:


1. Learn <div>.

2. Be “Font” savvy.

3. Add borders and padding.

TRAINING SNAPSHOTMissions for today:



Do the <div>.1. Understand it.2.Wrap content in it.

. . .

MISSION




BRIEFING 1.1.2

<div> Tag

What’s a DIV?

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

1 of 2

<div> </div> 1.1.22 of 2


1. A HTML section.2.There can be lots of <div> s in

a site.3.You can even put a <div>

inside another <div> .

BRIEFING<div> Tag

REMEMBER

What’s a <div> ?


What can you put in it?

Insert a <div> in <header> .CODE :

CHALLENGE


1. Open it before <h1> .

2. Close it after the <p> tags .

WHERE :


...

<header>

<div><h1>

My Name</h1><h3>

Launching soon... </h3><p>

18th June, 2018</p>

</div></header>...



Now wrap the <section> content in a <div>.

Insert a <div> in <section>.CODE :

CHALLENGE


1. Open the <div> before your <h3> .

2. Close it after the </h3> tags .

WHERE :


...

<section><div><h3>

MOTIVATION:<br><br>Because...

</h3></div>

</section>...


GOOD JOB!



Do the same in <footer> .

Wrap the content in <footer> with a <div> .

CODE :

CHALLENGE



...

<footer><div>

&copy 2021 My Name</div>

</footer>...


GREAT!



Now let’s style these divs.


The rules (styles) you write to the div {} are applied to allthe <div> s.

FYI(For Your Information)

1.1.2



<body><header>

<div></div>

</header><section>

<div></div>

</section><footer>

<div></div>

</footer></body>

BRIEFINGCSS Multiple Selector Styling

div {font-size: 75;}

Applied to all <div> s.

Style the <div> s.

. . .

MISSION




BRIEFING 1.1.2

<div> Styling

Styling the <div>

Use div { } to apply style to everything in the <div> .

1 of 2

T IP :Make sure your CSS rule is in the <style> section.

div {text-align:center;padding: 40px;

}

Add a div {} selector in the <style> section.

CODE :CHALLENGE


div {}

STEP 1


BRIEFING 1.1.2

text-align:

CSS Styling Tells the text where to “lean”.

text-align:

text-align: left;

text-align: right;

text-align: center;

Left, right or center.

Center align all the content in the <div> s.

CODE :CHALLENGE


STEP 2


BRIEFING 1.1.2

padding:

CSS Styling It’s like having pillows around you when you are inside a box.

padding:

padding: 40px;


Your CSS div (Selector) will look something like this:

FYI(For Your Information)

div {text-align: center;padding: 40px;

}

Using CSS, add 40px padding to div.

CODE :CHALLENGE


STEP 3

CHECKPOINTIs all the content (text) on the page centered?

...<style>h1 {font-size: 75px;}i {font-size: 25px;}header { background: linear-gradient(110deg, yellow 40%, ...}section { background: grey; }footer {background: black;color: white;}div {text-align:center;padding: 40px;}</style>

...


If not, then something’s wrong.

CSS Code Review:


You completed the mission.

Style the <h3> s.

. . .

MISSION



Add the h3 Selector to <style> section.

CODE :CHALLENGE


STEP 1

border: 2px solid white;


Start with a cool border.


BRIEFING 1.1.2

border:

CSS Styling Puts a border around text or objects.

border:

border: 2px solid white;

border: 4px dashed red;

EXAMPLE 1:

EXAMPLE 2:

Add a white solid 2px border to h3 { } .

CODE :CHALLENGE


STEP 2

Add a font-size 45px & a padding of 15px to h3 { } .

CODE :CHALLENGE


STEP 3

font-size: 45px;padding: 15px;


BRIEFING 1.1.2

margin:

CSS Styling It’s the boundaries outside your box or text.

margin:

20px;

margin: 20px;20px;20px;

20px;

This is a trick to center your box or text.

margin: auto;TIP:

Center your h3 { } by using the margin: auto; trick.

CODE :CHALLENGE


STEP 4

margin: auto;


BRIEFING 1.1.2

max-width:

CSS Styling It’s the maximum width your container will become.

max-width:

max-width: 400px;

400px

This is important if your site will be viewed on different screen sizes.

(For example, mobile & desktop.)

Beautify your h3 border by giving it a max-width of 400px.

CODE :CHALLENGE


STEP 5

max-width: 400px;

CHECKPOINTYour h3 CSS code should look something like this:

...

h3 {border: 2px solid white;font-size: 45px;padding: 15px;margin: auto;max-width: 400px;}

...



One last thing…

Give your <h1> some class.

See if you like it more white.

h1 {font-size: 75px;color: white;}


Like this:

Make your h1 text white.CODE :

CHALLENGE


STEP 6


GUESS WHAT JUST HAPPENED

???


You just completed PROJECT 1.


That’s so amazing.

It’s time to PAAARTYYYY!!!


See you in PROJECT 2.


BYE.See you soon.

powerpoint presentation · title: powerpoint presentation author: jonathan d. novotny novo created...

Documents