module no of hours topic scope competencies

basic information about course, software installation

JavaScript Developer -
1 5
introduction

What is HTML and what is it for? Students learn:

What is a tag? - short history of HTML
Closing tags inline and in blocks. Order of opening and closing tags (last opened, - the original and current applications of HTML
closed first). Overview and use of the most basic HTML tags when creating the first,- basic HTML tags such as h1, h2, p, html, body, head, title
simple page in Notepad. - what is a markup language
Overview of subsequent HTML tags. Discussion of new HTML5 tags . - what is a tag
What is an attribute? Overview of global attributes (style, id, class etc.) and most
- what is an attribute
important attributes in common tags. Adding a link. Adding an image. Adding a - basic attributes like src, href, id, class, style
form and several fields to the created page. - rules for opening and closing tags
2 14 Basics of HTML and CSS CSS basics. Attaching styles file to HTML page. What is a selector? Cascading styles- new HTML5 tags such as section, aside, footer
(selectors hierarchy) based on: https://www.w3.org/TR/CSS22/cascade. - what is CSS
html#cascade. Overview of selectors, attributes, pseudo-classes. Different types of - what cascading means in cascading style sheets
display (without flex). - hierarchy of selectors according to https://www.w3.org/TR/CSS22/cascade.
What is RWD? html#cascade
Media Queries overview. Changing the behavior of the page at a lower resolutions - display: block, inline-block, inline
using Media Queries. Practical exercises using Brackets or Visual Studio Code. The - pseudo-classes
use of development tools in the Chrome browser to examine elements, check the - basic CSS properties
styles, change them live, edit the content, etc. - what is RWD
- how to add styles depending on the screen size (media queries)
- how to analyze and develop website using built-in developer tools
What is JavaScript and what is it used for? What is a programming language? Students learn:
Algorithm definition. What are variables and how do we create variables? What do -Students what is acan:programming language
we use them for? What are functions and how do we create functions? What do we - what createisanJavaScript
HTML fileand what is it currently used for
use them for? Discussion of what is front-end and what is back-end. - what createisananHTMLalgorithm
document structure in the file with the use of html, head and
Ways of placing JavaScript on the page. Types. Using browser console from the -body waystags
to run JavaScript code on the page
code level (console.log). Alert and prompt functions. - what place is a variable
the and what
first elements we page
on the use itusing
for basic tags
Overview of basic control statements in JavaScript (if, else, for, while, return, - JavaScript data types
launch the created page in a web browser
break, continue). Mathematical operations, comparisons. - what is a function
correctly nest htmland tagswhat we use it for
Predefined objects (e.g. Math, String, Array) and their functions. For..in and - what use anare function
opening and parameters
closing tag
forEach loops. Simple and multidimensional arrays. - difference
correctly save between = (assignment)
the attribute and == (comparison)
in the tag
--what add aispage
a loop title
- loops set theavailable in JavaScript
page's character encoding
- Math displayobjects
headings and of itsdifferent
functionslevels on the page
- Stringdisplayobject and its on
a paragraph functions
the page
- the Array
break a lineobject
inside and its functions
a text
- other insert useful
a picture built-in objects
- what is an array
link to another page
- how arrays work
add external CSSin fileJavaScript
to HTML file
- loops style anto element
iterate through
using id,the contents
class, tag of the array
- build a complex selector
Students
- build a selector can: for a pseudo-class
- connect
change textthe properties
JavaScript(size, file tocolor,
the webpage
line spacing, font, alignment etc.)
Basics of programming in
3 14 - write change any contentdimensions
element to the console or using
(margin, the alert
padding, () function
witdh, height)
JavaScript
- createchangevariables
element and perform
properties operations on
(background, them
border)
- write a function
view the source code without parameters
of the page
- write a multi-parameter
view the DOM function and refer to parameters inside it
- call a function
change websitefrom "live" within another function
- returndisplayaallvalue from a function
properties of element using return
- create an if condition
- create an if -> else if -> else condition
- use basic mathematical operators (plus, minus, multiplication, division, modulo)
- use the basic comparison operators (<, <=, ==,>,> =)
- use logical operators (and, or) to create more complex conditions
- write a for loop iterating over numbers
- write a while loop
- use inside break and continue loops
- take advantage of the fact that everything in JavaScript is an object
- use functions and constants saved in predefined objects
- create an array
- add an element to an array
- remove an element from an array
- get a value from an array
- change the value in the table
Students
- iterate over learn:the contents of the array using a for ... in loop
- what iterateare
overCSSthe frameworks
contents of the array using a forEach loop
- why it is worth using frameworks
video Git video
- possibilities of CSS frameworks on the example of Bootstrap
What is a CSS preprocessor? What are the benefits of using it? We discuss Students
- e-mail framework learn: - Foundation for emails
Sass as the best known, but it is also worth mentioning Less and Stylus. Two -- advantages what are CSSand preprocessors
disadvantages of Bootstrap
Sass syntaxes (.scss and .sass). Using the Koala program to convert sass -- what are the possibilities of CSS preprocessors compared to the CSS itself
grid
4 7 CSS Preprocessors files to css. - two Sass syntax (scss and sass)
Practical exercises with a discussion of the functions available in Sass such - mechanisms that make sass work in the browser (convert to css)
as variables, nesting, mixins, functions, importing and inheritance.
- basic Sass
Students can: syntax elements
-- givewayselement
to nest mediastyles forqueries
different screen sizes
What are CSS frameworks and what are they for? Presenting Bootstrap and -
- explain what theSass
more advanced CSSsyntax
framework is and indicate its general advantages
mention of competition (Foundation and Uikit), it's also worth mentioning - download and install Bootstrap in their project
Foundation for Emails. Students
- use classes can:predefined in Bootstrap to change the appearance and behavior of
- use Koala
their to convert sass files to css
own elements
Downloading Bootstrap and attaching it to the site, preparing for its use. -- list the advantages of create
css preprocessors
Discussing the pros and cons of using CSS frameworks (especially Bootstrap). use Bootstrap grid to a website structure, using: classes responsible for
- create a variable in the code and use it elsewhere
size
Discussion of the Bootstrap grid (classes responsible for size, container fluid and - nestthe oneheader
rule inelement
another
5 14 Frameworks CSS and RWD normal, offsets, push and pull, hidden and visible). How Bootstrap makes creating -- use
- usenestthe
onestyling
rule inofanother
the table for pseudo-classes
RWD websites easier?
-- use
use styles
nesting fortoforms
style multi-segment class names
Building a simple layout using such Bootstrap elements: headers, tables, forms, -- use built-in functions,
style a new button e.g. to change the color
buttons, glyphicons, navbar with dropdown, breadcrumb. -- create
create a a navbar
simple mixin from the andmenu,
use it
Continuation of the layout using elements such as: thumbnail, badge, alert, - create a simple function
- use other elements such as: thumbnail, badge, alert, responsive embed, popover,
responsive embed, popover, modal, carousel. - importcarousel
modal, another file
- create an inheritance of one rule after another
Overview of tools making cooperation between Designer and Programmer easier, Overview of tools making cooperation between Designer and Programmer easier,
- use mathematical calculations as a property value
examples: Zeplin, Adobe XD, Avocode or possibly Photoshop. Preparation of HTML examples: Zeplin, Adobe XD, Avocode or possibly Photoshop. Preparation of HTML
Basics of working with
6 7 structure based on prepared project in any of the tools mentioned before. Good structure based on prepared project in any of the tools mentioned before. Good
designs
rules related to the preparation of the site based on materials prepared by graphic rules related to the preparation of the site based on materials prepared by graphic
designer. designer.
module no of hours topic scope competencies
Anonymous functions, callbacks. Objects in JavaScript as a way to store data. Students learn:
Passing by value and passing by reference. Local and global variables. Constants. - what is an anonymous function?
Scope of functions and variables. Concept of hoisting. Recursion. - what we use anonymous functions for
- what is a callback?
- what do we use callbacks for
- way of storing structured data in JavaScript - objects
- what is JSON
- what is a reference
- difference in passing by reference and by value
- rules that decide whether a given variable is passed by reference or by value
- what is the scope of variables in JavaScript
- what is the scope of the function in JavaScript
- different scopes of functions and variables
- differences between var, let, and a declaration without any of these keywords
- what are constants
Structural programming in - what is hoisting and how does it affect the code they produce
7 14
JavaScript - what is recursion and how to use it

