Front End Web Development

Spark Boulder, Summer 2017

Session 4: The Session Home

Portfolio Site Show-and-Tell, Lab session

Assignment 3 bugs D:

Bugs, y u do dis? :C

@classbot uses a library called JSDOM (stands for JavaScript Document Object Model) to take in HTML, grab additional links to CSS and JavaScript, then render all of that stuff into a fake browser.

As part of this rendering process, the browser creates a "render tree", which takes all the styles for a every element and puts them together. If there are conflicting (overwriting) styles for a single element, it uses CSS specificity rules to pick the correct one.

From what I can tell, sometimes JSDOM doesn't quiiite get it right :c

Want to see some hardcore advanced web dev knowledge on the topic? Check out the Render-tree Construction, Layout, and Paint topic on Google's Web Fundamentals site.

Project 2: Client Project

For your second project, I'd like you to work with a client to build something web-dev related for them!

The scope of your project is really up to you. I'd recommend building some kind of landing page or marketing site for the client - HTML, CSS, text, images, links, everything.

If the client wants you to improve on an existing site, it's possible, but I'd be careful - monkeying around with prepackaged Wordpress/Squarespace themes is a pretty easy way to get a headache.

If you've already got a client, great! If you need a client, I'd recommend first reaching out to @dannywalsh on Slack, and if you still can't find anyone, you can try emailing some of the folks listed on readings 9.

A couple things:

FAQ

Q: Do they have to pay me?

A: Nope! They don't have to. Part of the class work and all.

Q: Are they allowed to pay me?

A: Of course! (but make sure it's a small amount, otherwise you'll have to sign paperwork and stuff)

Q: What if I can't get it done in time for session 9?

A: I don't expect this to be completely done by Session 9! Your clients will likely be finnicky and temperamental, and delays in projects happen. Submit your site whenever it's all done, hopefully by the end of the class.

Q: Does the client have to use what I make?

A: Nope - the client is under no obligation to publicly use your work. If they would like to, they totally can!

More dumb fun web stuff

Still trying to understand CSS selectors? Try this CSS Selector game!

http://flukeout.github.io/

Anyone want to show off their portfolio site?

Reminder: keep that site44 site live!

You might want to create a separate site44 site for your portfolio site, and keep it live after the class ends! You want to be able to show this off to potential employers and clients.

Setting up your site44 site with a custom URL

  1. Buy a domain (I usually use Namecheap)
  2. Go into your Namecheap dashboard, and click "Manage" on the domain that you're trying to connect.
  3. Head into the "Advanced DNS" section, and find the "Host records" section.
  4. Add new record -> CNAME record
    1. Host: www
    2. Target: domains.site44.com
    3. Hit the checkbox to save
  5. Head back to site44, and create a new site with your own domain.
    1. Instead of using a site44.com domain, put the name of your site (www.your-site-name-here.com) in the "Use your own domain" section, and click create.
    2. It might not validate right away! The internet is slow sometimes.
  6. Once it validates and you create the new site, copy all your files into your new dropbox folder.
  7. Marvel at the vastness of your ultimate cosmic power!

The next 5 sessions

The next session we have will cover Working with Clients. It's important to get this done early, so that you're comfortable working with clients.

The other 4 sessions we will learn about page layout with CSS.

The 2 things you need to know to lay stuff out on a page

  1. Every single page on the internet is just a series of nested boxes.
  2. You should(*) use flexbox to lay out all of your nested boxes.

*: of course, there are plenty of caveats that we'll get into

Every single page on the internet is just a series of nested boxes.

We've already sort of figured this out - there's an html element, and then a body element, and then a bunch more elements, all nested within each other.

Each element is a box. It has height, width, padding, border, and margin.

This is called the CSS box model.

You can check out the CSS box model on an element in Chrome's developer tools by looking for this thing:

padding pushes the content away from the border, and margin pushes the element away from other elements. More on this in session 6, but that should get you started!

You should(*) use flexbox to lay out all of your nested boxes.

Flexbox basics

Want to "play a game" to learn flexbox? Check out Flexbox Froggy

Flexbox: perfect centering

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="flexboxContainer">
    <h1 class="elementInFlexboxContainer">
        By The Hammer Of Thor! This is exactly in the center of this container!
    </h1>
</div>
/* style.css */

.flexboxContainer {
    display: flex;
    /* don't forget this bit! what happens if you do forget it? */
    height: 100%;
}
.elementInFlexboxContainer {
    margin: auto;
    /* in this case, the margin automatically expands to fill all available
    space in the flex container */
}

Flexbox: putting things in rows

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="flexboxContainer">
    <h1 class="elementInFlexboxContainer">
        By Merlin's Beard!
    </h1>
    <h1 class="elementInFlexboxContainer">
        These two elements are side-by-side!
    </h1>
</div>
/* style.css */

.flexboxContainer {
    display: flex;
    /* don't forget this bit! */
    height: 100%;
}
.elementInFlexboxContainer {
    margin: auto;
    /* notice that the two elements aren't actually splitting the page 50/50.
    Any ideas how we could fix that? */
}

Hey...we didn't actually change any CSS!

That's because flexbox picks flex-direction: row by default. Check the cheatsheet!

Flexbox: putting things in columns

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="flexboxContainer">
    <h1 class="elementInFlexboxContainer">
        Great Odin's Ravens!
    </h1>
    <h1 class="elementInFlexboxContainer">
        These two elements are stacked top-to-bottom!
    </h1>
</div>
/* style.css */

.flexboxContainer {
    display: flex;
    flex-direction: column;
    /* don't forget this bit! */
    height: 100%;
}
.elementInFlexboxContainer {
    margin: auto;
    /* notice that the two elements aren't actually splitting the page 50/50.
    Any ideas how we could fix that? */
}

Hey! We didn't really change any HTML that time!

You can use the flex-direction: column style to change to a column format.

Flexbox: putting things in rows and columns

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<h1>Ken's super duper awesome site with an awesome layout!</h1>
<div class="main">
    <div class="nav">
        <a href="#">home</a>
        <a href="#">about me</a>
        <a href="#">portfolio</a>
        <a href="#">contact</a>
    </div>
    <div class="content">
        <p>
            Work it harder make it better make it better do it faster. Work it harder hour after hour. Work it harder, work it harder, makes us stronger hour after hour, makes us stronger. More than ever do it faster, do it faster make it better. More than ever.
            Work is never over.
        </p>
        <p>
            Makes us stronger. More than ever. Do it faster more than ever makes us stronger. Work it harder makes us stronger. Hour after hour, work it harder do it faster work is never over do it faster make it better. More than ever. Make it better makes us stronger.
            Do it faster.
        </p>
        <p>
            Do it faster more than ever, hour after hour, work it harder hour after hour, make it better. Work it harder, work it harder hour after hour. More than ever makes us stronger. Work is never over. Do it faster make it better. Hour after hour. More than
            ever. Makes us stronger.
        </p>
    </div>
</div>
<h1>code and design by hofftech</h1>
/* style.css */

.main {
    display: flex;
    flex-direction: row;
}
.nav {
    display: flex;
    flex-direction: column;
    width: 100px;
    /*
        I just learned this today! If you want to keep one of your flex items a
        fixed size, use `flex-shrink: 0`. Try turning this on and off, and check
         the documentation!
    */
    flex-shrink: 0;
}

mind: blown

What questions are there?

Stuff for tonight:

How to be a Web Developer

Excelsior! 🚀