Html/CSS Training

Home -> Services -> Lessons and Training -> Front End Dev
smaller text tool iconmedium text tool iconlarger text tool icon
frontend-dev-web

Front-End Web Development and Design Training

Over the years I have helped hundreds of students from many backgrounds, interests and levels of experience unravel the mysteries of making great websites. Whether your interest is in design or coding or both, I can help you get off to a proper and current start.

This program is not for everyone. For example if you just need to make a site or two for your business, professional training would probably be overkill. You would be better off hiring someone else or going with something like Squarespace. But if you are interested in a career in web development or maybe the front end has been the missing link in your CS program, code school, etc. I can help. If you are primarily interested in design, that's fine too. I am well versed in both and the focus will be towards your goal. In any case there is no better place to start than with html and css. Getting a good grounding in markup plus a general knowledge of the various technologies involved, before moving on to more advanced topics, will make the entire road much easier for you.

What I am offering to beginners or intermediates is a group of rigorous courses divided into 5 tracks. Tracks 1-3 are the core of the program with 4 and 5 depending on your interests. The reason for blocks and tracks is not just to sound like the next code school, but to give you flexibility with your budget and pace. If you are motivated and want to make quick progress towards learning front-end development, then at least tracks 1-3 should be taken consecutively. But if you prefer to move slower or tackle some things on your own that's fine too. I am always full of advice on how to continue your learning once we are through.

Disclaimer: you don't have to have be Einstein (pardon the pun) to learn to code. In fact you really don't need much aside from a decent Mac or PC and roughly 8-10 hours per week of spare time. But I won't sugar coat it like I've seen some other dev courses doing. You'll have to work hard and be tenacious. The best an instructor can do is be a good guide and get you coding (or designing) as much as possible. The lesson time is nowhere near enough to cover everything. But if you stay positive and follow the roadmap I am confident you will be set in the right direction to be a contender in a demanding field.

Track 1: Html5, CSS and the basics

Cost: 2 blocks | Time: 20 hours lecture (includes 4 bonus hours) + 4-6 hours /week homework | Prerequisite: none, absolute beginners welcome!

Html and css are where you want to begin whether you see yourself as a coder or a designer. Some of you that are more code minded may be really aching to start with Javascript. But I think this is a big mistake and one that I feel even some Computer Science programs get wrong. If you don't know html and css and their logic "solidly", you'll find yourself struggling with javascript. This is because its main purpose is to create or manipulate html and css! Likewise for design. You'll be a far better designer if you know how your designs will translate to code and the many different screen sizes.

Note: Unless you already have a firm html/css knowledge, Track 1 is a prerequisite for everything else in the program (besides Drupal backend).

The HTML5 track usually takes about two months.
  • Start with a talk and see some demos about how it all works, the front end and back end technologies involved, current trends in front end development and design
  • Using a code editor like Sublime Text (recommended for beginners), Webstorm, Brackets, etc. on either Mac or PC.
  • Basics of html5 and css (the dom, cascade and inheritance, box model, inline vs block, css resets, layout strategies and more)
  • CSS effects and animation
  • Techniques for dealing with SEO, browser issues and using css resets
  • Creating a simple web page, coded correctly with some basic styles but with no layout yet
  • Creating a more detailed and interesting responsive home page with some layout challenges
  • Create an interior page using the same template but with layout changes
  • Working with media queries and responsive, fluid layouts that adapt to all screen sizes
  • Use Chrome Developer Tools to debug code in the browser. Using online tools to test your code.
  • Use Github to collaborate
  • Deploy code to a live server with ftp
  • Spend a little time in Photoshop or Fireworks and basic graphics issues

Track 2: Javascript

Cost: 2-3 blocks | Time: 16-24 hours lecture + 4-6 hours /week homework | Prerequisite: Track 1 or experience

These days without a good knowledge of javascript it will be hard to land a job. It is used for everything from user interface interactivity, to form validation, to routing urls and replacing traditional server side application logic. This course has two goals. First to give you a solid grasp on the fundamentals of the language. Second to give you some practical recipes for common user interface interactions.

