Frontend developer

HTML and CSS (approx. 6 days)

HTML introduction

Basic framework

Tags for text creation (h1-h6, p, br, span)

Text format commands

Integrating graphics

Links (internal, external, phone, mailto link)

Favicons

Lists and tables

Correct syntax structure

Checking with W3C validation tool

CSS introduction

Integration options for CSS specifications (internal, external, inline style)

Basic commands (text design, font color, background color)

HTML containers

Use and styling of containers

Integration of YouTube and Google Maps

Video and audio player

Object-fit

VS Code (approx. 1 day)

Introduction to VS Code

Additional extensions for VS Code. (e.g. Live Server, Emmet Commands, Copilot (AI))

AI usage in combination with VS Code

Layout techniques (approx. 4 days)

Classes, IDs, selectors

Introduction box model

Padding, margin, border, border-radius and their shorthands

Flex-Box introduction

Layouts with flex box

Alignment with Flexbox

Introduction to Grid System

Layouts with Grid

Alignment with Grid System

Floating text around images with float and clear

General display properties of tags

Background images

Status and values (approx. 1 day)

Introduction of pseudo-classes (hover, active, focus, nth-child, first-child, last-child)

Pseudo elements (::before, ::after, content)

Specificity (value of codes)

Positioning (approx. 2 days)

Introduction to positions

Static, absolute, fixed, sticky, relative

Left, right, top, bottom, z-index

Dropdown menus

:target

:target in combination with navigation menus and modals

Forms (approx. 2 days)

Introduction to forms

Fieldset, legend

Inputs, textareas, labels, values, name, selects

Autocomplete

Form design with CSS

Integration of php-script in action with AI

Effects and fonts with CSS (approx. 1 day)

CSS transition effects

Transition, filter, transform

Color gradients, box-shadow, text-shadow

Font integration with @font-face

Responsive web design (approx. 2 days)

Introduction to responsive design

Media queries, breakpoints

Landscape, portait mode

Responsive images with picture and srcsets

Image editing, compression of images

Generating images with AI

Search engine optimization (approx. 1 day)

Introduction to SEO

On-page optimization and use of AI-generated texts

Performance optimization to improve SEO and presentation of suitable tools

CSS techniques and interaction (approx. 2 days)

CSS variables

Dark mode

Calculation with CSS

Introduction to CSS animations

Duration, delay, direction, timing-function, iteration-count, fill-mode

Animated burger button

One-pager and multilingualism (approx. 2 days)

Introduction One-Pager

Smooth-scroll

Integration of fontawesome library

Dealing with SVG graphics

Layer integration and CSS customization

Multilingual websites

Extensions and frameworks (approx. 1 day)

Introduction to Bootstrap

Use of Bootstrap components

Responsive design with Bootstrap

JavaScript (approx. 3 days)

Introduction to JavaScript

JavaScript/jQuery methods

Create jQuery Lightbox

Variables

If-else statements

Scroll, window, resize

arrays

For-loop

Math object

Legal requirements and project management (approx. 2 days)

Internet law

Copyrights in relation to AI/KI

Accessibility

Project management

Project work (approx. 10 days)

To consolidate the content learned

Presentation of the project results

JavaScript Basics (approx. 7 days)

Introduction to JavaScript, history, areas of application

ECMA script versions

Integration of JavaScript in HTML

IDE: Installation and introduction to WebStorm

Language elements: variables, constants, typing

Primitive data types: Number, String, Boolean

Collection data types: Arrays, objects

Copy by reference vs. copy by value

Arithmetic and logical operators

Control structures: conditions, loops, functions

Scope, global scope, block scope

Error handling

Local storage: cookies, web storage

JSON

ES6 import/export

Version control with Git, introduction to GitHub

DOM manipulation with JavaScript (approx. 5 days)

Selecting HTML

Content, attributes and styling

Events, event object, bubbling

Intersection observer and mutation observer

Creating, copying, moving and deleting DOM elements

Frameworks/Libraries (approx. 1 day)

Create your own library

AI (approx. 1 day)

Presentation of specific AI technologies in the professional environment

Artificial intelligence (AI) in the work process

Integration of AI in the IDE

Use of AI for code completion, refactoring and learning support

Project work (approx. 6 days)

To consolidate the content learned

Presentation of the project results

JavaScript deepening (approx. 5 days)

Canvas, drawing, animating

Spread syntax, destructuring

Creating objects with constructors, classes, factories

Inheritance of classes

Getters and setters, static methods

Fields, private fields

Prototyping

Map and set data types

Promise, concatenation, async-await syntax

Webworker

Extended data storage with IndexedDB

Ajax (approx. 1 day)

Introduction to

How it works

HTTP requests

Fetch()-API

Web services: JSON and XML

Communication with APIs

NodeJS (approx. 4 days)

Structure and installation

Built-in modules, custom modules, NPM

Upload to NPM

File type MD

Create web server (Express)

Own middleware

Fetch syntax for Ajax requests

Upload files to server

Real-time communication with websockets

Communication with noSQL database

Building your own REST APIs with Express

API endpoints: GET, POST, JSON handling

Insight into hosting (e.g. dedicated servers, managed hosting, cloud hosting)

Single Page Application React JS (approx. 1 day)

Introduction, theoretical consideration, installation

Virtual DOM

Expressions, state hook, effect hook

Components, nesting, parameter passing

User input, content update, event listener

Routing

Single Page Application VueJS (approx. 1 day)

Introduction, theoretical consideration

Virtual DOM

Integration, expressions, directives

Event listeners, data binding, methods

Own directives

Components, nesting

Routing

TypeScript (approx. 2 days)

Installation and application

Static typing

Dynamic data types

Complex data types

Decorators

Project work (approx. 6 days)

To consolidate the content learned

Presentation of the project results