Tech School en:web_development:lists
https://techschool.murraygunn.id.au/wiki/
2026-04-12T20:52:44+00:00Tech School
https://techschool.murraygunn.id.au/wiki/
https://techschool.murraygunn.id.au/wiki/lib/tpl/dokuwiki/images/favicon.icotext/html2023-08-16T09:33:52+00:00Anonymous (anonymous@undisclosed.example.com)en:web_development:lists:checklists
https://techschool.murraygunn.id.au/wiki/doku.php?id=en:web_development:lists:checklists&rev=1692203632&do=diff
Web Development Lesson 2 - Lists
Checklists
Setup
* Continue using the 'lists.html' and 'style.css' files you have been working on in Visual Studio Code.
* lists.html
* style.css
Input Checkbox
* Create a basic unordered list at the end of your existing html code (just before thetext/html2023-08-16T09:33:52+00:00Anonymous (anonymous@undisclosed.example.com)en:web_development:lists:exercise
https://techschool.murraygunn.id.au/wiki/doku.php?id=en:web_development:lists:exercise&rev=1692203632&do=diff
Web Development Lesson 3 - Lists
Exercises
Try the following exercises to practice what you've learnt about lists.
Ordered List
Create the following list using HTML and CSS. Feel free to change the items to your own favourites. Add links to some of the items using anything appropriate.text/html2023-08-16T09:33:52+00:00Anonymous (anonymous@undisclosed.example.com)en:web_development:lists:javascript
https://techschool.murraygunn.id.au/wiki/doku.php?id=en:web_development:lists:javascript&rev=1692203632&do=diff
Web Development Lesson 3 - Lists
Javascript Lists
Objectives
In this exercise you will use an array to store a list of items, use a for loop to repeat a block of code, and use an if statement to run different instructions based on user input.
Setuptext/html2023-08-16T09:33:52+00:00Anonymous (anonymous@undisclosed.example.com)en:web_development:lists:menus
https://techschool.murraygunn.id.au/wiki/doku.php?id=en:web_development:lists:menus&rev=1692203632&do=diff
Web Development Lesson 3 - Lists
Menus
Objectives
In this exercise you will display lists as menus, create links to other pages and learn some basic layout properties.
Setup
* In this activity, we're going to start building a web site.
* Open Visual Studio and open your folder.text/html2023-08-16T09:33:52+00:00Anonymous (anonymous@undisclosed.example.com)en:web_development:lists:multilevel_lists
https://techschool.murraygunn.id.au/wiki/doku.php?id=en:web_development:lists:multilevel_lists&rev=1692203632&do=diff
Web Development Lesson 3 - Lists
Multi-level Lists
Objectives
In this exercise you will:
* create multi-level lists
* start using Visual Studio Code, a professional coding platform
* learn one way to target specific elements with CSS
Setuptext/html2023-08-16T09:33:52+00:00Anonymous (anonymous@undisclosed.example.com)en:web_development:lists:simple_lists
https://techschool.murraygunn.id.au/wiki/doku.php?id=en:web_development:lists:simple_lists&rev=1692203632&do=diff
Web Development Lesson 3 - Lists
Simple Lists
Objectives
In this exercise you will create a bulleted list and a numbered list and learn some list-specific formatting rules.
Setup
* Open a new jsfiddle tab.
* Populate the HTML section with headings for 'Recipe', 'Ingredients' and 'Method'.text/html2023-08-16T09:33:52+00:00Anonymous (anonymous@undisclosed.example.com)en:web_development:lists:summary
https://techschool.murraygunn.id.au/wiki/doku.php?id=en:web_development:lists:summary&rev=1692203632&do=diff
Web Development Lesson 3 - Lists
Summary
In this lesson, we have covered the following concepts for lists in web pages.
HTML Tags
* <ol>
* <ul>
* <https://www.w3schools.com/tags/tag_li.asp<li>>
* <a>
* <link>
* <script>
* <br>
* <!DOCTYPE html>
HTML Attributes
* href
* target
* onchange
Styles
* list-style-type
* list-style-position
* border
* combination selectors
Javascript
*