====== 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
==== Setup ====
* We'll start from a blank slate in [[https://jsfiddle.net|jsfiddle]], so delete all the HTML and CSS you've entered so far.
==== Nesting Lists ====
* Sometimes you'll want to have lists inside of lists. Think of the table of contents of a textbook where each chapter has a number of subheadings and even those may have subheadings.
* To keep it interesting, we'll look here at a simple profile of yourself.
* Enter the heading 'Who Am I?'
Who Am I?
because I'll use it to illustrate a point later.
- Family Members
- Hobbies
- Favourite Bands
- Family Members
- Father
- Mother
- Sister
- Brother
* Notice that the new list needs its own or tag.
* Also notice that the whole list goes before the tag of the heading list element.
* Finally, you should have noticed that the browser automatically uses different bullets for the different levels of list items.
* Try this yourself with the Hobbies and Favourite Bands sections.
==== Cascading Styles ====
* Just to quickly review the way CSS cascades to lower level elements, try the following CSS code.
ol {
color: blue;
}
* See how even the sublists are now blue, not just the upper level that we selected. This is cascading.
==== Combining CSS Selectors ====
* To make a point, change the second list to be ordered.
- Hobbies
- Music
- Football
- Cycling
* Now, add the following CSS code to target that specific list.
ol ol {
font-weight: 700;
}
* See how only the hobbies list is bold? The top level list is an ol but it's unaffected.
* The combined selector ol ol means that the rules apply to all ordered lists inside another ordered list.
==== Tools: Visual Studio Code ====
* jsfiddle is great for quickly testing a piece of code, but it has limitations.
* Primarily, you can't easily see a full screen result.
* Simalarly, it's difficult to see large blocks of code.
* Instead, there are many full web development source code editors available with varying benefits and levels of complexity. We will be using Visual Studio Code, which is one of the most powerful.
* First, create a folder on your desktop with your name.
* Open Visual Studio Code.
* Navigate to File -> Open Folder and select the folder you created.
* Hit Ctrl-N to create a new file. Hit Ctrl-S to save the file and name it 'lists.html'.
==== HTML Structure ====
* Type 'HTML' and select 'HTML:5'.
* Visual Studio automatically enters the structure of a full HTML document.
Document
* tells the browser that the code is HTML.
* holds information about the page, while contains the content.
* Copy the HTML code from jsfiddle and paste it inside the tag.
* Right click and select 'Open with Live Server'. This will open the page in a new browser tab.
* Notice that the result is what we saw in jsfiddle before we added CSS and Javascript.
* Also notice the label in the browser tab says 'Document'. That comes from the </html> tag in the <html><head></html> section.
* Edit the <html><title></html> to say 'Lists' and refresh the page (right-click and select 'Open with Live Server'.
* Notice that the label has now changed.
==== Adding CSS ====
* Create a new line inside the <html><head></html> tag, type 'link' and select 'link:css'.
* This adds a line that says <html><link rel="stylesheet" href="style.css"></html>, which tells the browser where to find the CSS code ('style.css' in the href attribute).
* Hit Cltr-N to create a new file and Ctrl-S to save it as 'style.css'.
* Now we can copy the CSS code from jsfiddle to your 'style.css' file.
* Save that and again open the code in Live Server. It should now have the formatting we added.
==== Final Code ====
If your code doesn't look quite right or you want to check it against mine, here's what we've been working on.
* [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/en.php|lists.html]]
* [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/style.php|style.css]]
[[en:web_development:lists:checklists|Next: Checklists]]