Course Front-End (Angular)

HTML5 + CSS3 + JS = NaN?

Free consultation

We will help, advise, and assist you in finding your direction in the IT field.

Instructor

Mykola Digtiar
Mykola Digtiar
Senior Software Engineer
5+ years in IT.
Works at Trade Republic.
Loves table tennis and drinking coffee at night.

About the course

Front-End development is one of the most in-demand areas in today's IT industry! Every website, web application and mobile app needs a "face" that will work properly on all possible devices, from your home computer to your smartphone. It is Front-End developers who turn a design layout into a "live" website. Everything you see on a website or mobile app is called the user interface. Front-End developers use software code and markup languages to bring the creative ideas of web designers to life!

In their work Front-End developers use: the markup language HTML, cascading style sheets CSS, JavaScript programming language and frameworks that are associated with it.

Therefore, during the online training we dwell on the study of each of these blocks in detail.

One of the most popular and in-demand libraries for Front-End development right now is Angular. With the help of this library you can create not only fast and feature-rich websites, but also mobile applications. We will learn more about the features of this library in the course!
Course info on the website of the Agentur für Arbeit

The course is ideal for

Those who want to learn how to create websites face-1
Web designers face-2
Graphic designers face-3
Content managers face-4

Course program Front-End (Angular)

Module 1: Layout

Introduction to HTML.
  • The role of Front-End in the IT world. Interaction between the "front end" and the "back end" and the designer.
  • Stages of project life.
  • Development tools (code editor, Photoshop, devTools).
  • Rendering the page.
  • The basic principles of layout. Cross-browser and validity - what is it and why it is important.
  • Browsers.
  • The structure of an HTML document.
  • Block relationships: nested, child, neighbor, parent.
Introduction to CSS.
  • What is CSS.
  • Ways to specify styles.
  • CSS selectors.
  • Cascading ("weight" of selectors).
  • Combining and grouping selectors. Selector hierarchy. Inheritance.
  • Built-in browser styles. CSS reset.
  • Block model.
  • The border property.
  • The display property.
  • The float property.
  • The overflow property.
  • The transition property.
  • The transform property.
  • Animation with CSS3.
  • Positioning.
  • CSS3 Flexbox.
Responsive design.
  • The difference between Adaptive design and Responsive design.
  • Types of "devices".
  • CSS tools and settings for Responsive design.
  • CSS media queries.
  • CSS Breakpoints (control points).
  • Navigation on the site.
  • Pixel Perfect design.
Practical layout.
  • Social networks with SVG icons.
  • Fonts and their connection.
  • Practical layout.
Git.
  • Version control systems.
  • The init command.
  • File status, status, add, commit, config, log commands.
  • Working with remote repository (GitHub), SSH keys.
  • Basic commands.
Linux.
  • What is an operating system.
  • Automation, scripting, networking tools (ssh, rsync, ftp, telnet).
  • Networks.
  • Docker.
  • Docker-Compose.
Bootstrap.
  • Framework. What? Why?
  • Installing and configuring Bootstrap.
  • Bootstrap components.
  • Utilities.

Module 2: JavaScript

What is JavaScript?
  • ECMAScript.
  • Document model (DOM).
  • Automatic memory management.
  • Absence of strict data typing.
  • Lack of input and output tools.
  • Lack of access to the operating system functions.
  • Processing of user actions and browser events.
Getting Started. JavaScript basics.
  • Type casting.
  • Functions.
  • Methods.
  • Integrating JavaScript into web pages.
Data types.
  • Number.
  • String.
  • Boolean.
  • Null.
  • Undefined.
  • Object.
  • Array.
String.
  • Creating a string.
  • Line transfer.
  • Using variables.
  • Character Escaping.
  • Concatenation and addition.
  • Array.
  • Methods.
Number.
  • NaN and Infinity.
  • Methods.
  • Math.
Object.
  • Creating objects.
  • Using objects.
  • Copying objects.
  • The descriptors of the object properties.
  • The structure of the descriptor.
  • The Object class.
  • Object prototypes.
  • Prototype inheritance.
Array.
  • Creating an array.
  • Access to array elements.
  • Changing an array.
  • Array methods.
Variables.
  • Variable declaration.
  • Variable naming.
Condition operators.
  • The if condition statement.
  • The switch condition operator.
  • Ternary condition operator.
Loops.
  • Loop while.
  • Loop do...while.
  • Loop for.
  • Loop for...of.
  • Loop for...in.
  • Usage of continue and break.
Functions.
  • Function declaration and call.
  • Function arguments.
  • Keyword return.
  • Arrow functions.
  • The context of the function.
  • The scope of a function.
Date and time.
  • ISO standard for date and time.
  • Date methods.
OOP.
  • What is OOP?
  • Classes in OOP.
  • Associations.
  • Inheritance.
  • Overloading.
  • Inappropriate use.
  • Abstract classes.
  • Polymorphism.
  • Encapsulation.
  • Accessors (getters and setters).
  • Abstraction.
  • Level of abstraction.
Closure. Timers.
  • setTimeout().
  • setInterval().
  • setImmediate().
DOM.
  • Getting DOM elements.
  • Changing DOM elements.
  • Deleting elements from the DOM.
Local Storage and Session Storage.
  • Promise - async /await.
  • Exceptions.
  • Fetch API.
  • Object window.

Module 3: Angular

Introduction to Angular
  • Get to know the framework
  • Key advantages
  • Get to know TypeScript
First Angular application
  • Structure of the framework
  • Description and functionality of the main modules
  • Work with CLI
  • How to attach variables and functions
Fundamentals of working with DOM in Angular
  • Components
  • Directives
  • Pipes
  • Templates
  • Fundamentals of creating Angular Web Components - Angular Elements
