Front-End development bootcamp

Front End Development Intro

Before we dig into the technical topics, we are going to talk about the Web Development industry as a whole. What is expected of us as FEDs, what are the different types of projects, teams, companies and technologies we are going to work with.

Also, we’ll talk about the history of the web, key people we should know about, how the internet and browsers work and the responsibilities of HTML, CSS and JavaScript.

Development Environment

In this section we’ll talk about the essential tools we need to get started, why do we need each one of them and how to use them.

We’ll focus on the Terminal and the importance of an IDE (Integrated Development Environment) and possible alternatives.

Then we’ll setup WebStorm as our chosen tool.

Version Control with Git & GitHub

Anyone who worked on a collaborative project that consists of files knows how messy it is to track different versions, merge changes into the same file and see who wrote what.

Git is a VCS (Version Control System) that helps us manage source code changes in our projects and work separately on the same files. We’ll learn the basic principles and commands that will use every day in our job.

GitHub is a web-based Git repository hosting service. It’s kind of a social network for code.

We’ll open a GitHub profile, set up our first repository and learn what GitHub has to offer.

HTML In-Depth

HTML (HyperText Markup Language) is the language of the Web. It’s what we give the browser to build web pages. It’s the first building block that every Front End developer must learn.

We’ll talk about the different document types, the syntax of the language, HTML Elements and Attributes, web Semantics, the W3C standard, a minimal valid HTML document and common best practices and pitfalls.

We’ll also learn how to take a web-page design file and build it with proper HTML.

HTML5 Semantics

As the web progressed, the need for Semantics grew and part of HTML5 was brought to life to address it.

We’ll learn about new elements that were added to outline a semantic structure to our document and give better meaning to text and interactive elements.

CSS Fundamentals

CSS (Cascading Style Sheets) allows us to style the elements of our document. Whether it’s giving color to text, background to sections, defining typography, adding borders, spacing around elements and much more.

We’ll learn about the syntax of the language, basic and complex Selectors, Colors and Backgrounds, the rules of Cascade and Inheritance, Typography methodologies and how the Box Model works.

CSS In-Depth

This is where we dig deep into the core of CSS and what we’ll use it for most of the time.

How to build complex layouts for web pages and web apps, how to position elements in non trivial relations to one another, how to control layers of stacked elements and solutions to common UI requirements like styling Menus, Buttons, Forms, Tables, Tooltips, Popups and many more.

CSS3 New Features

CSS3 added many cool features to our styling arsenal and pushed forward a more frequent and modular advancement to the CSS language.

We’ll learn how to work with shadows, gradients, transformations, transitions, animations and custom fonts.

We’ll also dig deep into Flexbox, the new and improved way to handle all of our layout needs.

Responsive Web Design

The explosion of the Mobile Web has forced us into supporting an endless amount of devices and screen sizes. This led to a complete rethink of our web page layout techniques and gave birth to Responsive Web Design.

The idea is the web page should adapt itself based on the screen size and device capabilities. This is done using Media Queries, which allow us to hook up conditional styling and behavior based on device features (most commonly screen resolution).

We’ll dive into the different methodologies (Mobile First vs. Desktop First), the common responsive patterns and the tools we have at our disposal to achieve responsiveness.

Web Accessibility

In Israel, every commercial user-facing website must be accessible to people with disabilities, by law. This means the website must be usable with screen readers and other assistive technologies.

This has a direct impact on how we develop our web pages. Whether it’s form inputs, a table, images, navigation or custom buttons and interactive elements, we must make sure they are accessible.

We’ll learn about the different standards and regulations, what types of assistive technologies we need to support and the tools we can use for testing.

CSS Preprocessors - Sass

Sass is a CSS superset language, meaning it compiles down to plain CSS.

It adds a lot of features that are not present in CSS like variables, functions, loops, conditionals, placeholders and many more.

We’ll learn what are the most common usages in Sass and best practices we should follow.

JavaScript Fundamentals

JavaScript is one of the most popular programming languages in the world, and soon to be The most widely used. It runs on almost anything, whether it’s desktop, mobile, inside browsers or native applications, on the client or the server or even on hardware devices like Arduino and Raspberry Pi.

It’s fairly easy to learn, but also easy to get out of hand quickly.
That’s why we’ll learn JavaScript bit by bit from the ground up and get proficient at it way before any library or framework.

JavaScript In-Depth

This is where we dig deep into the language, how stuff work behind the scenes, common good and bad practices, nasty edge cases and how to deal with them.

We’ll learn the basics of Object Oriented Programming and how almost everything in JavaScript is an Object. We’ll wrap our head around Constructor Function, Prototype Chain and Inheritance, the “this” keyword and Function “call”, “apply” and “bind”.

We’ll also learn how asynchronous code works in JavaScript and how to handle it.

