Differences

This shows you the differences between two versions of the page.

--- en:web_development:lists:multilevel_lists [2021/11/25 08:30]
mag created
+++ en:web_development:lists:multilevel_lists [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
 ====== 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, so delete all the HTML and CSS you've entered so far.
+  * 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 ====
@@ Line 52: / Line 57: @@
   * See how only the hobbies list is bold? The top level list is an <html>ol</html> but it's unaffected.
   * The combined selector <html>ol ol</html> 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.
+<code><!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+</body>
+</html></code>
+  * <html><!DOCTYPE html></html> tells the browser that the code is HTML.
+  * <html><head></html> holds information about the page, while <html><body></html> contains the content.
+  * Copy the HTML code from jsfiddle and paste it inside the <html><body></html> 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><title></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]]

Tech School

User Tools

Site Tools

Differences

Page Tools