The Dev Boot Up

We create the foundational three files of a website and link them together into the minimum viable combination of HTML, CSS, and JavaScript. We break down and analyze the Big Red Button: a website combining all three technologies into a simple, delightful user experience.

Then, we start creating sites with just HTML to get the structure of elements on the page. You'll be able to make a site, but it will look like generic, early 1990s garbage. Nowhere to go but up!

We add some style into our lives by using a CSS stylesheet to decide the appearance and layout of our HTML elements. While there are infinite CSS rules out there, we'll focus on the layout-based rules of display and CSS grid properties.

Our week 1 layouts look great! Just don't look at them on a phone.

Now that we can put elements next to each other and give them a little CSS zazz, we're going to figure out how to make it look good on a phone. In fact, we're going to start designing mobile-first sites that assume a user is on a small screen, then figure out what extra goodies our desktop and larger screen users might want.

We'll take on the big project of our course and create the HTML and CSS behind the landing page we're building. In this highly collaborative, code-heavy session, we'll apply what we've learned so far and build the landing page piece by piece as it's described in the wireframes.

If you want your own final project to have a different layout, feel free to choose different options from other websites or the vast network of layout template list sites available.

Now that we can build our lovely houses in HTML and CSS, it's time to turn the lights on and create some interactive elements that respond to our users actions. For that, we're going to need JavaScript.

We start with using JavaScript's Document Object Model (DOM) to interact with the HTML elements we know and love. Once we know how to access these elements in JS, we get to set up repeatable functions that fire whenever the user does on our page, like clicking a button. Unlimited power awaits!

Now that we have all the pieces of the puzzle, we'll start creating User Interface Components: self-contained pieces of a site that are managed by a "state" in our application, like a light switch that has "on" or "off" states.

We'll add the position property to our toolkit and start creating some truly dynamic sites with much greater potential to delight or annoy our users. Pop-up forms, chat bot windows, menus sliding on and off screen....all these things and more are possible through clever use of UI Components and the position property.

We'll wrap up our template site with the full MVP list of features and wireframes before wrapping up the course with a look at the many things you should continue learning to build your skills.

You'll leave class with the confidence to keep trying out new things and learning as you go, having practiced plenty of times on projects and during class collaborations how to keep going into new concepts and techniques that you haven't used before.