Front-End Training
1. Day 1-2: HTML Introduction
Prerequisites:
● Install Visual Studio 2017
● Create a simple HTML file
1.1 Structure of a HTML file
1.2 HTML 4 elements - head, body, div, span, h1-6, a, p, img, ul, ol, li, table, th, td, colspan, rowspan,
form, input, textarea
1.3 HTML 5 elements - header, footer, article, section, svg, canvas, audio, video
1.4 Practice: Create a simple page, based on the trainee’s thematic, containing some/all of the items
described at 1.2, 1.3
Reading:
https://www.w3schools.com/html/default.asp
Exercises:
https://www.codecademy.com/learn/learn-html
● Introduction to HTML ~ 2h
● HTML Document Standards ~ 2h
● Tables ~ 3h
Competencies:
● Be able to use Chrome’s Developer Tools to check the HTML structure
● Understand the basic concepts of markup language
● Understand the difference between HTML4 and HTML5 elements
2. Day 3-4: CSS Introduction
Prerequisites:
● HTML project created at 1.4
● MagiCSS
2.1 Introduction - What, How, When?
2.2 Text styling - color, font-family, font-size, font-weight, font-style, font-height, line-height, text-align,
text-decoration
2.3 Styling - width, height, background, shadow, border
2.4 Padding and margins
2.5 Display properties
2.6 Floats
2.7 Positioning - static, relative, absolute, fixed
2.8 Practice - Stylize the HTML page created at 1.4
Reading:
https://www.w3schools.com/css/default.asp
Exercises:
https://www.codecademy.com/learn/learn-css
● CSS Setup and selectors ~ 2h
● Visual Rules ~ 2h
● Box model ~ 3h
● Display and position ~ 3h
● Color ~ 1h
● Typography ~ 2h
Competencies:
● Understand how CSS is being applied to HTML elements
● Be able to create a simple HTML template and apply different visual effects based on
requirements
● Be able to use MagiCSS to customize the appearance of an HTML element
3. Day 5-8: Javascript/JQuery Introduction
Prerequisites:
● HTML project created at 2.8
3.1 Introduction - What, How, When?
3.2 Basics - string, number, boolean, objects, arrays, functions, arguments, context
3.3 Differences between Javascript and JQuery
3.4 Built-in Functions - length(), indexOf(), concat(), sort(), substr(), toString(), toLowerCase(),
toUpperCase()
3.5 JQuery Selectors
3.6 Attributes - class, id, href, title, src
3.7 Traversing - ul, ol, li; eq(), is(), not(), find(), child(), parent(), closest(), prev(), next()
3.8 CSS - css(), height(), width(), position(), scrollTop()
3.9 DOM - text(), clone(), apend(), prepend(), html()
3.10 Events - preventDefault(), on(), one(), ready()
3.11 AJAX - GET, POST
3.12 Practice - perform different actions on the “website” created at 2.8
Reading:
https://www.w3schools.com/js/default.asp
https://www.w3schools.com/jquery/default.asp
Exercises:
https://www.codecademy.com/learn/introduction-to-javascript
● jQuery Setup ~ 2h
● jQuery Effects ~ 2h
● CSS and jQuery - 2h
● Traversing the DOM - 2h
Competencies:
● Understand when Javascript/Jquery is needed
● Be able to use selectors to correctly identify a DOM element based on its id, class or other
criteria
● Be able to add/edit/duplicate/remove DOM elements
● Be able to change the style of DOM elements accordingly
● Be able to create AJAX requests in order to get/post data from/to the server
4. Day 9-10: Bootstrap 3
Prerequisites:
● Project created at 3.12
4.1 Layout - containers, grid, responsive breakpoints, z-index
4.2 Typography - headings, inline elements, alignments, blockquotes
4.3 Tables
4.4 Forms - inputs, buttons, dropdowns, dividers, tabs
4.5 Other components - breadcrumbs, pagination, labels, alerts, popover
4.6 Glyphicons
4.7 Modals
4.8 Carousel
4.9 Datepicker
Reading:
https://getbootstrap.com/docs/3.3/css/
https://getbootstrap.com/docs/3.3/javascript/
https://getbootstrap.com/docs/3.3/components/
Exercises:
● Integrate some/all of the bootstrap elements in the created project
Competencies:
● Understand the basic concepts of Bootstrap
● Be able to use form elements
● Be able to integrate glyphicons in various elements
● Understands the grid system and knows how to use it accordingly
● Be able to create modals
Extra stuff:
Nice to have:
4.10 Font Awesome
4.11 JQuery UI
