Course start: Anytime

Course start: Anytime

Course-profession

Frontend developer

Frontend development

Start your IT career in just 4 months of intensive training with N-iX Senior Frontend Developer Wanda Hawkins.

Learn front-end development in practice with a lecturer who has over 11 years of teaching experience and has been involved in developing applications for Honda, Toyota, J&J, and Ryanair.

Registration is now closed. If you would like to join the next edition of the course, please leave your details and we will contact you when registration opens.

Registration for the course is now open:“

Before the course starts, there are:

Before the end of early bird prices, there are:

  • 00days
  • 00hours
  • 00minutes
  • 00seconds
Guess the start
Register
Find out the price

3 main technologies

HTML, CSS, JavaScript

Vlasny website

from layout to uploading to hosting

Beginner level

from zero to Trainee Frontend Developer

Register
Close
Register

What you will learn?

During the course, you will gain the practical skills necessary for your first job as a Trainee Frontend Developer

○ develop a deep understanding of the three main technologies for frontend developers: HTML, CSS, and JavaScript;

○ understand how the browser analyzes and displays the code written by the developer;

○ Dive deep into the nuances of animation, responsive layout for any device, and various effects;

○ Learn how to use JavaScript for dynamic and interactive web pages;

○ learn how to establish communication between the frontend and backend parts of the project;

○ learn the Git version control system for easy team development;

○ get acquainted with the most popular JavaScript library React.js;

○ go through the process of creating a full-fledged website - from layout to uploading to hosting.

Course format

• 40+ hours of video lectures
• 50+ practical tasks
• Webinars
• Chat support in Slack
• Course project (optional)
• Presentations for video lectures
• Test tasks
• Materials for self-study
• Long-term access to the course
• Personalized certificate

Course program

Who are frontend developers?

These are programmers who are responsible for the appearance of websites, web services, and mobile applications: template layout, text design, client logic of the software product and user interaction with the interface. Without them, it is impossible to create a convenient and effective digital product. Join the course to master a demanded profession and start your career in IT.

Benefits of the course

The best start for a career in IT

Prepare yourself for a successful start in your career as a Trainee Frontend Developer in just 14 weeks.

Your own case for the portfolio

Create your own course project that you can show at the interview, which will increase your chances of getting a job.

Soft skills

Develop the skills needed by a frontend developer: critical thinking, flexibility, adaptability to conditions and requirements, organization, prioritization of tasks and time planning, teamwork.

Clear for everyone

Learn at any age, even without special IT skills. After all, the material is presented in a simple and accessible form.

Constant support from the course author

Throughout the training, ask questions, get advice, and learn from the experience of Senior Frontend Developer - Wanda Hawkins is in touch.

The best price/quality ratio

We closely monitor the quality of our products and always try to give the most favorable price offer on the market in terms of price/quality ratio!

Who this course is for?

For beginners

those who are just starting out in the IT field

For students and graduates

those who have a technical specialty and want to gain basic knowledge and skills to start a career in IT

For IT professionals

who want to improve their skills and master new tools and technologies in frontend development

For the lightworkers

who want to make changes in favor of more profitable and promising work

After completing the course, you will be able to:​

build websites and applications for any device

create websites that will be displayed correctly in all browsers

animate elements of web pages

use JavaScript for dynamism and interactivity

write asynchronous code in JavaScript

make requests to the server, receive and process a response from it

work with package managers and use them to connect third-party modules

work with Git

How we prepare for employment?

Our goal is that after 14 weeks you will know exactly how to create an optimized website using HTML, CSS, JavaScript, get your first experience with the React.js library, and be able to apply for the position of Trainee Frontend Developer.

To do this, we:

• developed a maximum of practical tasks;

• added a course project that you can use to supplement your resume;

• planned sprints to solve practical tasks that are given in real interviews;

• supplemented the Premium package with a webinar on "Effective job search for frontend developers";

• have prepared gift courses that will be useful - "How to find your first job in IT" and "English for beginners in IT".

Learn from the best

Wanda Hawkins

