Scribd
Upload
52 views3 pages

Front-End Training: 1. Day 1-2: HTML Introduction

This document outlines a 4-day training program on front-end technologies including HTML, CSS, JavaScript, jQuery, and Bootstrap. Day 1-2 cover HTML basics and elements. Day 3-4 introduce CSS for styling and positioning. Day 5-8 focus on JavaScript and jQuery for DOM manipulation and events. Day 9-10 teach Bootstrap components and responsive design. Exercises are provided to practice each day's topics. The goal is for trainees to build a simple responsive website using these front-end skills.

Uploaded by

Paul Gabriel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
52 views3 pages

Front-End Training: 1. Day 1-2: HTML Introduction

This document outlines a 4-day training program on front-end technologies including HTML, CSS, JavaScript, jQuery, and Bootstrap. Day 1-2 cover HTML basics and elements. Day 3-4 introduce CSS for styling and positioning. Day 5-8 focus on JavaScript and jQuery for DOM manipulation and events. Day 9-10 teach Bootstrap components and responsive design. Exercises are provided to practice each day's topics. The goal is for trainees to build a simple responsive website using these front-end skills.

Uploaded by

Paul Gabriel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like