The Javascript track takes 16-24 hours over a period of one to two months.

  • Start with a talk about how it works, the common frameworks and libraries, how to better use google to find documentation, ask questions, etc.
  • Javascript syntax, operators, loops, arrays, objects, functions, dom selection/manipulation, etc.
  • Basic jQuery. jQuery is a common library and even though it may have reached its peak, it is still very valuable to know, and can smooth out a lot of things
  • If you are geared more towards UI design, we will probably spend more time with jQuery. Otherwise, we will spend more time learning the native equivalents
  • Using browser dev tools to debug code
  • Common UI interactions like button, mouse and scroll events, sticky headers and parallax (open to others)
  • Understanding performance issues including JS vs CSS for animation
  • Form interactions and validation
  • OOP (object oriented programming) techniques
  • Ajax, json and interacting with a webservice (api) like Flickr or Google Maps.
  • Various small javascript projects

Track 3: The Command line, Sass, Twitter Bootstrap, Git and Build tools

Cost: 2 blocks | Time: 16 hours lecture + 4-6 hours /week homework | Prerequisite: Track 1 or skills test

Another very important part of front-end development is the command line and associated tools. Learning these will make you work much more efficiently, not to mention that they are commonly expected by employers.

The Tools track takes 16 hours.

  • Command line 101. Learn the basics of using terminal (Mac), git bash (Windows) or bash (Linux)
  • Sass fundamentals and getting it running either through the command line or an app like Codekit
  • Setting up your environment and package managers (homebrew or chocolately, Node/NPM, Ruby/Gem and Bower)
  • Git for version control, collaboration and deployment
  • Github
  • Participate in a practice collaboration using Git, Github and branching
  • Bootstrap responsive grid, components, javascript behaviors and using the documentation
  • Using Bower to manage front-end dependencies
  • Using Grunt to automate tasks like script concatenation, minifying, image and svg optimization, image sprites, etc.
  • Optional: learn vagrant with PuPHPet (simple puppet) to quickly set up local development servers that precisely match your production servers
  • Optional: learn to work with and deploy to a remote cloud host like Amazon Ec2 or Digital Ocean

Track 4: Design for the Web

Cost: 2 blocks | Time: 16 hours over 1-2 months + homework | Prerequisite: Track 1 or experience

It's true that these offerings sound code heavy and that's because even if you are mainly interested in design, it is almost a must these days to have a basic knowledge of code. At least html and css. The reason is because in order to be an effective designer for the screen, you need to first learn the rules of the screen. Having print graphic design skills will be helpful, but it is a very different thing really. With print, you target a particular size and can throw all the fanciest assets at it you can think of. With the web, you need to be (or should be) much more conservative and sparse because of performance (mobile and desktop) and the need to have your design adapt to any shape or size. The goal of this course is a focus on workflow and the particular needs of web and user interface design.

The Design track takes 16 hours.

  • Discussion of available tools and workflows
  • How to plan and do a basic wireframe from scratch
  • A survey of the different types of assets, their performance and browser compatibility and how to plan ahead: vector (svg), bitmap (jpeg, png, gif), fonts (both for icons and text)
  • Photoshop (or Fireworks) and Illustrator for the web
  • Setting up a grid and responsive considerations
  • Go over some basic design advice, current design trends, typography, color and common layout choices
  • Cover some of the design elements and effects that are reproducible in code
  • How and when to selectively create graphics for export that can't be created in code
  • Finding free and paid assets on the web
  • Using icons properly and easily
  • Using a UI tool kit to mockup a form
  • Techniques for mocking basic user interactions (hovers, clicks, dropdown menus, etc.)
  • Preparing assets, slicing and Save for Web commands
  • Design a site or portfolio (can be a real project if not too complex) then bring it into code

Optional: Drupal and Drupal theming

Cost: $50 /hr. | Time: 6-30 hours | Prerequisite: none for backend, Track 1 for theming

