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.
TARGET AUDIENCE:
Who will the Course Benefit? The Front-end Web Developer course is designed for those new to web development.
COURSE PREREQUISITES:
Requirements Delegates should have some previous programming experience or at least be familiar with programming concepts.
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 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
COURSE OBJECTIVE:
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.
FOLLOW ON COURSES:
Further Learning Intermediate JavaScript