Front-end Web Developer (FWD)

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.

Front-end Web Developer Training Course

Course Contents - DAY 1

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

Course Contents - DAY 2

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

Course Contents - DAY 3

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

Course Contents - DAY 4

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

Course Contents - DAY 5

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

Further Learning

• Intermediate JavaScript

Requirements

Delegates should have some previous programming experience or at least be familiar with programming concepts. This knowledge can be gained by attendance on the pre-requisite Introduction to Programming - JavaScript course.

Who will the Course Benefit?

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