Tyler Graf

29 Web Developer

Worth it?

Mmmhmmm!!!

What is a

Web Developer?

I make websites.

FamilySearch.org

Workflow

(What's a typical day like)

Get a design

Colors
Font sizes
Spacing
Interactive States
Desktop/Mobile

Desktop View

Mobile View

Write Code

Turn the design into code
html (content)
css (styling, colors, font-size...)
javascript (interactivity)

html

<html>
<head>
    <title>Cool Web Page</title>
</head>
<body>

    <header>
        <h1>Page Heading</h1>
    </header>
    
    <nav>
        <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/page1">Page 1</a></li>
            <li><a href="/page2">Page 2</a></li>
            <li><a href="/page3">Page 3</a></li>
        </ul>
    </nav>

    <section>
        <p>Content and body of the page.</p>

        <span class="click-element">Click Me!</span>
        <img src="/path/to/image.jpg">
    </section>

</body>
</html>

content
structure

(hypertext markup language)

css (cascading style sheets)

body {
    color: #333;
    background: white;
}

header {
    background: #333;
}

h1 {
    font-size: 32px;
    margin: 0 10px;
    color: white;
}

ul {
    list-style: none;
    padding-left: 20px;
}

p {
    margin-bottom: 10px;
}

styling
colors
font size
formatting
etc.

javascript (ecma script)

var element = document.querySelector('.click-element');
var img = document.querySelector('img');


hideImage();


element.addEventListener('click', function(evt){
    
    evt.preventDefault();

    showImage();

});


function showImage(){
    img.style.display = 'block';
}

function hideImage(){
    img.style.display = 'none';
}