Course description
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.
Who will the Course Benefit?...
Who will the Course Benefit?The Front-end Web Developer course is designed for those new to web development.
Course ObjectivesThis 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.
Upcoming start dates
Suitability - Who should attend?
Delegates should have some previous programming experience or at least be familiar with programming concepts.
Experience to the level as demonstrated in this course is recommended:
- Introduction to Programming - JavaScript
Training Course Content
Front-end Web Developer Training Course
Course Contents - DAY 1
Course Introduction- Administration and Course Materials
- Course Structure and Agenda
- Delegate and Trainer Introductions
- 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
- Headings and paragraphs
- Other text elements
- Styling text elements
- CSS values and units
- Web fonts
- Unordered and ordered lists
- Styling lists
- Hyperlinks
- URLs and paths
- Document fragments
- Email links
- Styling links
- Selectors (again)
- Selector lists
- Type, class, and ID selectors
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Combinators
- The cascade, specificity and inheritance
- At-rules
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
- 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
- Table rows and cells
- Headers
- Spanning
- Column groups
- Captions
- Semantic table tags
- Styling tables
- 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
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
- Rounded corners
- Multiple backgrounds
- Gradients
- Shadows
- Text effects
- Transforms
- Transitions
- Animations
- And more...
- CSS frameworks
- The pros and cons of CSS frameworks
- Popular CSS frameworks
- CSS preprocessors
- CSS preprocessor features
- Popular CSS preprocessors
- CSS's var function
- 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
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
- 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
- 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
- Relational and logical operators
- Equalty comparisons and sameness
- Truthy and falsey
- Conditional statements
- Iterative statements
- Error handling
- Debugging
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
- HTML elements and JavaScript objects
- The DOM
- DOM referencing
- DOM data types
- Element manipulation
- Creating, adding and removing elements
- Events
- Event propagation
- Event listeners
- Event listener registration
- The event object
- What is an API?
- Browser APIs
- Accessing browser APIs
- Date
- Math
- RegExp
- JSON
- Client-side storage
- Geolocation
- Others
Customer Outreach Award
We believe that it should be easy for you to find and compare training courses.
Our Customer Outreach Award is presented to trusted providers who are excellent at responding to enquiries, making your search quicker, more efficient and easier, too.
Continuing Studies
Further Learning
- Intermediate JavaScript
Request info
Why StayAhead. From a single person on a scheduled course to large scale training projects StayAhead Training have the expertise and experience to help. Established since 1992, StayAhead Training is recognised as one of the leading independent IT Training specialists...