Front-End development תוכנית ערב

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.
• The web development industry
• Types of projects, teams, companies and technologies
• History of the Web
• How browsers work
• The HTTP Protocol

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.

• IDE vs. Text Editor, JetBrains WebStorm
• Terminal (Command Line)
• Node.js and npm
• Browsers - Chrome, Firefox, Safari

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.

• Why VCS?
• Git basics
• GitHub and a GitHub profile
• Markdown basics

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.

• HTML History, Syntax and the W3C standard
• HTML Elements and Attributes
• Working with Text, Links, Lists, Images, Forms, Tables, etc.
• Common best practices and pitfalls
• Design to Markup methodology and exercises
• How HTML affects SEO

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.

• Sectioning and Grouping Elements
• Semantic Structure & Layout
• How to choose which tag to use?
• Common HTML5 semantics mistakes

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 History, Syntax and the W3C standard
• Basic and Complex Selectors, Specificity
• Colors & Backgrounds
• Cascade & Inheritance
• Typography
• Box Model

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.

• Visual Formatting Model - Inline vs. Block, Positioning, Floats, Layers
• Layout techniques - Columns, Full-Page, Web App, etc.
• Common techniques and solutions
• CSS Methodologies - OOCSS, SMACSS, BEM, SUIT, etc.

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.

• Gradients, Multiple backgrounds
• box-shadow, text-shadow
• Transformations, Transitions and Animations
• Custom Fonts and Font Icons
• Flexbox
• CSS Browser Prefixes - CanIUse.com, Autoprefixer

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.

• Theory and motivation towards being responsive
• Media Queries
• Mobile First vs. Desktop First
• Responsive patterns, responsive text/images
• RWD Tools

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 Intro & History
• Basic Syntax, Data Types, Operators, Control Structures
• Working with Strings, Numbers, Arrays, Objects and Functions
• Working with Math, Dates and Time
• Working with iframe’s
• DOM API - Traversing the DOM, mutating elements, handling user events
• AJAX - History, server requests, HTTP headers and response codes, the Fetch API
• Regular Expressions

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.

• Object Oriented Programming (OOP)
• Constructor Function, Prototype Chain and Inheritance
• The “this” keyword and Function “call”, “apply” and “bind”
• Functional Programming Intro - Currying, Partial Application, Recursion
• Asynchronous code - The Event Loop, setTimeout/setInterval, Animations in JS
• JS - The weird parts
• Best Practices

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.

• Single Page Applications
• Templating Engines - Handlebars, Lodash Templates
• Routing - Handling views for different URL’s
• MVC and Scalable Architectures

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.

• Why TDD?
• Unit Tests vs. Integration Tests vs. E2E Tests
• Mocking - Internal code, external modules/libraries, HTTP requests
• Tools - Mocha, Chai, Jasmine, Karma, Sinon, Nock, etc.
• UI Testing intro - Selenium, Protractor, Visual Comparing tools, etc.

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.

• Desktop and Mobile browsers differences
• Main JavaScript engines
• Feature Detection - Modernizr
• Polyfills
• Progressive Enhancement and Graceful Degradation

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.

• Npm registry - Dependency management, semantic versioning
• Chrome DevTools - Console, Sources, Debugging, Network, etc.
• Transpilers - Babel, node-sass
• Module loaders - Webpack, SystemJS
• Preparing a project for production - Minification, Compression, Concatenation

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.

• var vs. let vs. const
• Arrow functions, Default function parameters, Rest parameters and Spread operator
• Destructuring assignment, Template literals
• New String/Array/Object features, Map/Set/WeakMap/WeakSet
• Modules (import/export), Classes, Promises

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.

• React vs. Angular 2
• Virtual DOM, JSX in Depth
• Component hierarchy, Passing props, propTypes and defaultProps
• Functional components (Stateless) vs. Class components
• Synthetic events, Component State, Component lifecycle
• Higher order components, Composable components
• Styling in React
• React DevTools
• React Router - Routes, navigation, nesting, params, hashHistory vs. browserHistory

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.

• Redux - Architecture, Store, Reducers, Middleware, react-redux, Immutable data

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.

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.

• Node.js History and Pros & Cons
• Simple Web Server
• Node’s CommonJS implementation using require()
• Popular packages
• File System Read/Write
• Node.js Async Nature
• Express Framework - App generator, Routes, Middleware, Views, RESTful API

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.

• Building an effective Resume and Linked.in profile
• Working at Enterprise companies vs. Startups
• Common soft skills requirements and Interview Simulation