Front End Developer

From Training Material
Jump to navigation Jump to search
Category:JavaScript



Front End Developer Training Materials

AGENDA

  1. 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
  2. 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
  3. jQuery.js
    • jQuery Basics
    • jQuery Getters and Setters
    • Altering document structure
    • Events with jQuery
    • Animated Effects
    • Ajax with jQuery
  4. 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

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

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:

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).

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

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
Retrieved from ‘https://training-course-material.com/index.php?title=Front_End_Developer&oldid=86204’