Vue for beginners

Session 1 - The Basics

(HTML, DOM API, CSS)

Web

  • HTML - Markup - Build the UI
  • CSS - Stylesheets - Style the UI
  • Javascript - Interactivity - Make the UI interactive
  • Static assets - Images, Fonts, Videos
HTML

HTML Page

HTML is a tree

						<html>
							

								My Title
								
								
							

							<body>
								
Header

								
Content

								
Footer

								
							</body>
						</html>
HTML

HTML Tree

Request Flow

HTML

Basic common tags


						
Block content

						Inline content
						Inline content 2
      
Paragraph

      
      crocodile
Block content
Inline content Inline content 2

Paragraph

crocodile
HTML

Basic common tags


							
Header size 6

							
    
								
  • unordered list item 1
    • 
								
  • unordered list item 2
    • 
							

							
    
								
  1. ordered list item 1
    2. 
								
  2. ordered list item 2
    3.
Header size 6
  • unordered list item 1
  • unordered list item 2
  1. ordered list item 1
  2. ordered list item 2
HTML

HTML Attributes


            
            
            
...
...
HTML

HTML Form

Let's build a simple Todo List

That allows us to:
  1. Show a list of tasks
  2. Add a task
  3. Click a task to archive it (crosses it out and turns the text gray)

Exercise 1 - Layout

Build a simple todo list layout
  1. Open the file index.html in the folder exercises/ex1 in chrome
  2. Create a todo app layout with a form with two elements inside:
    • an input with the id "todoInput"
    • A button with the text "Add"
  3. below the form add a simple unordered list of 4 todo items with the id "todolist" 

              
              
              
    
                
  • list item 1
    •
CSS

Add styles to HTML (CSS)
Added to the <head> tag
CSS

CSS Selectors


            /* class selector */
            .class-name {
              background-color: blue;
            }

            /* id selector */
            #elementId {
              color: red;
            }
CSS

Add a style to Exercise 1

add the following stylesheet to your html file: 

            <link rel="stylesheet" href="https://cdn.rawgit.com/kimeiga/bahunya/css/bahunya-0.1.3.css" />
Javascript

Add interactivity to HTML (JS)
Added to the end of the <body> tag
Javascript

DOM API - Query Selector


						const container = document.querySelector('#someId');
						// These methods can be called on any DOM elements
						const containerChild = container.querySelectorAll('.some-class');
Javascript

DOM API - Create & Append


						const tasklist = document.createElement('ul');
						const listItem = document.createElement('li');
						listItem.textContent = 'List item text';
						tasklist.appendChild(listItem);
Javascript

DOM API - Listening to events


      // listen to the click event on an element
						document.addEventListener('click', () => console.log('clicked'));
Javascript

Add some interactivity to Exercise 1

Make the script part in ex1/index.html work
  • Query selector api - Get a reference to a dom element - document.querySelector('#elementId')
  • Create new element in code (without adding to the DOM) - document.createElement('tagname');
  • Get input text - inputElement.value
  • Change element text content (list item text for ex.) - element.textContent = 'some text'
  • DOM Event api - element.addEventListener('eventName', handlerFunction)
  • Add an element to the dom - parentElement.appendChild(childElement)

Live editable style

Normally, style elements have display: none; by the user agent
But we can force them to be visible by setting them to display: block

What we've learned

  • HTML tags and attributes
  • Event listeners
  • CSS Stylesheets
  • DOM Javascript api

Question Time!