• Frontend Tech Lead

• Has 11+ years of experience in frontend development

• Created web products and hybrid mobile applications for companies

• Worked with clients from Europe and the USA

More than 11,000 students have successfully completed the Wanda Hawkins course "Fundamentals of Web UI design." on the platform

Course program

1. Introductory block

  • About the course
  • Is this course enough to fully master FrontEnd?
  • Will I get a job? How to get the most out of this course.
  • What is web development, Frontend, and Backend?
  • Static and dynamic websites.
  • History of the World Wide Web and the current situation
  • The process of developing a web application
  • Frontend developer responsibilities and tasks

2. How the WWW and browsers work (an overview)

  • What is WWW?
  • Browsers, what are the differences between them, and how is a browser structured?
  • What happens when a user enters an address in the browser's address bar and presses "enter"?

3. Development Environment

  • Overview of code editors
  • Online code editors
  • Offline code editors
  • HTML/CSS validators

4. HTML

  • HTML: general concepts, terms, basic document structure
  • HTML: how to correctly comment on code
  • HTML: working with text
  • HTML: lists
  • HTML: hyperlinks
  • HTML: images
  • HTML: tables
  • HTML: forms
  • HTML: block and inline elements
  • HTML: multimedia
  • HTML: general overview of semantics

5. CSS – Introduction

  • CSS: Introduction
  • CSS is huge, but don't panic!
  • CSS: general concepts, syntax
  • CSS: integration
  • CSS: simple selectors
  • Grouping selectors
  • Simple and complex selectors
  • Pseudo-selectors
  • How to calculate selector specificity
  • Shortened CSS syntax
  • Relative units

6. Frequently used CSS properties

  • Frequently used properties: Color (rgb, hsl, keyword, HEX)
  • Frequently used properties: Background
  • Frequently used properties: Text
  • Frequently used properties: Font-family
  • How to integrate external fonts
  • Box-model
  • Frequently used properties: float
  • Frequently used properties: display
  • Frequently used properties: position
  • Vendor prefixes
  • Inheritance
  • Special characters
  • Practice

7. CSS Effects

  • Text-shadow
  • Box-shadow
  • Filters
  • Transition
  • Transform
  • Animation
  • Practice

8. CSS — Flexbox and Grid

  • What are Flexbox and Grid?
  • Flexbox: Introduction
  • Flexbox: container
  • Flexbox: items
  • Grid
  • What's the fundamental difference, and how to make them interact?
  • Practice

9. CSS — Flexible Layout

  • Adaptive and responsive layout
  • Media Queries: Introduction
  • Media Queries
  • Practice

10. CSS — Bootstrap

  • Why Bootstrap is needed
  • Bootstrap overview
  • Connecting Bootstrap
  • Bootstrap components
  • Layout and Grid system
  • Responsive Grid
  • Do I really need Bootstrap?

11. CSS — Preprocessors

  • What are preprocessors?
  • Benefits of using preprocessors?
  • Package managers — overview, installing npm
  • Practical lesson: installing and configuring SCSS

12. HTML5 — Advanced Features

  • The structure of an HTML page
  • The <head> element: Introduction
  • The <head> element => <base>
  • The <head> element => <meta>
  • What does HTML5 mean? Why is !DOCTYPE needed?
  • Semantics in HTML5
  • Practice

13. JavaScript — Basics

  • What is JavaScript? Areas of application
  • A brief history of JavaScript
  • Connecting JavaScript
  • Important nuances of working with JavaScript
  • Variables in JavaScript
  • Data types (primitives)
  • Objects
  • Arrays
  • Array methods and properties
  • Arithmetic and assignment
  • User interaction
  • Conditions
  • SWITCH statement
  • Loops

14. JavaScript — Basics II

  • Functions in JavaScript
  • Scope in JavaScript
  • DOM: Document Object Model
  • DOM methods
  • Overview of events in JavaScript

15. Effective Development Process

  • Effective development process: Introduction
  • Effective development process: Setting up the development environment
  • Effective development process: How to find information
  • Effective development process: Dealing with errors

