CLOSE

Jason Gallagher

Front End Engineer

Jason Gallagher

Front End/Full Stack Development Bootcamp

Front End Development Bootcamp

Over the years I have helped hundreds of students from many backgrounds, interests and levels of experience unravel the mysteries of web development. Whether you are a brand new developer or just need to learn the front end, I can teach you best practices and help you get off to a proper and current start.

This program focuses on gaining an understanding of the fundamentals of development and as such is not for casual students. If for example you just need to make a site/app for your business and have limited time, this is probably not for you. On the other hand if you are interested in a career as a Front End or Full Stack Developer, or maybe if the front end has been a missing link in your CS program or code school, this could be right up your alley.

What I am offering beginners or intermediates is a group of courses divided into 3 parts. The first two are enough if you're mainly concerned about front end. A third part is available if you'd like to take things a step further and explore the back end (full stack). This is not a dusty old program where the skills you learn are already obsolete. We will prioritize the fundamentals because they are more or less a constant, but we will also be using some of the very latest tools, patterns and best practices.

Part 1: Html 5 and CSS

Lecture Time: Approximately 8-10 two hour sessions | Homework Time: 3-6 hours /week | Prerequisite: none, anyone is welcome!

Part one begins with a survey into the various technologies that make up the web stack then focuses on HTML and CSS. It's easy to get the impression that html/css are "easy". This is because these days the pundits aren't talking about them as much, due to the fact that they're not as fresh and exciting as they used to be. Many tutorials glance over html/css and tend to give you the assumption that frameworks like Bootstrap will take care of things. But unless your focus ends up on simple prototypes that look like every other Bootstrap app (in which case you can expect that your app will become as popular as going to the Dentist), this is dangerous thinking! The ability to create a user interface involves html, css and javascript, at a minimum. In this program, CSS and HTML are treated as first class citizens. This will make your skills more marketable and the entire road ahead much easier.

Note that this track or demonstrated knowledge is a prerequisite for the rest of the program.

Part I goals - click to expand

  • Start with a talk and see some demos about the various web technologies, current trends, and where/why they come into play
  • Set up a real front end environment. Choose and configure a code editor, install Node, Git and other tools
  • Git, Github and terminal basics. We will use Git throughout the course to communicate and collaborate on projects
  • Basics of html5 and css3 including the dom, cascade and inheritance, box model, inline vs. block, layout strategies and more
  • Proper use of semantic markup and metadata for search engines, accessibility and machine scraping
  • CSS resets for normalizing browser compatibility
  • Creating a simple blog style web page with the above strategies applied, basic styling but no layout yet
  • Creating a more detailed and interesting responsive home page with some layout challenges
  • Adding an interior pages that share a main template but with some layout and other changes
  • Working with flexbox and media queries to create responsive, fluid layouts that adapt to all screen sizes
  • CSS animation basics
  • Using Chrome Developer Tools to debug code in the browser and online tools to test and identify issues
  • Basic FTP deployment
  • Recommended: Bootstrap and Sass
  • Optional: Any areas of interest that you might have like translating a design from a mockup, etc.

Part 2: Javascript and Tooling

Lecture Time: Approximately 10-15 two hour sessions | Homework Time: 3-6 hours /week | Prerequisites: Part 1 or demonstrate ability

For the better or worse, Javascript is now the world's most popular programing language. It is used for everything from user interface interactivity in the browser to the entirety of an application's logic. This course has two goals. First to give you a good grasp on the fundamentals of the language and programming habits. Second to give you some practice implementing the typical needs of client side web apps. Our main focus will be on vanilla ES6 because this is the most important knowledge to have, but if your time and budget allows we will also cover React/Redux. We will also be covering the modern frontend development environment including NPM, Babel, Eslint and Webpack.

Part one (or demonstrated knowledge) is a prerequisite for this track.

Part II goals - click to expand

  • Start with a talk about how it works, the common frameworks and libraries, how to best ask questions, find documentation, etc.
  • Javascript ES6+ syntax: operators, primitives, arrays, objects, loops, functions, classes, etc.
  • Javascript scope
  • Common Javascript patterns including object literal, classical & prototypal inheritance, composition, closures, MVC and functional programming
  • Higher order functions like filter, map and reduce
  • Dom selection/manipulation
  • Event handling and common UI interactions
  • Forms and form validation
  • Using browser dev tools to debug, set breakpoints, view network requests, etc.
  • Using a module loader (Webpack) and the ES6 module pattern
  • Using Webpack to compile ES6+, SASS, lint using ESLint, live reload, and to automate asset management to acheive better front end performance
  • Working with REST, JSON and AJAX, understanding the HTTP lifecycle
  • Asynchronous Javascript: callbacks vs. Promise vs. Async/Await
  • Working with 3rd party APIs and generating a mock database/api with Json Web Server for prototyping
  • Various small Javascript projects in vanilla Javascript
  • Recommended: Intro to unit testing with Mocha and Chai or Jest
  • Recommended: Working with a JS framework (React)
  • Recommended: Redux for managing state
  • Recommended: More advanced React patterns and/or addons like React Router, Redux Form, UI toolkits, etc.
  • Optional: Introduction to jQuery. jQuery is less important nowadays, but since it's still common it can be a good idea to at least learn the basics
  • Optional: Any areas of interest

Part 3 (optional): Full Stack

