fbpx

Академија за Front-end програмирање. (online)

CHANGE ACADEMY

Што е Front-End Developer?

Што е Front-End Developer?

Front-End Developer е програмер на веб-страни кој го програмира предниот дел, односно изгледот на веб-страната. Веб-дизајнот е приказ за тоа како веб страната треба да изгледа, додека front end development е како тој дизајн всушност се имплементира на веб-страната.

Front-end програмерите користат три програмерски јазици за да го кодираат дизајнот на веб-страницата или веб-апликацијата:

  • CSS
  • HTML
  • JavaScript
  • React

CODE YOUR FREEDOM

Пријави се.

Програма.

Introduction to the Front-End World

– What is World Wide Web (WWW)
– How does the internet work?
– What happens when we open a page as www.google.com
– Front-End Developer vs Back-End Developer vs Full Stack Developer
– Google Chrome’s Inspect Elements

Source Control GitHub

– What is GitHub and source control?
– Creating GitHub repository
– How to clone a github repository
– How to create a new branch
– How to pull changes from master branch
– How to add and commit new files or changes to existing files.
– How to solve a merge conflicts
– How to open a Pull Request
– How to merge to master branch

HTML5

– Introduction To HTML
– The structure of a Website
– Building our first Website
– Semantic Elements(Header, Footer, Nav…)
– HTML Tags(Headings, Paragraphs, lists…)
– Self Closing HTML Tags(img, link, input…)
– Block vs Inline elements
– Block-level elements(div, p, h1)
– Inline-level elements(span, a, strong)
– Attributes(id, class, src, href…)
– Audio Element
– Video Element
– Forms
– Tables
– Putting it all together(HTML Website)

CSS3

– Introduction To CSS
– Inline CSS
– Internal CSS
– External CSS
– CSS Properties(color, border, text-align…)
– CSS Selectors(tags, id, class)
– Text and Font(font-size, font-style, font-family)
– Colors
– Gradients
– Shadow Effect
– Advanced Selectors(~, +, a[target],…)
– Pseudo Classes(hover, first-child, last-child,…)
– Floating
– Position
– Box Model
– px vs em vs rem
– Margins
– Padding
– Border
– z-index
– Flexbox
– Grid
– Responsive Web Design Media Queries
– Putting it all together(HTML & CSS Portfolio Website)
– Deploying our portfolio to GitHub Pages

Bootstrap

– Introduction
– Installation
– Breakpoints
– Containers
– Grid
– Columns
– Gutters
– Utility classes
– Typography
– Components
– Content
– Forms
– Icons
– Putting it all together(Landing Page)
– Deploying our Landing Page to GitHub Pages

JavaScript

– Installing Node.js
– For Windows users installation of cmder or we can use the Git Bash Terminal.
– Introduction to Variables
– var, let, const
– Variable naming
– Types
– String concatenation & methods
– Arithmetic operators
– Comparisons
– Control Flow – Conditionals
– Logical Operators
– Optional chaining operator
– Nullish coalescing operator
– Scope
– Functions
– Objects
– Arrays
– JavaScript in the Browser – DOM Manipulation
– Navigating and Manipulating the DOM
– DOM Events
– Data Storage
– APIs-
– Asynchronous JavaScript

NPM

– Introduction
– Installing Node.js
– Setting Up NPM and package.json
– Installing and Using Packages

React

– Introduction
– Create React App (npx create-react-app)
– React App Folder Structure
– Component Architecture
– DOM vs VirtualDOM
– One way data Flow
– JSX
– React Elements
– React Components
– Hooks
– Environmental variables
– Controlled vs uncontrolled components
– Forms

React Router

– Introduction
– Routing

Material Ui

– Introduction

State Management

– React Context
    – Introduction
    – Why do we need react context
– Redux Toolkit
    – Introduction
    – Store setup
    – Importing or creating the root reducer           function
    – Redux DevTools Extension
    – Reducers
    – Actions
    – Slices of state

TypeScript

– Introduction
– Types
– Functions
– Type Aliases
– Interfaces
– Generics
– Union
– Enum
– Rest parameters
– Array & Object Destructuring
– React Props
– React Events
– React useState

Next.js

– Introduction
– Installation
– Folder Structure
– Layouts
– Routing
– SSR & CSR (Server side and client side) rendering
– Data Fetching (client side data fetching & server side data fetching)
– Global and Module styling

Tailwind CSS

– Introduction

Zustand in Next.JS

– Introduction
– creating state
– state updating
– state consuming

Figma for Developers

– Introduction

Deploying

– Introduction
– Vercel
– Netlify

Working on the final project

          Ментор.

          Front-end МЕНТОР

          Никола Ристоски

          Дипломиран информатичар, со завршена JavaScript академија и 3+ години искуство во светот на Front-end програмирањето. Специјалност му се JavaScript, React и Next.js.

          ЧПП.

          Како што можам да работам после завршување на академијата?
          • Front End Веб Девелопер
          • Веб Дизајнер
          • UX/UI Дизајнер
          Дали ќе се вработам после завршување на академијата?

          Вработувањето зависи од вашето заложување и посветеност кон академијата. Сите студенти кои успешно ќе ги завршат модулите на академијата, како и завршниот проект, ќе добијат пракса во соодветна ИТ компанија.

          Дали треба да имам некакво предзнаење за да станам програмер/тестер/маркетер?

          Нашите програми се наменети за апсолутни почетници кои се мотивирани да направат вистински исчекор кон кариерна промена. Програмите се изработени од ИТ компании кои имаат потреба од соодветен кадар, и истите ќе го пратат вашиот развој во текот на студирањето.

          Кои се условите на плаќање?

          Плаќањето може да биде во готово со 15% попуст, или на рати без камата соодветно на времетраењето на програмата (плус две рати, една пред почетокот и една после завршување на програмата).
          Поканете пријател и информирајте се за дополнителен buddy попуст!

          Дали предавањата се online и во кои термини?

          Секоја група има избор да одлучи дали сака предавањата да бидат online или во живо. Термините се исклучиво после 17 часот. Предавањата ќе бидат снимени, како студентите, би можеле поквалитетно да се навратат на тековниот материјал или да надополнат пропуштен час.

          CHANGE ACADEMY

          Аплицирај и резервирај го своето место.

          SPIN TO WIN!

          • Испобај си ја среќата за да добиеш ваучер за било која од нашите академии!
          • Едно вртење од маил.
          • Без мамење!
          Сврти го тркалото