Front-End Web Developer Track

you'll create something that demonstrates your mastery of in-demand skills. By the end of this track, you’ll have all the skills required to build your own websites or even start a career with one of the thousands of companies that have a website.

DURATION:
120 hours

Address

INFORM, ALmaza   View map

Introduction to HTML and CSS

  • Define HTML and CSS
  • Add and change HTML tags
  • Modify CSS attributes
  • Learn the structural foundation of web pages and applications

HTML Basics

  • Semantic markup
  • Formatting page content
  • Understanding file paths
  • Displaying images
  • Inline vs. block level elements

CSS Basics

  • Basic Selectors
  • Common Values and Units
  • CSS Layout
  • New CSS Features

JavaScript Basics

  • What JavaScript is and where it is used
  • Basic programming concepts like variables, data types and conditional statements
  • What functions are and why they’re useful
  • How to troubleshoot programming problems
  • The basic syntax of the JavaScript programming language

CSS Layout Basics

  • Getting Started with CSS Layout
  • Controlling Layout with CSS Display Modes
  • Page Layout with the Float Property
  • CSS Layout Project
  • Positioning Page Content

Responsive Layouts

  • Responsive design theory
  • Media queries
  • Breakpoints
  • Page layout

CSS Flexbox Layout

Flexbox is a set of CSS properties that give you a flexible way to lay out content. With flexbox you can change the direction, alignment, size and order of elements, regardless of their original size and order in the HTML. You can even stretch and shrink elements and distribute space, all with just a few lines of CSS!

 HTML Forms

  • Forms
  • Input elements
  • Select menus
  • Radio buttons
  • Checkboxes

JavaScript Loops, Arrays and Objects

  • Loops
  • Arrays
  • Objects
  • DRY Programming

JavaScript and the DOM

  • What is the DOM?
  • Making Changes to the DOM
  • Responding to User Interaction
  • Travelling Through the DOM (Traversal)

CSS Selectors

  • Attribute selectors
  • Advanced pseudo-classes
  • Pseudo-elements

jQuery Basics

  • Event handling
  • Manipulating the DOM
  • DOM Traversal
  • jQuery Collections

Bootstrap 4 Basics

  • Working with components
  • Layout with the grid
  • Styling content
  • Building and laying out forms

Introduction to Front End Performance Optimization

  • Performance measurement
  • Reduce HTTP requests
  • CSS and JavaScript minification

HTML Tables

  • Table elements
  • Organizing tables

HTML Video and Audio

  • Video element
  • Audio element
  • Custom media players

AJAX Basics

  • AJAX Concepts
  • How to use JavaScript to make AJAX requests
  • How to use jQuery to make AJAX requests
  • How to process JSON with jQuery and JavaScript
  • How to use a 3rd party API with AJAX and jQuery

Object-Oriented JavaScript

  • Create your own objects with methods
  • Use constructors
  • Creating prototypes
  • Use prototypal inheritance

Web Accessibility Compliance

  • Accessibility at a Glance
  • NonVisual Desktop Access
  • WCAG 2.0
  • Semantic HTML
  • WAI-ARIA
  • Testing for Accessibility

Website Optimization

In this topic we’ll cover tools needed in keeping your website in top shape. These tools will help you perform tasks like debugging a problem to improving your page load times.