Lecture Time: Approximately 8-15 two hour sessions | Homework Time: 3-6++ hours /week | Prerequisites: Parts 1 and 2, or demonstrated knowledge

When Node started becoming popular around 2011, the writing was on the wall that the lines between front and back end would begin to fade. If you know already Javascript, you've already taken a big step towards full stack. There are a lot of new concepts like databases and servers to learn, and of course there are other popular programming languages like Ruby, Java, Python, Go and many others. That said, since Node.js is basically Javascript, you already have taken the large step. These days having full stack ability in Javascript is quite valuable and will set you apart. Our focus will be on Node, Express, Mysql (or Postgres), Linux and basic devops. How far we go in this section is up to you. You don't have to tackle everything on the backend at once and the following is mainly a recommendation for a good starting point.

Both parts one and two (or demonstrated knowledge) are prerequisites for moving into the Full Stack.

Part III goals - click to expand

  • Start with a talk about the various technologies, programming languages and infrastructures involved in the back end, along with some of the pros and cons
  • Set up an Amazon EC2 or Digital Ocean instance and Introduction to Linux OS
  • Bash commands, simple Bash scripting, SSH, Curl and Apt, the Linux package manager
  • Learn about security and how to harden the server against common threats
  • Introduction and configuring the Nginx webserver and MySql (or Postgres)
  • Node.js and Javascript on the server
  • Express.js to handle both traditional server rendered routing and expose a REST API
  • SQL basics
  • Integrate a database with node templates (EJS or Jade/Pug) and with a REST API
  • Add signup, login and authentication using a stateless JWT (json web token) and/or traditional cookie based with Passport.js
  • Learn CRUD basics (create, read, update, delete) by making a simple Content Management System using Javascript, Node/Express and Mysql
  • Deployment with Git. Discussion and/or implementation of newer and more enterprise strategies like containers, microservices and cloud services like AWS Lambda or Firebase
  • Setting up production Node, SSL, Nginx reverse proxy and PM2
  • Optional: Add pagination, user filters and sorting widgets to lists of content from the CMS
  • Optional: Create a full stack social network app with user posts, comments and likes. React on the front end (or plain Javascript if you don't know it), REST API and database on the backend
  • Optional: Add a search with typeahead (show suggestions as you type) to the Social Network app
  • Optional: Working with Sequelize, a database ORM for Node
  • Optional: Alternative authentication methods like JWT, Oauth and OpenId (ex: register with Google, etc.)
  • Optional: Make a real time app with Websockets
  • Optional: Universal/Isomorphic React (React on the server for better SEO/performance)
  • Optional: Any areas of interest

If you have any questions about the program, don't hesitate to ask. I'm always happy to set up a call to answer your questions, explain the program and even talk about your other options in an unbiased way.

Frequently Asked Questions

Pricing

Each lecture is $60 /hr. with a two hour minimum per session. Usually we'll meet twice a week for two hours, but once per week is fine if you are in less of a hurry or have a busy schedule.

Time Required

The amount of time we'll need to complete these goals is an approximation and can vary pretty substantially from person to person. The actual time will depend on your existing background, the pace you're comfortable with, unique interests and the amount of time you're able to invest in doing homework. Keep in mind that while some of the options listed above might be nice, they aren't required and you could always choose to explore them on your own (possibly with a certain amount of help) if you need to keep the costs down. Also practicing a lot will make a big difference.

Location

Training is held online via web conferencing software. If you're thinking, "I'm traditional" and feel concerned about working remotely, I suggest at least giving it a try. With the screen sharing and code pairing software we'll use, I believe you'll quickly feel at home with it and in many ways find it more effective. If you'd really rather meet in person, I can sometimes make exceptions although the cost will include a travel fee and you'll need to have a home or office in the Berkeley/Oakland area.

Homework

As mentioned already, web development is a complex field and requires a lot of time to master. Realistically there is way more critical material to learn than we can possibly cover in the short time we have for our meetings. So in addition to the lectures, there will be substantial homework. Some of it will directly relate to what we are doing and some will be supplementary reading or online training material that I have compiled. Trust me that it would be impossible to learn this trade simply by listening to someone else coach you. There is no shortcut around hard work and discipline!

Code bootcamps like this have a three pronged approach. First are the lectures themselves, second is the benefit of having a mentor to curate and guide you along, and last but not least is to get you coding and building a lot of stuff. This is the same proven formula that the much costlier bootcamps like Hackreactor use. So roll up your sleeves and get ready!

Office Time is Included

Forget about road blocks. If you're having an issue between lessons, you are encouraged to shoot me an email or set up a brief online session if needed. Up to 30 minutes of office time per week is available for as long as we are working together.

Cancellation policy

Important events and emergencies come up for everyone, but please provide as much notice as possible if you need to make a change.  As a private teacher rescheduling/canceling, especially at the last minute, make it difficult to maintain a full schedule. So it's very important that you make a firm commitment when scheduling. If you must cancel/reschedule within 5 days of our appointment, you may be billed a 50% late change fee. Any and all non-emergency changes made with 24 hours of our appointment are subject to full charge.

If you tend to have a lot of schedule changes to the point that you think you'll have a difficult time keeping regular appointments, I would prefer that we hold off until you are able to maintain a predictable schedule.

I appreciate your understanding.

Live
Chat

LIVE CHAT I'm offline

I'm not available right now, but feel free to leave your name, email and message and I'll get back to you shortly.