HTML CSS Coding Fundamentals Exercise
- 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 */