16. How the Web Works

  • How does the Internet work?
  • How does the web work?

17. Rendering

  • Rendering: the process of displaying a web page
  • What blocks rendering?

18. JS — Under the Hood

  • Advanced definition of JS
  • How is JS executed?
  • Dynamic and loosely-typed programming language
  • The JS runtime environment matters!
  • Summary
  • JS evolution
  • "Use strict" directive
  • How JS is parsed
  • What happens inside the JS engine
  • JavaScript vs Browser API
  • Garbage collection and memory management

19. JS — Data Types and Operations

  • Data types. Primitives
  • Data types. Number
  • Data types. String
  • Data types. String. The length property
  • Data types. String. Simple methods
  • Data types. String. Methods with arguments
  • Data types. Null, undefined
  • Data types. Boolean. Truthy and falsy values
  • Data types. Symbol
  • Data types. BigInt
  • Primitive vs Reference value
  • Arithmetic and assignment. Math object

20. JS — Array

  • What is an Array?
  • Iterator methods. Introduction
  • Callback
  • Iterator methods: forEach()
  • Iterator methods: map()
  • Iterator methods: filter(), find(), findIndex()
  • Iterator methods: reduce()
  • Chaining
  • Other array methods
  • Nested arrays

21. JS — Object

  • What is an Object?
  • More about objects
  • Valid object field names
  • Property chaining
  • Checking if an object property exists
  • Spread operator (…)
  • Object.assign()
  • Destructuring

22. JS — Functions

  • What is a Function?
  • Function parameters
  • Function as an object method
  • Function is an object!

23. JS — Function/Method Call Context

  • Function call context (this)
  • bind() method
  • call() and apply() methods
  • What the browser does with this
  • Arrow function and this
  • Getters, setters

24. JS — Error Handling

  • Why error handling exists
  • try/catch construct
  • Custom errors
  • try/catch/finally

25. JS — DOM

  • What is DOM
  • Document vs Window
  • How DOM is created
  • Nodes vs Elements
  • Attribute vs Property

26. JS — Searching DOM Elements

  • Overview of query methods

27. JS — Traversing the DOM

  • DOM Traversal: Introduction to terms
  • Traversing child elements
  • Traversing parent elements
  • Traversing sibling elements
  • DOM Traversal: Summary

28. JS — Working with the DOM

  • Creating DOM elements: Overview
  • .innerHTML
  • .insertAdjacentHTML()
  • .createElement()
  • .createDocumentFragment()
  • Element insertion methods
  • Cloning elements
  • Deleting elements
  • Working with the DOM: Summary

29. JS — Styling DOM Elements

  • .style
  • .className
  • .classList

30. JS — DOM Cinema

  • Cinema: Fragments
  • Cinema: String template

31. JS — DOM Events

  • Introduction to events
  • Ways to "listen" to events
  • .addEventListener() and .removeEventListener()
  • The "Event" object
  • .preventDefault()
  • Phases: "bubbling" and "capturing"
  • .stopPropagation()
  • Event delegation
  • Events and the "this" keyword
  • Types of events
  • "Scroll" event

32. JS — OOP

  • Introduction to the module
  • Prototypal inheritance
  • Factory function
  • Constructor function
  • Classes in JavaScript
  • Field vs Property
  • Objects and classes
  • OOP principles
  • Encapsulation
  • Inheritance
  • Polymorphism
  • Static methods/fields/properties
  • The "instanceOf" keyword
  • Built-in classes
  • The Date object
  • Cinema
  • OOP: Summary

33. JS — Advanced Function Concepts

  • Advanced function concepts
  • Pure functions
  • Closures: Introduction
  • Lexical environment
  • Function that returns a function
  • Closures
  • Closures and memory
  • Recursion and the stack
  • Recursion and memory
  • Introduction to regular expressions