Wherever there is a client, there is a need for user friendly content management. A lot of the talk may be about Wordpress, and for a blog or small site Wordpress is a good option. I've used Wordpress a lot, as well as Drupal and Joomla. If you want to work in the low paying and small project arena with a ton of competition, focus on Wordpress. But for more demanding and higher paying clients, Drupal hands down has a lot more going for it. One problem with Wordpress is that many commonly needed features require plugins. User management/permissions for example is very weak. True you can download plugins to extend it, but then other plugins (like a shop or a forum) won't understand or even break. If you need a multilingual site, you can pretty much fuggetaboutit and the list goes on. Drupal rarely has these types of issues and is a great framework for building whatever functionality you need without compromise. Things are really looking up with Drupal 8 which is right around the corner. Besides improving user friendliness and huge list of big improvements, it adds the ability to create a rest api in the core which can turn Drupal into a central database and CMS for multiple platforms at once (think websites, native phone apps, internet of things devices, etc.). Not to mention that it can play well with the next phase of the web which is single page apps and frameworks like angular.js.

The Drupal track is flexible as far as time because it depends on the skills you already have and how far you want to go with it. 6-8 hours is usually enough to learn the basics of Drupal's admin. If you want to learn a little more about some of the main modules and basic site building, we would need more time. For learning to theme I recommend at least 12-16 hours. For theming, you'll want to first be familiar with Drupal's admin. The html/css track (or strong html/css knowledge) is a prerequisite, and so is at least basic php. But we can go over that as well if you need it.

  • Installing Drupal locally and/or on a remote server
  • Drupal admin basics and terminology
  • Content types, fields, blocks, taxonomy and site planning
  • Users, user groups and permissions
  • The Views module and a few types of uses
  • Pros and cons of some different workflows... i.e. native blocks vs. panels, vs. display suite, etc.
  • Some other common modules at your request
  • Setting up a good content management workflow for clients
  • Site admin, optimization, SEO, Drush and Drush make (if you use the command line)
  • Drupal mulitsite (optional)
Theming:
  • Anatomy of a Drupal theme
  • Choosing a starter theme or creating a theme from scratch
  • Theme content types, views, blocks, etc.
  • Use the Devel module to find and change drupal variables (example, change the markup of a menu to add Bootstrap classes)
  • Basic preprocess functions
  • Create a full theme from mockup to Drupal
  • Bootstrap in Drupal (optional)
  • Setting up a grunt and bower workflow (optional)

Pricing and information

$400 per block. A block translates to roughly 8 lesson hours plus office time (see below). Blocks must be paid for in advance and should be used within 3 months (exceptions are possible, but it isn't recommended to take long gaps within a course). Drupal is $50 /hr. and doesn't require blocks. Also, once a track has been completed further training in the subject is available at a flat $50 /hr. rate if desired.

Lessons are held online and there is a two hour minimum per session. Usually we'll meet twice a week for two hours, but once per week is fine if you have a busy schedule. If you're thinking, "I'm traditional" and feel concerned about online training I suggest giving it a try with the free lesson. With the screen and code sharing software we'll use, I believe you'll quickly feel natural with it and in some ways find it even more effective. If you'd really rather meet in person and are in the Berkeley or San Francisco area I make exceptions, although the cost will be higher.

Homework and materials. As mentioned already, front end development is a complex field and requires a lot of time to master. Realistically there is way more than we can cover in the short time we have together. So in addition to our lectures, there will be substantial homework. Some of it will directly relate to what we are doing and some will be reading materials or supplementing with other online training methods like Code Academy, Team Treehouse and more. Basically I will get you learning and coding a lot, which is the same proven formula that the much more expensive bootcamps like Hackreactor use. So roll up your sleeves and get ready!

Office time.
Forget about road blocks. If you're having an issue between lessons, you are welcome and encouraged to call or email. Up to approximately 15 minutes of office time per week is included for as long as we are working together.

First lesson free. Try an initial one hour lesson free, on the house. If you need to learn front-end development and feel ready to commit to the process, this lesson will give you a chance to make sure the program is the right fit for you. If it is get ready for an adventure! If not no hard feelings whatsoever.

If you have any questions, don't be hesitant to call. There really is no sweat. I'm always happy to answer your questions, explain the program and even talk about your other options in an unbiased way.

For more information, see Lessons and Training.

Out of the fog, into the Blog

Contact Jason Gallagher

Phone: 415.287.3221
Email: click here •  Bio: click here

About this Site

This site is designed and developed by Jason Gallagher and run on the Joomla! open source content management system.

Stay tuned for a new improved and updated version of the site. In the mean time, the forum is offline. Apologies for any inconvenience.