August 17, 2017
Let's build a website!
But secretly, let's just use that as an excuse to talk about our jobs as frontend web designers and developers.
This workshop is for frontend web designers and developers, or people that want to be, who want to dig into the job and learn about it from all the angles.
I promise you'll leave with an understanding of what is expected from a frontend designer and developer these days, and you'll pick up some knowledge about how to do your job better, via skills, tools, or attitude.
It’s an ever-evolving field, they say, and the job of a frontender 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 frontend 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 frontend process.
- 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.
Workshop topics include:
- Converting a design to semantic HTML and CSS
- Layout techniques
- Abstraction via preprocessing
- Developer tooling
- CSS trickery
- Icon Systems