Web practice tasks

11DTEC

website

developing your website

HTML & CSS - MINI SKILLS TASKS

TASK ONE:

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.

TASK TWO:

The basics of coding with HTML and CSS

To recap the basics of HTML and CSS, complete the Intro to HTML & CSS on the Progate website. You may have done this course in year 9 but that was quite some time ago so it's best to recap before we go on.

Progate | Learn to code, learn to be creative.

TASK THREE:

Setting up your practice site:

1) Create a new site using the text editor suggested by your teacher and name it 11DTEC-PracticeSite.

2) Follow the Slides to set up your home page. You will need to copy and paste this into all other pages you create.

Before moving onto the next task you must have done the following:

Added in the structure tags to the HTML.
Between the <head> tags added;
1. A title, eg:

<title>w3.CSS skilss</title>

1. A favicon. Use an icons from the slide, eg:

1. A Charset, eg:

1. Link to the external style sheet, eg:

Setting up the HTML Structure

Task FOUR :

Responsive web design and using W3.CSS to make the site responsive.

W3. CSS is a Cascading Style Sheet (CSS) developed by w3schools.com. It helps in creating fast, beautiful, and responsive websites.

You are able to use W3.CSS for your website assessment, but you will need to use your own knowledge of HTML , CSS & Media queries to customize your site. By working through the following tasks we will be making this website: Website example

W3 schools has great resources to help you learn about all the different W3.CSS styles you can use. Click on the W3 Schools logo.

Tasks:

1) Watch the video on designing mobile friendly sites.

2) Go through the slides to set up the W3.CSS style sheet using the website you have made.

Before moving onto the next task you must have done the following:

Added a link to the W3.CSS stylesheet.
Check the link works by adding a container and heading.
Create a basic layout using containers.
Add links to easily move between the home page and the basic layout page.

1) Setting up W3.CSS

Task FIVE:

Using Panels, Cards and Colours.

1) Follow the instructions in the Slides to the right to practice using panels and cards.

Before moving onto the next task you must have done the following:

Created a copy of the basic layout page and added 3 panels.
Changed at least one panel to a card.
Added a link to the home page called panels.

2) Pannels and Cards

Task SIX :

Commenting on your code.

Comments in HTML are to help the developer understand and organize the code. They are not read by the browser. We can use commenting in HTML to help us organize our div tags.

For example, commenting on closing <div> tags allows us to know easily which opening <div> tag it belongs to. This is particularly important when you have lots of <div> tags.

eg. HTML comment tag

1) For each of the pages you have made so far, go back and comment on the closing <div> tags so it is clear which closing <div> tag belongs to which opening <div> tag.

Before moving on check that you have commented on all of your HTML files. Remember to continue to do this as you work through the remaining tasks.

Task SEVEN:

Introduction to the responsive grid to make your website look good on different screen sizes.

1) Follow the instructions in the Slides to the right to learn about and practice using the responsive grid method. The teacher will run tutorials on this to help with your understanding of how to use it.

Before moving onto the next task you must have done the following:

1) Played around with the responsive grid on w3.schools.

2) Created a new html page called grid.html and linked it to the homepage.

3) Added 12 columns to the top.

4) Created a layout that changes position when the screen size changes

5) Tested your site using Material Resizer:

https://material.io/resources/resizer/

3) Intro to Responsive Grid

Task EIGHT:

Using the responsive grid in context

1) Use the slides to the right to help you create another responsive page that looks like an actual website.

Click here to get images and text required

Before moving onto the next task you must have done the following:

1) Check the home page looks as it should on a PC and Mobile screen using the material resizer - https://material.io/resources/resizer/

4) Grid in context

Task NINE:

Creating a Responsive Navigation bar

Use the w3.schools tutorials to create a navigation bar that links all the pages together.

Tutorial - https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

Before moving onto the next task you must have done the following:

1) Check all the links work

2) Change the formatting (e.g. fonts, colours, etc)

Task TEN:

Validating your code

It is important to validate your code throughout the development of your site to debug and future proof your code.

1) Run your HTML and CSS through the appropriate validator and fix any errors.

Before moving onto the next task you must have done the following:

1) All the errors should be fix and your code gets a green tick from the validator

HTML VALIDATOR

CSS VALIDATOR

Task Eleven:

Web accessibility

One important implication for your project is how accessible your website for people with site impairments.

Visit the implications page for more information.

1) Put your website into the web accessibility tester and see what changes you need to make to improve the accessibility of the site

Test the accessibility of your site

Page updated

Report abuse