Students can:
- create an anonymous function
- pass a function as a parameter to another function
- use callback
- create a structure for any data
- create an object of this type and fill it with data
- change the structure of the object
- create a copy of the object that would normally be passed by reference
- use var or let respectively
- correctly indicate the scope for a given variable or function
- explain the concept of hoisting
- predict code behavior as a result of hoisting
- solve the problem (e.g. consecutive numbers of the Fibonacci sequence) using
recursion
What is an object? How is object-oriented programming implemented in Students learn:
JavaScript? Keyword this. Keys and values. What is a field? What is a method? - what is object oriented programming
What is a constructor? Overview of inheritance. Extending the functionality of - what is a class
embedded objects. Pros and cons of OOP. Practicing the acquired knowledge on - what is an object
practical examples. ECMA6. Discussion of the new features it introduces. Keyword - how object oriented JavaScript is implemented in both ES6 and earlier
class. The difference between let and var. Arrow functions, promises, etc. Practical - what is a property
exercises using JavaScript and all previously learned knowledge. - what is a method
- what is a constructor
- what is the word 'this' inside the object and what is it for
- what is inheritance?
- how inheritance works in JavaScript
- the class keyword
- arrow functions
Object oriented - promises
8 28
programming in JavaScript - default values for function parameters

Students can:
- create an object and define its properties and methods
- create an instance of this object
- add a constructor of this class
- list the known advantages and disadvantages of object-oriented programming
- reference the fields and methods of that object from inside the object
- extend the functionality of an existing class with the use of inheritance
- use the arrow function
- explain how promises work
- create a class using the class keyword
- create constants
- write functions with default parameters
video HTTP video
Students learn:
- elements of a website or web application that are assigned to the front-end
- elements of the website or web application that are assigned to the back-end
- technologies that belong to the world of the front-end
- technologies that belong to the world of back-end
- what is AJAX and what is it for
- standard client-server communication and AJAX
Differences between - what does an AJAX query looks like using XHR
9 7
frontend and backend
Students can:
- determine whether a given functionality on the website is a task for a front-end or
a back-end user
Discussion of what is frontend and what is backend. Differences. Discussion of the - list most of the basic tasks that need to be completed to create a website
tasks that make up the operation of the website with an indication of which belong - write an AJAX query
to the frontend and which belong to the backend. Overview of the AJAX method. - process and display in any form data that was downloaded using AJAX
Observation of sent requests in Chrome development tools. - examine the requests using the developer tools in the Chrome browser
Design patterns. Code formatting and inspection (es lint). Validators. Students learn:
Organization of work in the project. Proposed file and directory structure. - what are design patterns
KISS, SOLID, DRY, clean code, camelCase naming standards, popular - what is static code analysis
conventions. - what are validators and what are they for
- what is ESLint
- proposed file structure and directory organization for a bigger project
- the method of organizing team work in a project
- general rules of good coding
Design Patterns & Good - the KISS principle
10 7
Practices - the DRY principle
- the SOLID principle
- naming standards
- concepts related to the philosophy of clean code

