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