Web Development in 7 short lessons

Prerequisites: Programming in 10 short lessons

1) HTML describes the layout and content of a web page using pairs of tags to form elements. Elements may have attributes.

<h1>Introduction</h1>
<p>h1-h7 are header tags. p is for paragraph. a is <a href="https://aurifexlabs.com">link</a>. img is for image.</p>

Run

2) CSS describes the style or visual appearence of the elements.

<style>
    h1 {
        color: red;
        font-size: 300%;
        margin-left: 100px;
    }
</style>

Run

3) Code written in Javascript is used to add dynamic behavior to web pages.

console.log('Press F12 to open the developer tools and see the console.')

Run

4) Selectors are used in CSS and Javascript to select HTML elements.

<form name="login">
    <label name="email">Email</label>
    <input type="text" name="email">
    <button>Login</button>
    <p class="error"></p>
</form>

<style>
    form[name="login"] {
        border: 1px solid grey;
        width: 50%;
        border-radius: 1em;
        padding: 0.5em;
        box-shadow: rgb(221, 221, 221) 0px 0px 3px 3px;
        margin: 1em;
        background-color: white;
    }

    .error {
        color: red;
        display: none;
    }
</style>

<script>
    var loginForm = document.querySelector('form[name="login"]')
    var errorElement = loginForm.querySelector('.error')
    
    // Wait 5 seconds (5000 milliseconds)
    setTimeout(function() {
        errorElement.textContent = "5 seconds have passed."
        errorElement.style.display = 'block'
    }, 5000)
</script>

Run

5) Event handlers allow code to run when a thing happens in the browser.

loginForm.addEventListener('submit', function(event) {
    event.preventDefault()

    var email = loginForm.querySelector('input[name="email"]').value
    login(email)

    return false
})

function login(email) {
    console.log('Email:', email)
}

Run

6) Requests are messages passed from the client to a server.

function login(email) {
    fetch('/content/learn-web-dev/login?email=' + encodeURIComponent(email), {
        method: 'POST',
    })
    .then(function(response) {
        if(response.ok) {
            console.log('You are logged in!')
        }

        else {
            console.log('Error!')
            loginForm.querySelector('.error').textContent = 'You must enter a valid email address.'
        }
    })
}

function displayLoggedInUser() {
    fetch('/content/learn-web-dev/user')
    .then(function(response) {
        if(response.ok) {
            return response.text()
        }
    })
    .then(function(name) {
        var nameElement = document.querySelector('[name="name"]')
        nameElement.textContent = 'You are logged in as ' + name
    })
}

Run

7) Servers read data from and write data to databases.

// This runs on the server.

function handleRequest(request, response) {
    if(request.method == 'POST' && request.url.startsWith('/content/learn-web-dev/chat?')) {
        var message = parseQueryString(request).message
        
        var data = {
            message: message,
            time: Date.now(),
        }

        var writeQuery = db.table('messages').insert(data)

        writeQuery.run(dbConnection, function(error) {
            if(!error) {
                response.writeHead(201)
                response.end()
            }

            else {
                response.writeHead(500)
                response.end()
            }
        })
        
    }
    
    else if(request.method == 'GET' && request.url == '/content/learn-web-dev/chat') {
        var readQuery = db.table('messages').readAll().sortedBy('time')
        
        readQuery.run(dbConnection, function(error, results) {
            if(!error) {
                response.writeHead(200, { 'Content-Type': 'application/json' })
                response.end(JSON.stringify(results))
            }

            else {
                response.writeHead(500)
                response.end()
            }
        })
    }

    else {
        response.writeHead(404)
        response.end()
    }
}

var dbConnection = db.connect(function() {
    http.createServer(handleRequest).listen(80)
})

Run

Great job!

These are the basic building blocks of web development. The key to learning web development is practice. There are patterns and details, but the core is right here.

If you want some help learning, go to aurifexlabs.com for information about training.