34. JS — Browser API

  • Introduction to the Browser Object Model (BOM)
  • BOM vs DOM
  • Browser API
  • User data that cannot be hidden
  • Browser local storage
  • Web Storage: LocalStorage vs SessionStorage
  • Web Storage: Cookies
  • Local server
  • Web Storage: Cookies (continued)
  • Web Storage: IndexedDB
  • Working with IndexedDB
  • Web Storage — Summary
  • Cinema

35. JS — Asynchrony

  • Introduction to the module
  • Synchrony and asynchrony
  • Timers: setTimeout, setInterval
  • Event loop
  • Execution order
  • setTimeout(0)

36. JS — Promises

  • What is a Promise object?
  • Promise chaining
  • Promise: error handling
  • Promise: .then().catch().finally()
  • Async/await
  • Async/await: error handling
  • Async/await vs Promises
  • Promise.race(), Promise.all(), Promise.allSettled()
  • Summary

37. JS — Server Communication: XmlHTTPRequest

  • Introduction to server communication
  • How Frontend <=> Backend communication works
  • HTTP: General overview
  • Initial setup. Mock server
  • Introduction to the XmlHTTPRequest object and GET request
  • JSON
  • JSON in detail
  • Promisification of HTTP requests
  • POST request
  • DELETE request
  • Response status codes
  • Error handling

38. JS — Server Communication: Fetch API

  • Introduction to Fetch API
  • POST request
  • HTTP Headers
  • Error handling
  • XmlHTTPRequest vs fetch
  • Cinema

39. JS — ES6 Modules

  • How to split code into modules
  • First steps with JS Modules
  • Mock server
  • export/import

40. Git

  • Version control system
  • Git: Introduction
  • Installing and working with Git
  • package.json

41. Deployment (web hosting)

  • Deployment (web hosting): Introduction
  • Deployment (web hosting): Deploying a project on a server

42. Code Style

  • Code style tips: Variable names and reserved words
  • Code style tips: Code optimization

43. Overview of Web Frameworks

  • Frameworks: The big picture
  • Overview of web frameworks

44. Overview of Mobile Frameworks

  • Types of mobile applications
  • Overview of mobile frameworks

45. NodeJS

  • Overview of NodeJS

46. Introduction to the React.js Library

  • What is React?
  • Why use React (React vs VanillaJS)?
  • What are components?
  • React CLI
  • Analysis of a project generated using React CLI
  • What is JSX?
  • How React works

47. React.js Basics

  • Introduction to the tutorial project
  • Analysis of the tutorial project
  • Your first custom component
  • Working with more complex components
  • More components
  • Working with expressions in JSX
  • "props"
  • Lists and keys

48. React State (useState Hook) + Events

  • How React does NOT work
  • The concept of "React state". The useState hook
  • Working with events
  • Lifting state up
  • More practice

49. Working with the Server + useEffect Hook

  • Preparing the project for server communication. First server request
  • How NOT to send a server request
  • Introduction to the useEffect hook
  • What can and cannot be used as useEffect dependencies
  • useEffect cleanup function
  • useEffect — Summary

50. React Routing

  • Single-page vs multi-page websites and applications
  • Installing and using React Router for navigation

51. Redux Basics

  • What is Redux?
  • How Redux works
  • Creating a Redux Store
  • Using data from the Redux Store in a React component
  • What is a Redux Action?
  • More about Redux Actions
  • Summary

52. More About React

  • Virtual DOM
  • React DevTools

53. What’s Next?

  • What’s next?

Bonuses for graduates

We will give two special courses to all course participants who receive a certificate of completion within a month after the start of the certification. Thank you for for choosing us!

  • general overview of IT recruiting
  • where to look for vacancies
  • how to prepare a resume that will help you stand out among competitors
  • how to design your LinkedIn profile so that employers can find you
  • how to present yourself at the interview
  • the most common vocabulary and grammar for working in IT
  • how to present yourself to an employer to get your first job in IT
  • how to speak correctly in daily meetings
  • how to correspond with customers
  • how to communicate with the team

Choose a training package

Early registration

Early bird prices with a -20% discount

