Become a Front-end Developer

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• Forms
• Validation
• onBlur, onTouch, …
• Proptypes
• CRUD
• Localization (multilanguage)
• Tests (Jest)
• Firebase – introduction to CI/CD
• Practical project – project workshop

Practical project – project workshop