Let’s Build a Website

(and Talk About The Job of Front-End Design and Development) Hosted by Chris Coyier It’s an ever-evolving field, they say, and the job of a front-ender these days is broad. It’s not just “I write the HTML and CSS” anymore, if it ever was. It’s part designer, part coder, part empath, part interaction designer, and part futurist. Let’s talk about all that by actually building a website. We’ll start from scratch, work through the stages of the process, and end up with a finished website. This will give us an excuse to talk about all the big topics in front-end development and what our jobs really are. How will this happen? Among other things: We’ll scaffold out a design in HTML, giving us an opportunity to talk about things like HTML5, semantics, and accessibility in their native contexts.

We’ll lay out the site in CSS, and in the process talk about things like modern layout techniques (flexbox! grid!), preprocessing, and the role of build tools in the front end process.

We’ll use some JavaScript to do things that only JavaScript can do, but we’ll do it in a responsible way that performs well and doesn’t cripple the site if it doesn’t load.

At every turn, we’ll consider performance and user experience, making sure we’re building something for human beings, not spec sheets or portfolios.

And we’ll think about how to make the offline experience the best it can be, because we never know when someone will suddenly lose bandwidth due to network outages, subway tunnels, or holding the phone wrong. All this in just one day? Yes! By the time we’re done, we’ll have reconsidered not just what we do, but why we do it, and how to do it better moving forward.

React Workshop Hosted by Wes Bos React is a JavaScript library that has become the tool the choice for easily building dynamic user interfaces. The power is in the Virtual Dom — when your application’s data changes, React figures out which parts of your document need to be changed, and immediately update only those parts. Hundreds of thousands of developers from small agencies to large companies use React to deliver top notch experiences in their apps and dynamic website components: Facebook.com is made up of thousands of React components.

Instagram web viewer is entirely built in React.

The brand new Netflix movie browsing experience is powered by React

and many more! You will learn: How to build an entire App or Website Component in React.js from start to finish.

Understanding React Components and writing markup with JSX

Maintain your Application’s State

Communication between components

Working with State and HTML5 LocalStorage

Real time web socket data with Firebase

Creating maintainable code with JavaScript Modules

URL routing with React Router

Taking advantage of new ES6 Features

Design Systems Workshop Hosted by Micah Godbolt Join Micah Godbolt, Senior Design Developer at Microsoft and author of Frontend Architecture for Design Systems, as he shows the Four Pillars of Frontend Architecture and how to deploy scalable and sustainable web sites. Attendees will learn about popular tools and techniques as we build a fully featured design system from the ground up. By coding along with Micah in this workshop you will learn: How to establish proper coding standards, and how to enforce them.

How to create a streamlined and automated process for turning user stories into deployed frontend code.

The value of automated testing in all areas of your site, including visual, functional and performance.

And the best tools for creating living, powerful and useful documentation that will be the center of communication between every member of your team. Micah will also show you: How to create consistent methodologies and coding standards for HTML, CSS and JavaScript.

How to make a fully automated process from the editor to the style guide to the production environment.

How to develop a full testing suite using a combination of multiple testing approaches.

And how to write a fully documented system using various automated and manual documentation systems.