WORKING DRAFT: 9/20/2014
We’ll run through the process of creating the front-end for a website and learn some modern methods and tricks along the way, including:
- Working with CSS grid frameworks
- Understanding responsive designs (make your site look good on mobile devices)
- Building mobile navigation
- Cool progressive CSS tricks for tooltips, sliders,
- Icon fonts
- SVG images
- … and more
It’s worth noting that there are a bunch of other great tools out there to help you learn this stuff. But this particular series promotes the use of real development tools instead of in-browser simulations. While that might be a little trickier to start with, it’s a more “real life” approach, and I think it helps to learn how to use the tools the first time like you’d be using them in practice.
What you need to get started
Same as the basics series—you’ll need two main tools to start: a code editor, and your browser. I use and recommend Sublime Text as a code editor, and I’ll mainly be using Chrome to discuss development using their developer tools. While you don’t specifically have to use those tools, it may be a little easier to follow some parts of the tutorials, as some steps will reference these tools specifically.
If you’re going to use Sublime Text as your editor, I highly recommend checking out (and bookmarking) this great article about features and add-ons at Scotch.io. Don’t worry if some of them seem intimidating to start—you can pick and choose what you need as the need arises.
Go ahead and get those programs set up and swing over the the first tutorial to get started.