JavaScript Design Patterns

Once our code gets large, we need a way to keep it readable, maintainable, reusable, scalable, etc. There are many patterns that came up with the years, and each has it’s strengths and weaknesses.

We’ll learn the most common patterns that apply specifically to JavaScript and when we would use one pattern over another.

We’ll also talk about Modules, why we need them and the different types available.

Web Storage

One of the features browser give us is persistent storage, which is kind of a small database that lives in the context of the browser.

We’ll learn what types of storage solutions the browser provides us, when we’d use one over the other and what kind of data we’d usually store there.

Building Web Applications

Although building Websites is a big part of our job, most of the time we are asked to build Web Apps. A Web App (also called Single Page Application) has unique needs that are not usually present for Websites and most of the time contains a lot of logic, server communication and DOM manipulations.

We’ll learn how to build view templates and reuse them, how to update views for different URL’s, how to organize our code to be scalable and maintainable and how to handle application data changes and reflect them in our view.

Cross Browser Support

With so many browsers and devices, we are bound to have differences in what features and technologies are supported, this means our code must take into account the possibility of something not being supported and handle it properly.

We’ll learn about the current landscape of desktop and mobile browsers, how to check if a feature is supported and in what version. We’ll also talk about the different JavaScript Engines and how it may affect our code.

Tools and Automation

In the past years, Front End Development got so complex that it now requires a large set of tools to bring project into the world.
Whether it’s managing project dependencies and their versions, compiling superset languages into plain HTML/CSS/JS, checking syntax correctness, handling JS modules or preparing the project build to be deployed to production.

Intro to Server Side Development - Node.js

Node.js is a server-side JavaScript environment that is used for a wide range of solutions, like building RESTful API’s, Real-Time Applications/Streaming, Desktop Apps, Games, Command Line tools and now even IoT programming through hardware like Arduino and Raspberry Pi.

We’ll focus on what we need to know as Front End Developers to be able to understand and communicate effectively with server-side developers, not only those using Node.js.

Web Performance

Even if you have a beautiful website or app that has great content and features, can adjust its layout for mobile screens, accessible and shiny, it can still be useless if it’s slow.

Good performance means your app loads fast and responds fast to user interaction, even if the user is on a slow network and using old hardware, the user experience needs to be snappy.

This is so important that businesses actually lose customers for every second their site takes longer to load, and users these days become less and less patient.

JavaScript ES6 - ES2015

ES2015 is the official name of the latest version of the JavaScript specification that now gets widespread adoption from browser vendors and developers across all types of companies.
There are many new features that were added to the language that make it not only more readable and pleasant to work with, but also fixed many edge cases that were problematic in the past.

React Fundamentals

React is an open source JavaScript library for building user interfaces, created by Facebook. Along with its rich ecosystem of complementary libraries and vibrant community, React is the hottest technology on the market for building Web Apps. Many dev teams switched in the past 2 years to React from Angular and alike, and the trend seems to be growing.

We’ll learn about the building blocks of React, the new development approach it advocates, how to think in Components, what is the Virtual DOM, the JSX syntax, how to handle Routing and much more.

Test Driven Development

As our code grows, the need for refactoring is inevitable, and once we start updating our code, we will most likely break things that worked perfectly fine before.
Testing allows us to make sure that pieces of our code behave the way we expect them, and when we do break something, our tests fail and we get a chance to fix our code at that moment instead of being surprised later on.

Test Driven Development (TDD) is development process in which we first write the tests for what we plan to build and then we write the code to pass those tests.

We’ll learn the different testing tools and best practices of testing in general.

 React In-Depth

React is usually coupled with an application architecture called Flux, which complements React's composable view components by utilizing a unidirectional data flow. Which means, any changes to the application data, whether from user input or external updates, is handled in a central hub using events and the updated application state is propagated back to the UI components based on their hierarchy.
This makes the application much easier to reason about, develop, debug and test, and opened up a wide range of implementations through libraries to make our lives easier.

JavaScript Utility Libraries

JavaScript is an awesome language, but sometimes we can find ourselves writing the same code in every project to achieve basic tasks. This is where utility libraries come in handy.

Based on real world experience, we’ll learn how to use the most common utilities to help us with our day to day job.

jQuery - DOM Traversal and Manipulation, Events, AJAX helpers, Animations
Lodash - Common helpers for Strings/Arrays/Objects/Functions, etc.

Job Preparation

So you know how to build awesome websites and web apps, what now?
Well, you need to get ready for the real world, and that means landing a job.
There are a lot of stories of smart people who couldn’t find a job just because their CV looked bad, they had no online professional presence or they were bad at personal interviews.

This is where we help you to get into your best shape, online and offline and prepare you for making a great impression in your coming interviews.