Challenge yourself!

This module is free and designed for everybody who is willing to join the adventure of our front-end program!

You will start with with a short course introduction lecture.

Then you will be given a GIT basics lecture. Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Also we've prepared some practical tasks for you to accomplish and we expect you to submit them in time.

And of course we will teach you how to set up your working environment and use it effectively.

By the end of this module:

1. You will have a good grasp of front-end development role.
2. You will set up all professional tools you need to master front-end development.
3. You will accomplish a practical challenge.

And if you succeed, you will be invited  to continue the course!

Please note, only selected candidates will be admitted!

Continue to learn and grow as a developer!

We've prepared for you:

• 45 lectures (1.5 hour each);
• 6 experiential workshops (6 hours each);
• 17 practical tasks;
• 4 personal interviews with your trainer!!!

This course is also unique in the way that it is structured and presented. Many online courses are just a long series of "watch as I code" videos.  This course is different. You will have a personal touch of our trainers to make this course not only more effective but more engaging. The course includes:

• Lectures
• Code-Alongs
• Projects
• Exercises
• Research Assignments
• Slides
• Downloads
• Readings

Demonstrate your skills and knowledge!

Front end Interview Topics

To develop the skills needed to ace a Front end interview, you need to familiarize yourself with the sort of topics that a question might involve. Below are a list of topics that are commonly explored during Frontend interviews:

General Web Knowledge

You should have a solid understanding of the technologies and paradigms of the web such as:

• HTTP requests: GET and POST and their headers like Cache-Control, ETag, and Transfer-Encoding
• REST vs RPC
• Security: When to use CORS, JSONP, and iFrame policies

Web Performance

You should expect your interviewers to examine your code or design and its performance implications. The web is rapidly changing and you’ll be expected to understand the complexities of web performance, including:

• Critical rendering path
• Service workers
• Image optimization
• Lazy loading images and video
• HTTP/2
• Preload, preconnect, and prefetch
• Minimize browser reflows
• Rendering performance

DOM

Many candidates struggle to traverse and manipulate the DOM, particularly if they’ve been using jQuery or writing React and Angular apps. You should know how to do the following without using a library:

• Select or find nodes using document.querySelector
• Traverse the DOM
• Manipulation: Add, remove, copy, and create nodes in the DOM tree
• Performance: Document fragments and node caching

JavaScript

You’ll need to know JavaScript inside and out! Many JavaScript questions revolve around these concepts:

• Binding: Call, Apply, and Bind & Lexical This
• Execution Context: Scoping & Closures
• Prototypal inheritance
• Event Delegation and Bubbling
• Type Coercion, and using typeof, instanceof, and Object.prototype.toString
• The Event Loop
• Handling asynchronous calls with callbacks, promises, await, and async
• Variable and function hoisting
• Currying
• Object prototypes, constructors and mixins
• Composition and high order functions
• When to use function declarations and expressions

When given a JavaScript question, do your best to figure out which of these concepts you’re being tested on in order to figure out the correct solution. You should also brush up on JavaScript design patterns, which will provide you with repeatable solutions to common problems. Here are a few design patterns that are great to know:

• Decorator
• Factory
• Singleton
• Revealing module
• Facade
• Observer
• MVC, MVP, MVVM

In addition to design patterns, it’s also good to be familiar with JavaScript frameworks. You should know when and why frontend teams use different frameworks.

HTML

You’ll be expected to know which HTML tags best represent the content you’re displaying and its associated attributes. You should know:

• Semantic markup
• Tag attributes
• How to declare your doctype and what meta tags are available to use
• Accessibility concerns

CSS

You should understand how to lay out elements on a page and target elements using child or direct descendant selectors, in addition to understanding when to use classes vs IDs.

• Layout: Placing elements next to each other and in two vs three columns
• Responsive Design: Altering an element’s dimensions based on the browser width size
• Adaptive Design: Altering an element’s dimensions based on specific breakpoints
• Specificity: Calculating a selector’s specificity and how the cascade affects attributes
• Namespacing

Data Structures & Algorithms (DS&A)

While knowledge of data structures and algorithms isn’t critical for frontend development, many frontend engineers are still tested using DS&A interviews.

To that end, it’s important to have a basic understanding of Big-O time complexity and common runtimes such as O(n) and O(n log n). Take the time to review these basic data structures and implement them in JavaScript:

• Linked Lists
• Hash tables
• Stacks and queues
• Trees (binary trees and heaps)
• Graphs (know how to implement depth-first and breadth-first search traversals)

System Design

While most frontend engineers don’t need in-depth knowledge into designing backend systems, you may be asked to design the frontend architecture of common applications. These questions are typically vague and open-ended, such as “Design Twitter” or “How would you build a shopping checkout service?” Below are some topics to consider:

• Rendering: client-side, server-side, and universal rendering
• Layout: when designing a system used by multiple development teams, you think about building components and whether you require teams to follow a markup to use those components.
• State Management such as unidirectional data flow or two-way data binding
• Async flow: the components you build may need to communicate with the server in real-time and the design you propose should consider XHR vs bidirectional calls. If you’re asked to support modern browsers, you could use websockets or server-sent events; if asked to support older browsers, you’ll need to choose between IFrames, JSONP, etc for your design.
• Separation of concerns
• Multi-device support: Will your design use separate implementations or the same implementation across web, mobile, and hybrid applications?
• Asset delivery: Your design should consider how assets are built with dependencies, tested, and deployed.

Course agenda