Web Dev 101

 

Set Up

 

HTML
CSS
JS

The Fundamentals

What is HTML?

The meat and potatoes of any website. HTML is what contains all of elements in our page. And stores them in tags that tell browsers how to interpret and read them

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
    </head>

    <body>
        <p>Mom! Get the camera I'm a web developer</p>
    </body>
</html>

How is a HTML Doc Sturctured?

Head

  • CSS Link
  • Javascript
  • Metadata
  • Page Title

Body

  • Page Content
  • Body Scripts (Abs.js)

But How Does One Write A HTML?

<!DOCTYPE html>
<html>
    <head>
        <title>I'm Self-Explanatory</title>
    </head>

    <body>
        <h1>I'm one style of header</h1>
        <h2 id="bigText">I'm a smaller style of header</h2>
        <p>I'm where you write content</p>
        <p class="links">"a" tags  
            <a href="https://www.w3schools.com/html/html_intro.asp">link to your meme page</a>
        </p>
        <img src="https://i.imgur.com/Bwa0QcF.jpg" alt="I'm an image tag"/>
        <div>
            <ul>
                <li>UL stands for unordered list</li>
                <li>LI stands for list element</li>
            </ul>
        </div>
        <div>
        	<ol>
            	<li>I'm ul but with numbers</li>
            </ol>
        </div>

    </body>
</html>

HTML Summary

So yeah, HTML is really just a bunch of tags telling a web page how to organize and arrange content. The <header>,<div>, and <body> tags are like the sections of a file system. The rest of the tags are the actual content inside of the file system.

 

More on HTML

@ https://www.w3schools.com/html/default.asp

But What About CSS?

Cascading Style Sheets

Is the artist tool to make a web page look good. It's where a large amount of a web developers time goes to die (unless you use a template).

With CSS

Without CSS

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Mack's Amazing WebSite</title>
    </head>

    <body>
        <div id="navbar">
            <ul>
                <li>
                    <a href="mailto:mwilson317@gatech.edu" class="nav-link">Don't Spam Plx</a>
                </li>
                <li>
                    <a href="https://www.facebook.com/groups/GTmemesforbuzzedteens/" class="nav-link">Meme Page</a>
                </li>
            </ul>
        </div>

        <br/>

        <div id="about">
            <h1 id="intro">Welcome to Mack's <span id="fancy">WebDev Website</span></h1>
            <img src="https://media.giphy.com/media/d3JtCNegRi2zgmpG/giphy.gif"/>
            <p>I call it a webdev site, but I'm just linking to tutorials</p>
            <p>Like this one on <a id='address' href="https://www.w3schools.com/howto/howto_js_topnav.asp"> CSS navbars</a></p>
        </div>
    </body>
</html>

That Wasn't Too Tough

Add Some Slight CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');


body {
    font-family: 'Open Sans', sans-serif;
    color: #7f8c8d;
    background-color: #fefefe;
    margin-top: 2em;
}

h1, h2, h3 {
    font-family: 'Slabo 27px', serif;
}

Spice up the recipe in styles.css

<...>
    <head>
        <title>Mack's Amazing WebSite</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
</...>

Link your stylesheet in index.html

Voila... The Font Just Changed

Let's Make It Look Better

How to CSS

CSS works in a similar way to HTML. It looks at a certain tag or element and tells the browser "Make it look like this".

 

To do this on the code side you specify what tag, class, or element you want to style. Hit the curly q's {}, and begin styling away

...
#navbar > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    text-align: center;
}

#navbar > ul > li {
    margin: 0 2em;
    display: inline-block;
    float: right;
    border-bottom: solid #7f8c8d 2px;
    position: relative;
}

.nav-link {
    width: 100%;
    height: 100%;
    margin: 0;
    text-decoration: none;
}

a {
    color: #96eb36;
}

Making Nav Look Nice stylesheet.css

Making It Stylistically Sound

...
img {
  border-radius: 70%;
  overlayColor: 'white';
}

#intro {
    font-size: 4em;
}

#about {
    text-align: center;
}

#fancy {
    color: #9DE79C;
    text-decoration: underline;
}

Javascript

The closest to CS1331 you'll get with frontend

What is JavaScript?

Javascript's job when it comes to frontend web dev is to make your website reactive and engaging. This could mean adding animations, drop-down menus, buttons, etc.

    ...
    <button onclick = "pika()"> Pika? </button>
    <script>
    	function pika(){
           alert("Pika! Pikaaa!");
        }
    </script>
</body>
    ...
button {
  background-color: #96eb36;
  font-family: "Open Sans", sans-serif, white;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
}

Javascript can be directly embedded into HTML or it can be linked to like a stylesheet

Speaking of stylesheets let's make our button look good

More Than A Button

var fancyText = document.getElementById('fancy');
var intervalTime = 150;
var initialPause = 1000;
var callbackPause = 500;

In order to edit things dynamically with our script we have to select them with the document.getElementById() function

    ...
    <script src="script.js"></script>
</body>

And to make sure it runs we need to add a reference in index.html

The Birth of script.js

Cont.

...

function deleteContent(callback) {

    var intervalId = setInterval(function() {
        if (fancyText.innerHTML.length == 0) {
            clearInterval(intervalId);

            if (callback) {
                setTimeout(callback, callbackPause);
            }
        }

        fancyText.innerHTML = fancyText.innerHTML.substring(0, fancyText.innerHTML.length - 1);
    }, intervalTime);

}

Wait But What's Going On Here?

...

function deleteContent(callback) {

    var intervalId = setInterval(function() {
        if (fancyText.innerHTML.length == 0) {
            clearInterval(intervalId);

            if (callback) {
                setTimeout(callback, callbackPause);
            }
        }

        fancyText.innerHTML = fancyText.innerHTML.substring(0, fancyText.innerHTML.length - 1);
    }, intervalTime);

}

A big part of understanding JS is understanding asynchronous functions. Asynchronous functions are ones that may run while the rest of your program is doing stuff. So in order to make sure everything goes smoothly we have to use callback functions and interval timeouts  to make sure code runs as expected

Some More Code To Add

...
function addContent(contentToAdd, callback) {
    var currentIndex = 0;

    var intervalId = setInterval(function() {
        if (currentIndex == contentToAdd.length) {
            clearInterval(intervalId);

            if (callback) {
                setTimeout(callback, callbackPause);
            }
        }

        fancyText.innerHTML = contentToAdd.substring(0, currentIndex);
        currentIndex++;
    }, intervalTime);
}

One Last Thing On The End

...

setTimeout(function() {
    deleteContent(function() {
        addContent("HackGTeeny WorkShop", function() {
            deleteContent(function() {
                addContent("Pikachu fan site", function() {
                    deleteContent(function() {
                        addContent("Web Dev 101 Course");
                    })
                });
            });
        });
    });
}, initialPause);

This is an example of the callbacks and timeout functions we use in order to make sure that our web page runs as expected

And Now We Have a Our Full Site w/ Text Animation

Questions?

Github Link for Code: https://github.com/Mack33467/WebDev101

Link to HTML Tutorials: https://www.w3schools.com/

Link to Mozilla's JS Tutorials:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Link to Angular a webdev framework:

https://angular.io/

 

Thank You

HackGTeeny: Web Dev 101

By Mack W.

Made with Slides.com

HackGTeeny: Web Dev 101

A short intro to Web Dev for the the HackGTeeny series of workshops in collaboration with the CM Ambassadors

  • 1,468

More from Mack W.