Fundamentals of working with data in Angular
  • Decorators
  • Services
  • Data binding
  • Data storage
  • Interaction between components
  • Work with HttpClient
Work with forms in Angular
  • Forms in Angular
  • Forms validation and customization
  • Capturing data from different types of forms
  • Reactive forms
Key application lifecycles
  • ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy
  • constructor
Fundamentals of working with HTTP
  • HttpClient API module breakdown
  • Interfaces for working with all methods of HTTP requests
  • Server requests using Promises
  • Brief introduction to Observables

Module 4: Diploma project

Description.
  • Diploma work includes the creation of the site. The site must contain: registration and login, an individual account (depending on the specific project), routing, secure routing in the presence of roles on the back, download files, the structural layout of the code on disk, one of the frameworks or their own layout: Bootstrap, Ant Design. Structured layout, breakdown into components essentially. Storage, Redux + several redusers, server-side interaction and long scripts: actionCreator + Thunk or Saga, backend work.
Defense of the project.
  • It is necessary to pass the practice, which provides a demonstration of the working project, answers to any questions related to the project, a demonstration of the code on request. And separately, theory on the entire course program and on all topics is passed. Theory is passed in the format of an interview for Junior Developer position, to an outside, independent expert. You can get from 0 to 100 points for both blocks.

Your resume after taking the course

Junior Front-End Developer
Salary from
45 000 euros a year
Professional skills:
  • HTML & CSS
  • Adaptive + Responsive designs
  • Git
  • JavaScript (DOM API, ES6+)
  • REST API
  • Angular
  • KISS, DRY, SOLID
  • SCSS, SASS
  • TypeScript
  • AJAX & HTTP
  • ООП

This is what your electronic certificate will look like

You can add this certificate to your CV
Certificate Front-End (Angular)

Tools you'll master

HTML
CSS
Bootstrap
JavaScript
Git
GitHub
Linux
Angular
CodePen
HTML
A hypertext page markup language that is used to mark up documents for viewing web pages in a browser. It is used to let the browser know how to display a loaded site or page.
CSS
CSS (Cascading Style Sheets) is a language for describing the appearance of a document written using a markup language. It is usually used to describe the appearance of web pages written in the HTML markup language.
Bootstrap
Bootstrap is a free toolkit for creating websites and web applications. It includes HTML and CSS design templates for typography, web forms, buttons, labels, navigation boxes, and other web interface components, including JavaScript extensions.
JavaScript
JavaScript is a multi-paradigm programming language. It supports object-oriented, imperative, and functional styles. It is an implementation of the ECMAScript specification. JavaScript is typically used as an embedded language for programmatic access to application objects.
Git
Git is a distributed version control system that allows you to track software development history and collaborate on complex projects from anywhere in the world.
GitHub
GitHub is an online code storage and synchronization service for programmers and application developers. The main purpose of this service is to support collaborative project development and version control.
Linux
Linux is a family of operating systems (OSs) based on the kernel of the same name. There is no single Linux operating system like Windows or MacOS. There are many distributions (a set of files needed to install software) that perform specific tasks.
Angular
Angular is an open-source front-end web application framework developed by Google, designed for efficiently building dynamic and scalable single-page applications. With features like declarative UI, two-way data binding, and a modular architecture, Angular streamlines development, promotes code organization, and enhances maintainability. Its powerful tools, including dependency injection and a built-in router, make it a popular choice for creating robust and feature-rich client-side applications.
CodePen
CodePen is an online community created to test and display HTML, CSS, and JavaScript based snippets. The community was created in 2012 by developers Alex Vazquez, Tim Sabat, and web designer Chris Coyer.

Salary expectations

The possibility of career growth with an increase in wages like a magnet attracts new professionals in the field of IT.

To achieve earnings of 85,000 euros (gross) per year or more, you need to go from Junior to Senior. And this path can be quite fast - it all depends on you!
Junior
4000 euro / month
Middle
5500 euro / month
Senior
7000 euro / month
For the Junior position, just a month's salary of 4000 Euro (gross) will cover the entire six months of training on our course. You will get your money back very quickly!
Experience: freshman
When you grow up to Middle Specialist, your salary will be from 5500 euros (gross) per month and above! You can achieve this result only after 2 years of hard work and constant self-development.
Experience: 2-3 years
Senior is a specialist who earns from 7,000 euros (gross) per month and above - depending on the type of company, experience and your goals. Only your ambition determines the upper limit of your earnings and your career ladder - so don't stop there!
Experience: 4-5 years

Free consultation

We will help, advise, and assist you in finding your direction in the IT field.

Administrator

Nikita

Phone

+49 152 5263 7381

Telegram

Write us a message

All done!

Congratulations! You've successfully signed up for our free consultation. Our team will be in touch shortly with further details. Get ready to expand your IT knowledge and skills with us at Codillas Academy!

Oh no!

Apologies for the inconvenience. There was an error submitting your contact form for the free consultation. Please double-check the information and try again. For assistance, please contact our support team at info@codillas.com. We appreciate your understanding and look forward to helping you on your IT learning journey.

Sign up for an IT course

We will help, advise, and assist you in finding your direction in the IT field.

Administrator

Nikita

Phone

+49 152 5263 7381

Email

hello@codillas.academy

All done!

Congratulations! You've successfully signed up for our IT course. Our team will be in touch shortly with further details. Get ready to expand your IT knowledge and skills with us at Codillas Academy!

Oh no!

Apologies for the inconvenience. There was an error submitting your contact form for the IT course. Please double-check the information and try again. For assistance, please contact our support team at info@codillas.com. We appreciate your understanding and look forward to helping you on your IT learning journey.