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
- 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. This knowledge can be gained by attendance on the pre-requisite Introduction to Programming - JavaScript course.
Pre-Requisite Courses
Further Learning
Public Scheduled Events
Classroom & Live Virtual Instructor-Led Training
Duration: 5 days
Price: £2,475.00 exc. VAT
Live Virtual Classroom
All the convenience and benefits of the classroom experience without the hassle and costs of travel and accommodation.
Our Customers Include
Our Course Curriculum