HTML & CSS - MINI SKILLS TASKS
For web Practice taks use the CodeHS module - 11DTEC website
And CodeHs lesson - 11DTEC practice website
Web Development - What languages are we learning???
Watch the video to the right to learn more about HTML, CSS & JS.
HTML = Hyper Text Markup Language.
CSS = Cascading Style Sheet.
JS = JavaScript.
Digital Profile - HTML & CSS Skills practice project
Follow the lessons below with support from your teacher to code a practice website with the purpose of introducing yourself to the teacher so they can get to know you, the content should include,
A home page that includes
Your mihi
Name
Where your ancestors are from
Where you live
A paragraph about yourself,
A paragraph that shares anything you think would be good for the teacher to know about you (e.g. how you learn best)
A Second page that shows your favourite things or passions
Please note: Your teacher is the only one who will see this site unless you share the site with someone else.
The tasks below will step you through creating this site. Once you have completed them you can start the 10 credit website assessment.
Task 1 - Introduction to HTML
Learning goal - We are learning to set up a base structure of HTML
Go through the slides
Open the practice website the teacher has shared with you in replit
Set up your home page with the following,
Structure the HTML page
<!DOCTYPE html> <html> <head> <body>
The title tag (appropriate to the website you are creating)
Add the charset tag
Test your site
Task 2 - Elements, Attributes, Headings and Paragraphs
Learning Goal - We are learning how to use tags to format text on our site.
Go through the slides
Adding on to the practice website
Add your mihi to the site using the following tags
Add the main heading <h1> with your full name
Ko ____ tōku ingoa
My name is ____
Add where your ancestors are from using the <h2> tag (if you know)
Nō ____ ōku tīpuna
My ancestors are from ____
Add in where you live now using the <h3> tag
Kei te noho au ki ____
I live in ____
Add a short description introducing yourself using a paragraph <p> tag. This could include your likes/ dislikes, family, culture, hobbies, sports. Anything that makes you who you are :)
Task 3 - Lists
Learning goal - We are learning how to create two different types of lists, an unordered list and an ordered list.
Go through the slides
Adding on to the practice website
Create a bullet pointed list, listing all of the subjects you are studying this year at school
Then underneath it add a numbered list ranking the subjects you like from best to worst. You should now have both an ordered and unordered list.
Add a subheading <h2> above both lists that makes it clear what the list is about.
Task 4 - Images
Learning goal - We are learning how to add images to the site.
Go through the slides
Adding on to the practice website
Find 2 - 3 images. One should be of yourself the others can be of things that you feel represent who you are and your background. Remember if there are images of other people in the website you need to check with them if it is okay for you to use the image. It is only the teacher seeing this.
Upload these images to your files in replit and insert the images into your home page.
You might notice the images aren’t the size or in the position you want them to be, we will fix this later.
Task 5 - links
Learning goal - We are learning how to add hyperlinks to the website so the user can navigate between pages.
Go through the slides
Adding onto the practice website
Create one more page for your site that will have your favourite things on it.
Create links from your home page to these pages
On the two new pages use what you have learnt in the previous lessons to add
The HTML structure for each page (including a title)
The main heading to each page <h1>
Links to all pages - you should be able to access all pages of the website from wherever you are on the site. There should be no dead-ends.
Task 6 - Intro to CSS styling
Learning goal- We are learning how to improve the look of the site using CSS.
Go through the slides
Adding on to the practice website
Play around and style the following:
Backgrounds - background properties resource
Headings & paragraphs - font properties resource
Images - image properties resource
Links - link properties resource
Lists - list properties resource
Note - Leave changing the layout we will look at that soon, along with applying styles to only one or a group of elements, not all elements.
Task 7 - Layout
Learning goal - We are learning how to use HTML semantic tags to organise the content of the website into sections and style them.
Go through the slides
Adding on to the practice website
Organise the content of the website using semantic tags e.g. <header><nav><main><footer>
Give each section a different background colour so you can see it.
Add padding-left: 4px; to each of the boxes so there is a gap between the text and the edge of the box.
Add a margin around each of the links so they are spaced out.
Play around with borders, padding, margin and width of the boxes.
Task 8 - Classes and IDs
Learning goal - We are learning the difference between ID's and Classes
Go through the slides
Adding onto the practice website
Play around changing elements on the page, for example,
Change particular list items
Change the style of one image but not the other.
Task 9 - Flexbox
Learning goal - We are learning how to use flexbox to position content on the page.
Go through the slides and play with flexbox using the w3schools tutorial
Adding on to the practice website.
Change the layout of elements on the page. As a minimum, you should get things to sit side by side. For example, getting the images to sit side by side and the lists to do the same.
Add “display: flex;” to the nav bar styles. What does this do? Can you format your navigation bar?
Extension
Create another page named flexbox and add a link to this on your nav bar.
Using the w3 Schools tutorial make at least 4 layout options to play around with different flexbox properties so you know how a range of them work.
For an example of what this could look like:
Note: The container is the box that is holding the smaller boxes inside which are the items.
Apply what you have learnt so far to finish off the home page and one other page.
Get the teacher to look over your website, before moving onto the next tasks.
Task 11 - Improving the efficiency of your website
There are many different ways you can improve the efficiency of your website. We are going to focus on the following,
File management
Validating your code
Changing the aspect ratio of images
Code comments
Follow each of the slides below to apply these things
Task 12 - Improving accessibility
What does accessibility mean
use the chrome developer tool to generate a "Lighthouse" report
Get the teacher to look over your work and give you feedback.
You may then start the project
Extension - CSS Grid
Learning goal - We are learning how to use CSS Grid to create complex layouts
Go through the slides
Work through w3schools CSS Grid intro
Recreate the layout from the slides
Read the rest of the w3schools info on CSS Grid.
Extension - Detecting Screen Size
Learning goal - We are learning how to use basic media queries
Go through the slides
Work through w3schools CSS Media Queries
Recreate the layout from the slides
Extension - How to use the W3.CSS framework to make your website more professional.
Follow the slides to learn more about the W3.CSS framework.
Play around with the tutorials on W3schools to see how to could use this in your assessment project.
Try applying W3 styles to your practice site.