Students can:
- explain what design pattern is and a name a few of them
- implement good practices in their code
- run a script for their project that will take care of formatting and code inspection
module no of hours topic scope competencies
::pseudo-elements overview. Float types. CSS3 selectors. Flexbox. Grid. Students learn:
Animations and effects in CSS3. Canvas. Audio and video elements. - what are pseudo-elements
Practical exercises in the implementation of modern frontend solutions. - the float property and its various values which most often affect the way the
photo is displayed in the text
- new CSS3
Students selectors
learn:
-- a modern way
developer toolsofinarranging
Chrome incontent
detail on the website, display: flex
-- what other is
Flex features using the game:
debugging
https://flexboxfroggy.com
- what is a breakpoint
-- ways an even newer approach
to analyze the code tobymanaging
debuggingtheit layout of elements on the page, grid
-- simple what are animations using CSS3
regular expressions
-- the moreuseadvanced
of regular animations using CSS properties: keyframes, animation,
expressions
-transform, transitions
basic symbols used in regular expressions
-- HTML5 what is audio tag
data structure
-- what HTML5 video
data tag
structures are available in JavaScript
-- commonly used new effects on websites
what is a stack
Advanced Features - HTML -- what parallax
is a queue
11 21 -- micro
what isanimations
a list (e.g. on hover)
and CSS
-- what
scrolling
is a animations
tree (AOS css)
-- what
background
is DOM video
-- concepts
gradients such as parent, child, sibling
-- DOM
button effects (Hover.css or tympanus creative buttons)
properties
- the concept of computational complexity and how to calculate it
-Students examplecan:complexity calculations
-- insert a pseudo-element
features on the page and style it
of sorting algorithms
- use different types of floats in the text full of pictures
-Studentsuse morecan:advanced selectors
-- read create a dynamic from
information layout of elements
Chrome that smoothly
developer tools adjusts to the changing
-screen resolution in the right place in the code
put a breakpoint
-- create a simple animation in which the state of a given
navigate in debug mode jumping between functions, lines, object changes according
calls
-toadd planned stepsto the group of watched and check its value live
a variable
-- insert video and / or sound on the website and style their navigation
trace the changes in variables in the program in the debug mode in order to
- find and
detect use ready-made
an error in the code effects or libraries on your website
-- indicate the techniques
analyze and understandthat were used regular
the presented to create a given effect
expression
Debugging JavaScript code using development tools in the browser. Regular - write a simple regular expression in JavaScript
expressions. Discussion of advanced data structures, which of them are available - use regular expressions in practice
in JavaScript? -Students
manipulate the DOM tree using native JavaScript functions
learn:
Working with the DOM. Changing HTML structure of document using JS. selectiselements
- what a CMS andand change
what their style using native JavaScript functions
is it for
Advanced elements of
12 28 list some
- what of the
are the most popular
popular CMSs data structures
JavaScript Introduction of the concept of computational complexity. Implementing a sorting are able
- what to define
is the the applications
difference of data structures
between a framework and a CMS
algorithm (e.g., bubble sorting) are able
- the mostto create CMS
popular the given structures
- Wordpress andinitsJavaScript using the available tools
basic features
Practical exercises using JavaScript and all previously learned knowledge. (i.e. determine
- ways computational
to manage a websitecomplexity
on Wordpress on the basis of pseudocode
calculated drawing in Canvas) - implement simple sorting based on pseudocode
What is CMS and what is it for? Discussion of several popular CMSs. Overview of Students can:
Wordpress support from the back side. - install the Wordpress platform on the server
- adjust the configuration
- install an additional plugin
- download and install the template
13 7 CMS - change the page template
- change template css styles
- modify the template html code
How to use Wordpress in your own projects? Showing that if we can do frontend, - add new content (article) to the page
it's enough to learn one of the CMS and you can create entire pages yourself. - change the static content on the page
Students learn:
- what is Node.js
- what are the uses of Node.js
- what is Webpack and what is it for
- what is npm and what is it for
14 7 Development tools - content of package.json file

