This is a simple coding exercise for students who want to join NEXT Academy's coding bootcamp. This tutorial covers HTML and CSS. You will need to get the code from https://codepen.io/audreyling/pen/vqpLBV To know more about NEXT Academy's coding courses, checkout nextmy.co/code

1. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
Click to start
ARE YOU ABLE TO
CODE THIS?
WE'LL GUIDE YOU & GIVE HINTS,
DON'T WORRY!

2. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
We've Provided You with Part 1
Provided!
Now, you have to complete
Part 2 with us!

3. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
How are we doing this....
These slides will guide
you to our goal!
You'll need to toggle
between these 2 later
Type your code here.
This is the code editor.
You will see your output
here

4. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
HTML

5. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#1: Let's start with the heading
Go to code editor, find this on Part 2 onwards
How is a Website different from a Web App?
Before that, let's find out what's front-end and
back-end.
Front-end consists of the look and feel of a
website. You use HTML for the structure, CSS for
styling and JavaScript to give your website a
personality. You can create animations too.
Back-end is the server-side process which
determines how the site works, updates and
.
.
.
etc…..
We'll use a heading tag for this!
Let’s <h2> place text here </h2> for this.
Stuck? The solution is at the end.

6. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#2: Now for the paragraphs
Go to code editor, find this on Part 3
Before that, let's find out what's front-end and
back-end.
Front-end consists of the look and feel of a
website. You use HTML for the structure, CSS for
styling and JavaScript to give your website a
personality. You can create animations too.
Back-end is the server-side process which
determines how the site works, updates and
changes. It refers to everything you can't see, like
storing information into databases and writing
algorithms/ logic to interact with your database.
.
.
etc...
For each paragraph, you will need to wrap it
with….
<p> place text here </p>
<p> Before that, let's find out what's front-end and
back-end. </p>
Do this for the remaining paragraphs.
Stuck? The solution is at the end.

7. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#3: Let make important words "stronger"
Go to code editor, find this on Part 3
Before that, let's find out what's front-end and
back-end.
Front-end consists of the look and feel of a
website. You use HTML for the structure, CSS for
styling and JavaScript to give your website a
personality. You can create animations too.
Back-end is the server-side process which
determines how the site works, updates and
changes. It refers to everything you can't see, like
storing information into databases and writing
algorithms/ logic to interact with your database.
.
.
etc...
To make an important word "stronger"...
<strong> Front-end </strong>
You can wrap it with the <strong></strong>
tag.
Do that for back-end too!
Stuck? The solution is at the end.

8. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#4: Let’s add a horizontal line
How is a Website different from a Web
App?
Before that, let's find out what's front-end and
back-end.
Front-end consists of the look and feel of a
website. You use HTML for the structure, CSS for
styling and JavaScript to give your website a
personality. You can create animations too.
Back-end is the server-side process which
determines how the site works, updates and
changes. It refers to everything you can't see, like
storing information into databases and writing
algorithms/ logic to interact with your database.
.
.
Horizontal lines are useful to add a touch of
design to your website.
All you need to do is to add a new line and
write this in!
<hr>
Note: This is called a SINGLE TAG.
Careful, there is no <hr></hr>.
Stuck? The solution is at the end.

9. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#5: How about our image?
How is a Website different from a Web
App?
Before that, let's find out what's front-end and
back-end.
Front-end consists of the look and feel of a
website. You use HTML for the structure, CSS for
styling and JavaScript to give your website a
personality. You can create animations too.
Back-end is the server-side process which
determines how the site works, updates and...
To add an image, you first need to image's url
and add it into the <img> tag.
<img src="image url">
Note:
- src means "source", so put the image url
here!
- Careful, there is no <img></img>.
- Don't worry if image is too big! We'll deal
with that later.
The image link is available in Part 4: (last line)
Stuck? The solution is at the end.

10. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#6: Let's structure our code better
How is a Website different from a Web
App?
Before that, let's find out what's front-end and
back-end.
Front-end consists of the look and feel of a
website. You use HTML for the structure, CSS for
styling and JavaScript to give your website a
personality. You can create animations too.
Back-end is the server-side process which
determines how the site works, updates and...
Since we have created this as a new section,
let's put this under the <section> tag.
<section>
Content
</section>
Stuck? The solution is at the end.

11. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
Your page looks something like this now?
Oh no!! The image is just too huge!
What if I want to change the
background color, highlight some
words etc. ??

12. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
STYLING WITH CSS
Let's make them look nice now!

13. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
Styling with CSS
Toggle to this now

14. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#7: Let's change the text color of our paragraphs
Black is no fun. How do I make ALL paragraphs grey
but not the others!?
Well, we know that all <p> are within our <body>.
Look at the code below.
You can interpret the code above as:
● choose all <p> within <body>
● For the text, change the color (text) to
darkslategrey - Google "named colors" for other colors
Try it on CSS file Part 2 code!
Stuck? The solution is at the end.

15. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#8: Make our borders edge rounded
How do I make all edges rounded?
1. Look for the pre-written code for section in
CSS
2. Add border-radius: 10px; in it (you can try
changing the value and see the difference)
Stuck? The solution is at the end.

16. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#9: Let's make our image smaller
Let's reduce it to a better size. Since we only have
one image, select img and style it in CSS.
You can choose to set width or height or both. No
worries, it will reduce or increase the size according
to the aspect ratio.
I have decided to set height to 200px. Add this
code into your CSS.
Stuck? The solution is at the end.
200px

17. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Trickier Tasks

18. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#10: Let's set the background color
We have 2 <section> in our HTML and I only want to select the
second <section>.
I want to make this <section> unique, for this we'll need to give it an
id called info inside our HTML file.
Stuck? The solution is at the end.
HTML file
Let's select the correct
element and give it a
unique id...
CSS file
For the element with the
id called info...

19. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#11: Color up some words
Those words are within a <p>. We need to figure out a way to
isolate them from other words, select them and style them.
Part 1: HTML
● Isolate the words from other words by wrapping the
special words with <span> tag in your HTML
<span> front-end </span>
<span> look and feel of a website </span>
<span> back-end </span>
● Do it for all 6 of them in your HTML file.
Stuck? The solution is at the end.

20. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
#11: Color up some words
Part 2: HTML
● 4 of them are yellow, and another 2 are aqua.
● We'll create 2 classes: "yellow" and "aqua" so that we can
reuse it repeatedly
● For all yellow elements, do this...
<span class="yellow"> front-end </span>
● For all aqua elements, do this...
<span class="aqua"> look and feel of a website </span>
Part 3: CSS

21. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
Copyright © NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by any means, including copying, recording, or other electronic or
mechanical methods, without the prior written permission of Next Academy.
ENJOYED IT?
SHARE IT WITH YOUR FRIENDS!
WOOHOO!
YOU DID IT!!
By learning front-end
development, you can do more!
● Mobile responsiveness
● Animations
● Better layouts
● Interactive website
● Building games!
LEARN MORE HERE

22. Copyright © 2017 NEXT Academy (operated by Eleventh Division Sdn Bhd). All rights reserved. No part of this learning material may be reproduced, distributed, or transmitted in any form or by
any means, including copying, recording, or other electronic or mechanical methods, without the prior written permission of Next Academy.
HTML CSS
1
2
3
4
5
6
7
8
9
10
11
10
11
(the bubble numbers are the activity numbers)
/* Part 2: Add your code here */