1 of 11

Front-end Development Introduction

Getting started with real-world tools to build a simple website.

WORKING DRAFT: 9/20/2014

This series extends the basics series in terms of skill level—but we’ll start over with a new project, utilizing the great HTML 5 Boilerplate as a solid foundation.

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
  • Introducing javascript DOM manipulation through jQuery
  • Understanding responsive designs (make your site look good on mobile devices)
  • Using javascript to create page navigation effects, including “scrolling” pages, parallax effects
  • 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.



One thought on “Front-end Development Introduction

  1. Update: Here’s an inter­esting article sent to me by the folks at PSD to WordPress, taking a look at the tools that 56 different web “experts” use personally. Worth a look.

Thoughts, questions or qualms?