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 the fundamentals and the art of front end engineering 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, professional training would probably be overkill. You would be better off hiring it out or going with a cloud service. But 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 might be for you.

What I am offering beginners or intermediates is a group of rigorous courses divided into 3 parts. The first two are for Front End while the third is optional if you are interested in the 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-12 two hour sessions | Homework Time: 4-6 hours /week | Prerequisite: none, anyone is welcome!

Part one begins with a survey into the various technologies that make up the stack and begins with HTML and CSS. These days the hipsters and pundits aren't talking about HTML/CSS as much as they used to, partly because they're not as fresh and exciting and partly because it is sometimes incorrectly assumed that frameworks like Bootstrap are enough. 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! Limited HTML/CSS ability will also hinder your Javascript, since they all work together hand in hand. 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 front end (and some backend)technologies, current trends, and where/why they come into play
  • Set up a good front end environment. Choose and configure a code editor, install Node.js, 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 css including the dom, cascade and inheritance, box model, inline & block, layout strategies and more
  • Proper use of semantic markup and metadata for search engines 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 page that shares a template but has layout and other changes
  • Working with media queries and 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 Front End Tools

Lecture Time: Approximately 10-15 two hour sessions | Homework Time: 4-6 hours /week | Prerequisites: Part 1 or skills test

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 in the browser to the majority of application logic. This course has two goals. First to give you a good grasp on the fundamentals of the language. 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 modern tooling including NPM, Babel, Webpack, and SASS.

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 syntax: operators, primitives, arrays, objects, loops, functions, classes, ES6+
  • Javascript scope (including what's new in ES6+)
  • Common Javascript patterns including object literal, classical and prototypal inheritance, 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, 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 for better front end performance
  • Working with REST, JSON and AJAX, understanding the HTTP(S) lifecycle
  • Asynchronous Javascript and callbacks vs. Promise vs. Async/Await patterns
  • Working with 3rd party APIs and generating a mock database/api for prototyping or testing with Json Web Server
  • Various small Javascript projects in vanilla Javascript and optionally React
  • Recommended: Introduction to vanilla React using built in state management
  • Recommended: Adding Redux for state and event management
  • Recommended: Higher order components
  • Recommended: Using community React components like React Router, Redux Form, UI components, etc.
  • Recommended: Redux dev tools for state based debugging (aka "Time Travel", with Flux Capacitor!)
  • Optional: Introduction to jQuery. jQuery is less important nowadays, but since it's still common it's good idea to at least learn the basics
  • Optional: Intro to unit testing with Mocha and Chai
  • Optional: Areas of interest

Part 3 (optional): Full Stack

Lecture Time: Approximately 8-15 two hour sessions | Homework Time: 5-15+ hours /week | Prerequisites: Parts 1 and 2, or skills test

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, but since Node.js is basically Javascript, you already have the biggest piece of the puzzle. Of course the backend is a big area and there are other popular programming languages like Ruby, Java, Python, Go (and countless others), having full stack skills in Javascript is quite valuable and will set you apart. Our focus will be on Node, Express, Mysql and Linux. The reason for Mysql and not a NoSql DB like Mongo, is because once you learn SQL and relational databases, you will have an easier time picking up NoSql than the other way around. Sooner or later it's probably not a bad idea to know both, but the current trend has been more towards RDBMS like Mysql and Postgres (both of which now actually have NoSql data types).

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, Bash scripting, SSH, Curl and Apt, the Linux package manager
  • Introduction to the Nginx web server and simple load balancing
  • Learn about security and how to harden the server against common threats
  • Setting up and using Mysql, learning database and SQL basics
  • Node.js and Javascript on the server
  • Express.js to handle both traditional routing and expose a REST API
  • Use Mysql and EJS templates to create dynamic server rendered content
  • Add registration and login using classic cookie based authentication and Passport.js
  • Explore and implement some of the modern authentication methods including JWT, Oauth and OpenId (ex: register with Google, etc.)
  • Learn CRUD basics (create, read, update, delete) by making a simple Content Management System using Javascript, Node/Express and Mysql
  • Reuse the signup/authentication modules you created in the previous excercise
  • Optional: Add pagination and sorting widgets to lists of content in the CMS
  • Create a Social Network with user posts, comments and likes using React (or plain Javascript if you don't know it), REST, Node/Express and Mysql
  • Optional: Add a search with typeahead (search suggestions as you type) to the Social Network app
  • Setting up production Node, Nginx reverse proxy and PM2
  • Deployment with Git and optionally Flightplan.js. Discussion of newer and more enterprise strategies like Containers, Microservices and cloud services like AWS Lambda or Firebase
  • Optional: Make a real time chat app with Websockets and Socket.io
  • Optional: Working with a database ORM like Sequelize
  • Optional: Universal/Isomorphic React (React on the server)
  • Optional: Any areas of interest

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 have a busy schedule.

Time Required

The amount of time we'll need to complete our goals is an approximation and can vary pretty substantially from person to person. The actual time will depend on your existing background, pace you're comfortable with, unique interests and the amount of time you're able to invest in learning. Also while the options 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. Studying a lot also helps.

Location

Training is held online via web conferencing software. If you're thinking, "I'm traditional" and feel concerned about working remotely, I highly suggest giving it a try. With the screen and code sharing software we'll use, I believe you'll quickly feel at home with it and in some ways find it even more effective. If you'd really rather meet in person, I can 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. Take my word for it that you would be better off investing in something else if you aren't ready to work hard and be disciplined!

Office Time is Included

Forget about road blocks. If you're having an issue between lessons, you are encouraged to shoot me an email. Up to approximately 20 minutes of office time per week is included 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 any time, 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 something important comes up and 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 your other commitments are so much 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 back to you shortly.

You can also reach me at
(707) 280-3629.