Во почетниот дел од Front-End Академијата ќе ги изучуваш основите на програмирањето, односно HTML. Тој е markup јазик за документи дизајнирани да бидат прикажани на веб страницата. Ќе започнеш со основите, ќе продолжиш кон напредно изучување на овој јазик. Овој сегмент ќе го комплетираш со задача и проект.

• Introduction
• Environment setup, IDE setup
• Basics of HTML – what is it, why it is best for WEB content
• Top level tags – body and html
• Basic HTML tags for content – div (block element) and span (inline element)
• Tag attributes
• More HTML – anchors, paragraphs, lists
• Structure of URL – what is URL, what does it stand for, is URI same as URL, what is a relative path and what is an absolute path
• Images in HTML
• Header tags – h1 to h6
• HTML Tables – back in the old days or…
• De facto present and future – intro to HTML5
• Intro to SEO – why do we need it?
• Some HTML5 semantic tags – header, footer, section, main, article
• Media HTML5 tags – audio and video
• Basic HTML meta tags - head, title, meta
• Doctype
• Introduction to forms
• Basic form elements – input element
• Other form elements – checkboxes, radio buttons, select and button element inside form
• Practical task

HTML секако е само почетокот за креирање на динамични веб апликации. Следен чекор е изучување на Front-End програмирањето е CSS, јазикот кој се користи за објаснување на документите напишани во HTML. Преку повеќе различни вежби, теоретски дел и практични вежби.

• Short intro to CSS
• Types of CSS to HTML binding – inline, style tag and separate CSS file
• Structure of CSS rule
• ID and class HTML attributes and rules based on these attributes
• Styling text – font-related CSS attributes
• Background image techniques
• More complex CSS rules – how to combine them
• What are specificity and cascading?
• Exercises
• The Box model – padding, border and margin
• Positioning – caveats and differences
• Floating
• Exercises
• Pseudo elements and pseudo selectors
• CSS transitions and animations
• Exercises
• Practical task
• Are CSS specificity and cascading a pattern or anti-pattern?
• Intro to CSS preprocessors – SASS, LESS, Styles
• Preprocessors tooling – Koala, Parcel, Gulp
• Page by page styling – a keyhole to the feature based project structure
• Exercise – project restructuring
• Responsive WEB design
• Intro to Bootstrap
• Intro to mobile-first approach
• Some more Bootstrap
• Fluid vs fixed layout
• Using Chrome Dev tools
• Exercises

Третиот и последен технолошки столб на World Wide Web-от е JavaScript, високо функционален, динамичен и event-driven програмски јазик. Овие карактеристики само неколку од причините зошто има голема побарувачка за програмери со JavaScript вештини.

• A history class
• Intro to JavaScript – meet the script tag
• Do some console logging
• Some basic terms and buzz words from the world of programming – types, variables, functions, classes… And yes, JavaScript has all of that
• Primitive types and operators for primitive types
• Complex types – passing by reference vs passing by value
• Structural statements – conditionals and loops
• Exercises
• Functions
• Exercises
• Arrays
• Exercises
• Objects and classes
• Exercises
• DOM and DOM manipulation
• Intro to HTML5 API
• Event binding and callback basics
• Exercises
• AJAX – entering the HTTP/2.0 era
• Browser APIs for making AJAX calls – XHR and Fetch API
• Exercises

Следен сегмент е основно и напредно изучување на React, open-source JavaScript библиотека, наменета за градење на кориснички интерфејс. Една од причините зошто има потреба за оваа библиотека е фактот што преку React може да се користи за креирање на веб страници и мобилни апликации.

• Modern JavaScript frameworks – what are they and why do we need them
• Intro to React.js and SPA paradigm
• Rendering and basic files in an optimal React project
• Intro to JSX
• Components and feature-based folder structure of a project
• Component types – state-less vs state-full
• State and props – is that same thing, well… not exactly
• The lifecycle of a component
• Practical task

Уште еден клучен дел за комплетирање на Front-End Академијата е Redux, open-source JavaScript библиотека, наменета за менаџирање со состојбата на апликациите. При комплетирање на овој модул следува изработка на мини веб страница во форма на блог.

• Core principles (Flux pattern)
• When to use Redux and when not to use
• Building blocks of the Redux library (Action, Store, Reducer)
• Connect Redux to React (connect HOC, mapStateToProps, mapDispatchToProps)
• Multiple reducers (Reducks pattern)
• Async Redux with Thunk
• Practical task

Последниот модул од Front-End Академијата ќе биде повеќе фокусиран кон финалниот проект, односно креирање на React апликација.

• How to proceed from this point (advanced concepts and best practices)
• ESNext (ES6 most important features)
• Create React App
• NPM basics
• CI and CD
• Version Control
• When to use React.js and when not or when to use some other framework (Angular or Vue)