Students can:
- use npm to install dependencies
- update dependencies
What are NodeJS, npm, Webpack? What are they for? - check dependencies versions using package.json file
What is MVC? What are JavaScript frameworks? What does the use of frameworks Students learn:
give us? The difference between Angular 7 and AngularJS. Introduction to Angular - what is MVC
7. What is TypeScript? Discussion of the differences between TypeScript and - what are JavaScript frameworks
JavaScript. Examples. Classes. Decorators. Angular CLI. - examples of modern JavaScript frameworks such as Vue.js, React or Angular
Overview of the application structure in Angular. The use of basic elements - - what is TypeScript
Components. Routing overview. Directives. Pipes. Communication Controller -> - what are the differences between JavaScript and TypeScript?
View. Nesting Components. Communication between the parent Component and - the basics of the framework and its basic assumptions
the child Component. Use of Input and Output. Forms. - the basics of Angular CLI
Advanced aspects of Angular. Use of services. Explanation of life cycle of - Angular application structure
Component. Explanation of ChangeDetection. Mocking. RXJS. What is an - communication methods between the business logic layer and the display layer
Students learn:
Observable, Observer? Promise vs Observable. Data Streams and subscribing to - what is a component?
- what are tests
them. Unsubscribe. AsyncPipe. Operators. Subjects. Practical exercises using - what does the component in Angular look like and what role does it play?
15 49 JavaScript Frameworks - what are mocks
external APIs. - how communication takes place in Angular between the child component and
- what are test scenarios
the parent component and vice versa
- advantages of writing code tests
- what is routing?
- types of tests
- how does Angular routing work?
- a sample test management tool
- what is the difference between front-end routing and back-end routing
- what is TDD
- how Angular facilitates the creation of forms
- advantages of TDD
- what is a directive and what is it for?
- situations where it is worth using TDD
- what is pipe and what is it for?
- Jasmine tool and its use in Angular
- what is the service and what it is for
- Protractor tool and its use in Angular
- functions that are automatically called on a component at various stages of its
- Selenium tool and its use
life within the application
Students can:
- 8 events that define an inline function call on a component
- indicate the differences between automatic and manual tests
- the rules for activating these functions, the frequency of their activation, the
Discussion of what tests are and why they are written. Types of tests. What is the - determine how the simplest unit test works
impact on performance
difference between manual and automatic tests? What is TDD? What is BDD? - write a simple unit test
- how Change Detection works
16 14 Testing - start a project using TDD
- what is an Observer Pattern and how to use it in Angular
Configuration and practical exercises in writing tests using Jasmine, Protractor - conduct a simple E2E test of the application
- what is an AsyncPipe
and Selenium. - define what tests to use and which tools
- few basic streams operators
What are agile methodologies? What is Agile? Overview of the Scrum methodology. - what is a Subject
17 video Agile, Scrum Overview of Extreme Programming elements. Agile Manifesto. Pair programming.
Code Review. Students can:
- indicate learn:
Students the benefits of using frameworks
- use types inworking
in practice, variableswith
andafunctions
larger project
write
- the a class opinion on their project
trainer's
use a decorator
- projects of other students
- install the Angular framework
- create a can:
Students new project using Angular CLI
run athe
- use sample project
previously using Angular
acquired skills inCLI
one project
17 42 Final project
create
- plan their
the own component
sequence of work in a larger project
- use the component in
divide the work into tasksthe application
use the decorators
- acquire @Input
missing skills and @Output
or information in their code
to complete the task
- write their
indicate theown simpleand
strengths routing
weaknesses of the project
trigger different
- propose possibleeffects
paths depending on the
for the further subpage called
development of the project
pass additional
- evaluate parameters
their current skills via routing
Using knowledge acquired during the course in one big, summarizing project. write their
- indicate theown
nextdirective
steps in their learning
- use a directive in code
- create their own pipe
- indicate situations when it is worth writing own pipe
- use the pipe in the code
- create a simple form and send its contents
- validate the correctness of the form fields
- create their own service
- decide when it is worth using the service
- use service from the component level
- add code in the appropriate component function
module no of hours topic scope competencies