Standard

  • 14 weeks
  • 300+ videos
  • 40+ hours of video
  • 5 webinars with the lecturer
  • chat support with the lecturer
  • term paper for the portfolio (optional)
  • additional materials
  • presentations, test tasks
  • long-term access to the course
  • personalized certificate
Buy - 100$
Premium

  • 14 weeks
  • 300+ videos
  • 40+ hours of video
  • 5 webinars with the lecturer
  • chat support with the lecturer
  • term paper for the portfolio (optional)
  • additional materials
  • presentations, test tasks
  • long-term access to the course
  • personalized certificate
  • checking and feedback on the term paper
  • webinar on "Security in web development"
  • webinar "Overview of IDEs (WebStorm / Visual Studio) and their advantages over code editors"
  • webinar on "Effective job search for frontend developers"
Buy - 250$

Вартість пакету для команд

Для придбання курсу за спеціальними умовами надішліть реквізити та інформацію про кількість осіб на пошту [email protected] або у Facebook — ми підготуємо для вас персональну пропозицію.

3-10 осіб
-10%
11-20 осіб
-20%
20+ осіб
-30%
Написати нам

No, it doesn't. The main thing is that the student must have the desire to complete the course and apply the acquired knowledge in practice.

General PC skills (create a file, folder, open a command line).

Yes, the course contains all the necessary information that beginners will need to start a career in IT. Your job search can be shorter and more successful with a course project that you create for your portfolio.

Yes. All webinars will be available in the course materials in a recording the day after the event. You can watch them at your convenience.

  • You study in a unique program.

Each course is the result of the work of a team of specialists. We attract the best practitioners and spend several months preparing to give you exactly what you need and what really works.

  • You get maximum practice

The course provides only the necessary theory, and most of the time is devoted to practical assignments and QA sessions with the lecturer. Learning based on the principle of Learning by doing guarantees the best results.

  • You have ongoing mentoring support

You are not alone in your studies. During the active phase of the course, the author is in touch with you through live webinars, Q&A sessions, and Slack, where you can can ask and discuss any questions and get feedback.

  • You can use the help for a career start

You will receive a bonus course "How to find your first job in IT", useful career advice, and your first case in your portfolio - everything you need to start your your career faster.

  • You will have long-term access to the course

Within two years, at any time, you can repeat a topic that is difficult for you or further systematize the knowledge you have gained.

  • Unquenchable demand

According to DOU, frontend developers have been among the five most sought-after IT specialists in the labor market for more than a year. This means that there is a job for everyone for everyone, both in Ukraine and abroad.

  • Mobility

Frontend developers can work anywhere and anytime - in the office or at home. No matter what happens, you only need a computer and the Internet to work.

  • An emerging area

Frontend developers are needed by every business that has a website, and the number of such businesses is only growing from year to year.

The course will be available to you for two years. This means that you will be able to repeat a topic that is difficult for you at any time or further systematize the knowledge you have gained.

Refunds for all purchased courses are available within 14 days. A refund request is sent to the email address where you indicate the email to which your account is registered, your full name, and the course for which you want a refund. The refund procedure takes 30 calendar days from the moment the request is approved. In order to avoid abuse by students, we reserve the right to limit or reject requests for refunds in cases where:

  • a significant portion of the course was used or downloaded by the student before the refund request was made;
  • the student has submitted several refund requests for the same course;
  • the student demands a refund of the excess amount;
  • users have violated the Platform Terms or Rules.

How the training takes place

Training room

After purchasing the course, you will get access to your personal account, which contains all the videos, assignments, and additional training materials.

Feedback

You will be able to ask questions on the webinar or in the chat, as well as communicate with other students of the course in a closed community.

Anywhere and anytime

Watch video lectures and complete assignments at your convenience. Download our mobile apps to continue learning on the way to work or while traveling.

Certificate

After successfully completing all the course tasks, you will receive a certificate that you can proudly add to your resume.

Social responsibility

Revenues from course sales allow us to support and develop free courses, ranging from critical thinking and entrepreneurship entrepreneurship to professional development for teachers and doctors.

Register

Нагадайте про старт