Lsokolowski1 at 18:24, 22 January 2026

2026-01-22T18:24:22Z

← Older revision		Revision as of 18:24, 22 January 2026
Line 2:		Line 2:


	;title: ~~Presentation Title~~		;title: Front End Developer Training
	;author: ~~Your Name~~		;author: Lukasz Sokolowski

Lsokolowski1 at 18:23, 22 January 2026

2026-01-22T18:23:57Z

← Older revision		Revision as of 18:23, 22 January 2026
Line 2:		Line 2:



	~~<!--~~
	~~<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >~~
	;title: Presentation Title		;title: Presentation Title
	;author: Your Name		;author: Your Name
	~~</slideshow>~~

	~~== First Slide ⌘==~~
	~~-->~~

	== Front End Developer Training Materials ==		== Front End Developer Training Materials ==

Pszlachta: /* Our Course Plan */

2022-10-03T12:10:26Z

Our Course Plan

New page

{{Cat|JavaScript}}



== Front End Developer Training Materials ==

{{Can I use your material}}

== AGENDA ==

# '''HTML & CSS'''
#* Fundamentals
#* Selectors, Cascade & Heritage
#* The Box Model
#* Positioning & Centering
#* Float, clear, Flexible Layouts & Liquid layouts
#* Text Formatting & Fonts
#* Backgrounds, images&Colours
#* Lists & Tables
#* HTML 5 & CSS3
#* CSS for Mobile
# '''JavaScript Basics'''
#* Introduction to JavaScript
#* JavaScript Code
#** Lexical Structure
#** Types Values Variables
#** Expressions and operators
#** Statements
#** Objects
#** Arrays
#** Functions
#** Classes & Modules
#** Regular Expressions
#* Client side JavaScript
#** JavaScript in Web Browsers
#** The Window Object
#** Scripting Documents
#** Scripting CSS
#** Handling Events
#** Scripted HTTP
#* Client side Storage
#* HTML5 APIs
# '''jQuery.js'''
#* jQuery Basics
#* jQuery Getters and Setters
#* Altering document structure
#* Events with jQuery
#* Animated Effects
#* Ajax with jQuery
# '''Bootstrap'''
#* Introduction to Bootstrap (Responsive design)
#* Bootstrap File Structure
#* The structure of the page (Grid system ...)
#* Typography, Forms, Symbols, Responsive images , thumbnails, colours and backgrounds ...
#* Components (Menus, Navigation Bars, Buttons, Modals ... )
#* Active Components
#* Bootstrap and LESS and node.js
#* JavaScript add-ons

== Our Course Plan ==
<pre>
DAY 1 -- HTML & CSS
Examples and Exercises:
- Flexbox "Dadesktop" website, show the drupal one and compare
- "Antyporn" website
--- improve it with html5
--- rewrite it into flexbox (-:

DAY 2 -- JAVASCRIPT
Examples and Exercises:
- Mostly materials from "js_part" folder
- "Antyporn" website
--- give it some dynamics (hide and show, when clicking), do it with pure js

DAY 3 -- JAVASCRIPT
Examples and Exercises:
- Rest of materials from "js_part" folder
- "Thud" game, drag&drop example (-:
--- d&d exercise, make "antyporn" website elements draggable (sidebars, header, footer)
- Additional exercises (see later slides here)

DAY 4 -- JQUERY
Examples and Exercises:
- Materials from "jq_part" folder
- "Antyporn" website
--- improve dynamics, simplify js with jquery

DAY 5 -- BOOTSTRAP
Examples and Exercises:
- "Antyporn" website
-- rewrite effects with CSS3 animations
-- make it pretty with Bootstrap3
</pre>

== HTML & CSS ==
Materials and Examples
https://training-course-material.com/training/HTML5_Introduction
https://training-course-material.com/training/HTML5_for_Beginners
https://training-course-material.com/training/HTML_Video
https://training-course-material.com/training/CSS_Selectors
https://training-course-material.com/training/HTML5_and_CSS3_responsive_web
https://training-course-material.com/training/Tworzenie_stron_internetowych_WWW
https://www.w3schools.com/css/css3_flexbox.asp
"css_part" folder
"dadesktop.com" example

=== Exercises ===
1. "css_part" folder
2. "Antyporn" website
2.1. Improve it with "html5"
2.1.1. header, nav, main, aside, footer
2.1.2. section, article
2.1.3. audio; make our song working in footer
2.2. Rewrite it into "flexbox" (-:

== JavaScript ==
Materials and Examples
https://training-course-material.com/training/Category:JavaScript
https://training-course-material.com/training/JavaScript
https://training-course-material.com/training/Typescript
https://www.w3schools.com/howto/howto_js_draggable.asp
https://stateofjs.com/
"js_part" folder

=== Exercises ===
1. "js_part" folder
2. "Antyporn" website
2.1. Give it some dynamics (hide and show, when clicking), do it with pure js
2.1.1. Replace main content with links from the menu
2.2. Try to rewrite these effects with "CSS3" animations
2.3. Make it's elements "draggable" (sidebars, header, footer)
3. Additional exercises:
<pre>
EXERCISE 1:
Create small website with simple user form:
- pesel field
- nip field
- date of birth field
Form should validate both pesel and nip.
Field date of birth should "automagically" get the date from pesel (-:)
Plan the solution (Design it first. Later divide issue into smaller steps).
</pre>

<pre>
EXERCISE 2:
Add dropdown field with UrzedySkarbowe:
1. Select field in html (template)
2. Get the data from xml file
2.1. Get file on the server
2.2. Read the data from the xml file
2.3. Get US names and codes from ajax response
2.3.1. Transform US codes into js array
2.3.2. Transform US names into js array
2.3.3. Combine these two arrays into one object (associative array)
3. Transform the data (php or js?)
4. Provide US for select form field
</pre>

== jQuery ==
Materials and Examples
https://www.w3schools.com/jquery/
"jq_part" folder

=== Exercises ===
1. "jq_part" folder
2. Improve/simplify "nip-pesel-govs" website with jQuery
3. "Antyporn" website
3.1. Improve dynamics, simplify js with jquery

== Bootstrap ==
Materials and Examples
https://training-course-material.com/training/Bootstrap_3_vs_4
https://training-course-material.com/training/CSS/JS/Bootstrap3_Development
https://www.sitepoint.com/build-simple-beginner-app-node-bootstrap-mongodb/
https://getbootstrap.com/docs/3.4/customize/
https://www.bootstrap-live-customizer.com/

=== Exercises ===
1. "Antyporn" website
1.1. Serve it from "node.js" via "express.js"
1.1.1. https://training-course-material.com/training/Express#Express_exercises
1.2. Make it pretty with "Bootstrap3"
1.2.1. Menu - navpills

Front End Developer - Revision history

Lsokolowski1 at 18:24, 22 January 2026

Lsokolowski1 at 18:23, 22 January 2026

Pszlachta: /* Our Course Plan */