Why take this course
If you want to start a career in the IT industry as a Front-end Developer, this training is for you. Regardless of whether you are a student, a graduate, or want to retrain, you will gain practical and comprehensive knowledge that will prepare you for this position. You’ll learn from an IT industry leader, working on specific examples and gaining the support of experienced developers who program on a daily basis. Upon completion of the course, you have the opportunity to obtain the Front-end Certified Developer Sii certificate, which will confirm your skills.
What you’ll learn
- You will gain a basic theoretical and practical knowledge of software development using HTML, CSS, JavaScript, node.js, and React.
- You will learn how to install and configure a development environment.
- You will learn how to create and test software and how to create scripts that automate tasks.
- You will be able to write applications in the JavaScript language.
- You will learn how to handle various data sources and process JSON structures.
- You will master the best practices and advanced programming techniques.
Who is this course for
This training is intended for anyone interested in working as a Front-end developer. We do not require any prior preparation or experience.
The training is ideal for:
- Students and graduates
- People who want to retrain
- People who want to expand their knowledge
Training Schedule
Day 1
- Installation and configuration of the development environment
- Introduction and scope of the training
- Basic concepts
- HTML fundamentals
- HTML tags and attributes
- HTML DOM – what it is
- HTML page
- HTML tags and structure
- Attributes (class, id, …)
- Comments
- Document Info
- Document structure
- DOM tree – relationships between elements
- HTML5 – semantics
- Basic HTML tags
Day 2
- Forms
- <form>
- action=”url”
- method=” ”
- enctype=” ”
- novalidate
- accept-charsets
- target
- <input> types – checkbox, radio, …
- placeholders & <labels>
- <Fieldset>, <label>, <legend>, …
- <input>, <texarea>, <select>, <button>
- <input> attributes, <select> attributes
- Tables
- layout
- formatting
- HTML5 tags
- <progress>
- <details>
- <summary>
- <dialog>
- HTML5 Character Objects
- Figma – Responsive Web Design
- Quick prototyping
- Wireframing
- Figma
Day 3
- CSS fundamentals
- CSS application and dynamic page appearance change
- Handling events using CSS
- Chrome DevTools – styles + computed
- Saving selectors and rules
- Cascading
- Selectors
- universal, type, class, id, attribute, child
- Selector weight – specificity
- Properties
- colors
- units of measure
- background – color, image, repeat
- fonts – face (google fonts), size, color, weight, align, line height
- Box model + Box sizing
- Pseudo-selectors – hover, first or last-child, n-th child, first or last-element
- elements – before, after
- Position
- relative
- absolute
- fixed
- Flexbox
- axes
- justify content
- align-items
- flex-direction
- flex-wrap
- flex-grow or flex-shrink
- align-self
- Good practices
- CSS reset
- file and code structure organization
Day 4
- npm – what is it?
- package.json
- dependecies
- package.lock
- node.js – JS script runtime environment
- advantages
- limitations
- running scripts
- JavaScript
- Introduction to JS programming
- JavaScript fundamentals
- Variable types
- null
- boolean
- string
- number
- Symbol
- Object
- Function and Array as an Object
- array + nested arrays
- Operators
- arithmetic
- comparison
- logical – not, and, or
- instance of, typeof, ternary operator
- Control flow
- if
- for, while, do while
- switch
Day 5
- Functions
- defining functions and parameters
- default parameters
- built-in functions
- variable scope – let or const or var
- call stack
- callbacks
- generator functions & generator object
- Array methods
- mutational
- accessional
- iterative
- Objects
- properties and methods + field access
- creating objects
- reference vs copy in comparison
- this in an object
- prototype
- ES6
- classes
Day 6
- Scopes, closures, hoisting
- variable scope – let or const or var
- hoisting – rules, operation
- closure
- Promises
- Promise state
- callbacks
- Async functions
- DOM manipulations
- querySelector and querySelectorAll
- parentElement
- HTMLElement properties and manipulation
- innerText
- classList
- style
- Events
- adding an event listener and callbacks
- types of events – common and specific properties
- this in events
- Forms
- basic validation
- submitting
Day 7
- Angular
- Introduction to Angular
- Application architecture
- Framework components
- Principles of operation
- Angular CLI
- Views
- Creating components
- Passing data
- DOM event handling
- Component lifecycle
- HTML code injection
- Pipes
- Data transformations in views (templates)
- Overview of the most popular built-in pipes
- Creating your own pipe
- Directives
- Overview of the most popular built-in directives
- Creating your own directive
- Services
- Providing and injecting services
- Creating your own services
- Communication using Observables
- Routing
- Building a routing table
- Nested paths
- Routing parameters
- Navigation from HTML and TS
- Accessing routing data in a component
- Forms
- Template driven forms
- Reactive forms
- Data validation
- API communication
- Overview of the HttpClient module
- Creating RESTful queries
Day 8
- Introduction to React
- Installation
- Basic concepts
- First app npx create-react-app
- Creating components
- Functional programming
- Proxy
- Class vs function component
- webhook
- states (useEffect, useState, useContext, …)
- Props
- Default values
- Functions
- Drill
- Childrens
- EventHandler
- Routing
Day 9
- Forms
- Validation
- onBlur, onTouch, …
- Proptypes
- CRUD
- Localization (multilanguage)
- Tests (Jest)
- Firebase – introduction to CI/CD
- Practical project – project workshop
Day 10
Practical project – project workshop
