Lesson 6.2 How will you layout your web page?
Aim:
Today you will start to design your web page using HTML & CSS code. You will learn how to add your own images.
Be Inspired:
Have a look at the code used by Mrs. Klein when she started to build her website:
This is how the web page looks online:
 |
| HTML CODE FOR THE WEBSITE |
 |
| CSS CODE FOR THE WEBSITE |
Check It Out:
Explore the following websites:
Who is the audience? What is the purpose of these websites? How have the web designers made these websites attractive for students? What colours do they use? How is the interface made user-friendly?
Do Your Best:
Today you will use your code.org account to start to add CSS code to your websites. You will also learn how to upload images and add them to your web page using code.
You will explore using CSS to change the colour of your website's background and the colour of the text in your headings/paragraphs.
You will need to use the following CSS code:
Background color body {background:blue;}
Text color {color:red;}
Text size {font-size:25px;}
Text center {text-align:center;}
Text bold {font-weight:bold;}
Text font {font-family:calibri;}
Text border {border:solid;}
Text underline {text-decoration:underline;}
NB Mrs. Klein recommends that as coders you keep your code neat and tidy.
Extension Task:
Ready for a challenge? How much CSS code can you add to your website?
Finally:
When designing websites it's a good idea to get another coder to check over your work and debug any issues.Games:
