1602start StayAhead Front-end Web Developer Training Course
 
 

Front-end Web Developer

Course Code: FWD

Duration: 5 days

 
 
 
 

Front-end Web Developer Course Overview

HTML, CSS, and JavaScript are the core languages of front-end web development. This course is designed to provide delegates with the knowledge and skills necessary to build and deploy stylish, dynamic websites/web apps that look good on any device.

Delegates will first learn how to construct and style responsive web pages with HTML and CSS. Then, delegates will learn how to make their web pages dynamic by exploiting JavaScript, the DOM, event handling, and Web APIs.

Exercises and examples are used throughout the course to give practical hands-on experience with the techniques covered.

NB: This course assumes ES6 as the baseline specification for JavaScript. This is because ES6 is now widely supported.

Course Objectives

This course aims to provide delegates with the skills and knowledge necessary to construct and style responsive HTML pages using the latest techniques. Delegates should also be able to make their web pages dynamic and interactive exploiting core JavaScript code and an understanding of the DOM and event handling.

Who will the Course Benefit?

The Front-end Web Developer course is designed for those new to web development.

Skills Gained

The delegate will learn and acquire skills as follows:

HTML & CSS

  • Build and deploy a simple website
  • Mark up and style text elements and lists
  • Create hyperlinks
  • Target elements for the purpose of styling
  • Structure content using semantic elements with a focus on accessibility
  • Embed and style images, audio, video, and other content
  • Organise data into and style tables
  • Build and style forms that make use of all modern input types
  • Lay out content using flexbox, grid, media queries, and more
  • Transform and animate content
  • Exploit CSS frameworks and preprocessors
  • Design a site according to UI/UX guidelines and optimise it for search engines and performance

JAVASCRIPT

  • Make use of built-in data types for managing data
  • Exploit functions to compartmentalise and re-use code
  • Manage program flow via conditions, loops, and error handling
  • Manipulate the DOM
  • Respond to the user via event handling
  • Make use of Web APIs such as Date, JSON, and LocalStorage

Front-end Web Developer Training Course

Course Introduction

  • Administration and Course Materials
  • Course Structure and Agenda
  • Delegate and Trainer Introductions

Session 1: INTRODUCTION TO HTML & CSS

  • Setting up the development environment
  • How the web works
  • HTML
  • Elements, tags, and attributes
  • HTML document structure
  • An introduction to mobile-first development
  • Special characters
  • Comments
  • CSS
  • Rules, selectors, and properties
  • Linking HTML and CSS
  • Chrome's Developer Tools
  • Publishing

Session 2: TEXT ELEMENTS

  • Headings and paragraphs
  • Other text elements
  • Styling text elements
  • CSS values and units
  • Web fonts
  • Unordered and ordered lists
  • Styling lists

Session 3: HYPERLINKS

  • Hyperlinks
  • URLs and paths
  • Document fragments
  • Email links
  • Styling links

Session 4: MORE CSS SELECTORS

  • Selectors (again)
  • Selector lists
  • Type, class, and ID selectors
  • Attribute selectors
  • Pseudo-classes and pseudo-elements
  • Combinators
  • The cascade, specificity and inheritance
  • At-rules

Front-end Web Developer Training Course

Session 5: STRUCTURING CONTENT

  • Block and inline elements
  • The box model
  • Styling boxes
  • Semantic elements
  • Line breaks and horizontal rules
  • An introduction to layout using CSS Grid

Session 6: MULTIMEDIA AND EMBEDDING

  • Images
  • Image formats
  • Figures and captions
  • Styling images
  • Background images
  • Video and audio
  • Media container formats
  • Video text tracks
  • Embedding content with iframe, embed, and object (briefly)
  • SVG
  • Icons

Session 7: TABLES

  • Table rows and cells
  • Headers
  • Spanning
  • Column groups
  • Captions
  • Semantic table tags
  • Styling tables

Session 8: FORMS

  • The purpose of forms
  • Forms
  • Labels and text boxes
  • Buttons
  • Styling forms
  • Sending form data to the server
  • Grouping form fields
  • Input types and attributes
  • Drop down boxes
  • Progress bars

Front-end Web Developer Training Course

Session 9: MORE LAYOUT

  • Normal flow
  • Floats
  • Positioning
  • Flexbox
  • Multi-column layout
  • Grid
  • Responsive design
  • Media queries
  • Feature queries
  • Responsive media
  • Intrinsic layout patterns

Session 10: MORE CSS PROPERTIES

  • Rounded corners
  • Multiple backgrounds
  • Gradients
  • Shadows
  • Text effects
  • Transforms
  • Transitions
  • Animations
  • And more...

Session 11: CSS FRAMEWORKS AND PREPROCESSORS

  • CSS frameworks
  • The pros and cons of CSS frameworks
  • Popular CSS frameworks
  • CSS preprocessors
  • CSS preprocessor features
  • Popular CSS preprocessors
  • CSS's var function

Session 12: INTRODUCTION TO UI/UX DESIGN, SEO, & PERFORMANCE OPTIMISATION

  • UI/UX design
  • UI/UX design guidelines and best practices
  • Search Engine Optimisation (SEO)
  • HTML tags that are important for SEO
  • SEO best practices
  • Website performance optimisation

Front-end Web Developer Training Course

Session 13: INTRODUCTION TO JAVASCRIPT

  • Setting up the development environment
  • What is JavaScript?
  • HTML and CSS - a brief refresher
  • Embedding JavaScript in HTML
  • Executing JavaScript with NodeJS
  • Browser JS vs. NodeJS
  • A simple example
  • Syntax and comments
  • ECMAScript and JavaScript
  • Deployment

Session 14: VALUES, VARIABLES AND TYPES

  • Values
  • Variables
  • var, let, and const
  • Naming conventions
  • Numbers
  • Strings
  • Booleans
  • Arrays
  • Objects
  • The typeof operator
  • Dynamic typing
  • Type conversion and coercion
  • Arithmetic
  • Handling text incl. template literals

Session 15: FUNCTIONS

  • Function declarations
  • Parameters
  • Return statements
  • Function expressions
  • Arrow functions
  • Declaration, expression, or arrow function?
  • Calling functions
  • Pass by value or reference?
  • An introduction to scope
  • Default parameters
  • Built-in functions

Session 16: PROGRAM FLOW

  • Relational and logical operators
  • Equalty comparisons and sameness
  • Truthy and falsey
  • Conditional statements
  • Iterative statements
  • Error handling
  • Debugging

Front-end Web Developer Training Course

Session 17: OBJECTS

  • Objects (again)
  • Properties
  • Dot notation
  • Square bracket notation
  • Function properties (methods)
  • The this keyword
  • Iterating over object properties
  • The Object type
  • Array objects and methods
  • String objects and methods

Session 18: DOM REFERENCING AND MANIPULATION

  • HTML elements and JavaScript objects
  • The DOM
  • DOM referencing
  • DOM data types
  • Element manipulation
  • Creating, adding and removing elements

Session 19: EVENT HANDLING

  • Events
  • Event propagation
  • Event listeners
  • Event listener registration
  • The event object

Session 20: WEB APIS

  • What is an API?
  • Browser APIs
  • Accessing browser APIs
  • Date
  • Math
  • RegExp
  • JSON
  • Client-side storage
  • Geolocation
  • Others
Notes:
  • Course technical content is subject to change without notice.
  • Course content is structured as sessions, this does not strictly map to course timings. Concepts, content and practicals often span sessions.

Requirements

Delegates should have some previous programming experience or at least be familiar with programming concepts.

Pre-Requisite Courses

Further Learning

Public Scheduled Events

Classroom & Live Virtual Instructor-Led Training

Duration: 5 days

Price: £2,475.00 exc. VAT 


Start Date Options Spaces  
04 Mar 2024
StayAhead Virtual Courses available 
Spaces Book Now 
29 Apr 2024
StayAhead Virtual Courses available 
Spaces Book Now 
03 Jun 2024
StayAhead Virtual Courses available 
Spaces Book Now 
15 Jul 2024
StayAhead Virtual Courses available 
Spaces Book Now 
02 Sep 2024
StayAhead Virtual Courses available 
Spaces Book Now 
28 Oct 2024
StayAhead Virtual Courses available 
Spaces Book Now 
09 Dec 2024
StayAhead Virtual Courses available 
Spaces Book Now 
 

Live Virtual Classroom

 
Join live instructor-led classroom training from the comfort of your home or office.
All the convenience and benefits of the classroom experience without the hassle and costs of travel and accommodation.
 
 



Our Customers Include

 
EDF
Amazon
American Express
Aviva
QA
BAE
University of Cambridge
Barnardo's
Scottish Government
Bauer
Bloomberg
BP
HSBC
DVLA
GlaxoSmithKline
Government Campus
Capita
Tui
NHS
Ordnance Survey
Ministry of Defence
Zurich Insurance Group
trainline
Vodafone
 
 



Our Course Curriculum

 
 
 
+44 (0)20 7600 6116
Enquiries@StayAhead.com
Copyright © 2024 StayAhead Training Ltd
Cookies   /   Privacy Policy