2949 DOM courses

This is a step-by-step course including everything you need in order to get started and learn all the fundamental core concepts of web design and web development. In this course, learn how to build amazing interactive and dynamic websites using HTML, CSS, JavaScript, and jQuery.

A comprehensive web development course that will help you understand 'why' things work and not just 'how'. Learn to write better code to boost your website traffic; know how to precision fix and tweak behavior and performance; improve your market penetration and your margins. Everything you need to know about the Critical Rendering Path, AJAX, and HTTP is right here at your fingertips.

Sharpen your HTML, CSS, and JavaScript by working on a large variety of projects. In this course, we'll be working through a project a day using vanilla JavaScript. Over the next 50 days, you'll have 50 small, unique, DOM-oriented projects under your belt.

Welcome to a complete and in-depth JavaScript course. This is an all-in-one package that will take you from the very fundamentals of JavaScript, all the way to building a fully functional typing test app. You will learn modern JavaScript from the very beginning, step-by-step through practical and fun code examples, with the important theory about how JavaScript works behind the scenes.

Duration 5 Days 30 CPD hours This course is intended for This introductory-level, fast-paced course is for skilled web developers new to React who have prior experienced working HTML5, CSS3 and JavaScript. Overview Our engaging instructors and mentors are highly experienced practitioners who bring years of current 'on-the-job' experience into every classroom. Working in a hands-on learning environment, guided by our expert team, attendees will learn about and explore: A basic and advanced understanding of React components An advanced, in-depth knowledge of how React works A complete understanding of using Redux How to build, validate, and populate interactive forms How to use inline styles for perfect looking components How to test React components How to build and use components How to get control of your build process A deep understanding of data-driven modeling with props and state How to use client-side routing for pages in your apps How to debug a React application Mastering React is a comprehensive hands-on course that aims to be the single most useful resource on getting up to speed quickly with React. Geared for more experienced web developers new to React, this course provides students with the core knowledge and hands-on skills they require to build reliable, powerful React apps. After the first few modules, you?ll have a solid understanding of React?s fundamentals and will be able to build a wide array of rich, interactive web apps with the framework. The first module is an introduction to the new functionality in ECMAScript 6 (JavaScript). Client-side routing between pages, managing complex state, and heavy API interaction at scale are also covered. This course consists of two parts. In the first part of the course students will explore all the fundamentals with a progressive, example-driven approach. You?ll create your first apps, learn how to write components, start handling user interaction, and manage rich forms. We end the first part by exploring the inner workings of Create React App (Facebook?s tool for running React apps), writing automated unit tests, and building a multi-page app that uses client-side routing. The latter part of the course moves into more advanced concepts that you?ll see used in large, production applications. These concepts explore strategies for data architecture, transport, and management: Redux is a state management paradigm based on the Flux architecture. Redux provides a structure for large state trees and allows you to decouple user interaction in your app from state changes. GraphQL is a powerful, typed, REST API alternative where the client describes the data it needs. Hooks is the powerful, new way to maintain state and properties with functional components and the future of React according to Facebook. ES6 Primer (Optional) Prefer const and let over var Arrow functions Modules Object.assign() Template literals The spread operator and Rest parameters Enhanced object literals Default arguments Destructuring assignments Your first React Web Application Setting up your development environment JavaScript ES6 /ES7 Getting started What?s a component? Our first component Building the App Making the App data-driven Your app?s first interaction Updating state and immutability Refactoring with the Babel plugin transform-class-properties JSX and the Virtual DOM React Uses a Virtual DOM Why Not Modify the Actual DOM? What is a Virtual DOM? Virtual DOM Pieces ReactElement JSX JSX Creates Elements JSX Attribute Expressions JSX Conditional Child Expressions JSX Boolean Attributes JSX Comments JSX Spread Syntax JSX Gotchas JSX Summary Components A time-logging app Getting started Breaking the app into components The steps for building React apps from scratch Updating timers Deleting timers Adding timing functionality Add start and stop functionality Methodology review Advanced Component Configuration with props, state, and children ReactComponent props are the parameters PropTypes Default props with getDefaultProps() context state Stateless Components Talking to Children Components with props.children Forms Forms 101 Text Input Remote Data Async Persistence Redux Form Modules Unit Testing & Jest Writing tests without a framework What is Jest? Using Jest Testing strategies for React applications Testing a basic React component with Enzyme Writing tests for the food lookup app Writing FoodSearch.test.js Routing What?s in a URL? React Router?s core components Building the components of react-router Dynamic routing with React Router Supporting authenticated routes Intro to Flux and Redux Why Flux? Flux is a Design Pattern Flux implementations Redux & Redux?s key ideas Building a counter The core of Redux The beginnings of a chat app Building the reducer() Subscribing to the store Connecting Redux to React Intermediate Redux Using createStore() from the redux library Representing messages as objects in state Introducing threads Adding the ThreadTabs component Supporting threads in the reducer Adding the action OPEN_THREAD Breaking up the reducer function Adding messagesReducer() Defining the initial state in the reducers Using combineReducers() from redux React Hooks Motivation behind Hooks How Hooks Map to Component Classes Using Hooks Requires react 'next' useState() Hook Example useEffect() Hook Example useContext() Hook Example Using Custom Hooks Using Webpack with Create React App JavaScript modules Create React App Exploring Create React App Webpack basics Making modifications Hot reloading; Auto-reloading Creating a production build Ejecting Using Create React App with an API server When to use Webpack/Create React App Using GraphQL Your First GraphQL Query GraphQL Benefits GraphQL vs. REST GraphQL vs. SQL Relay and GraphQL Frameworks Chapter Preview Consuming GraphQL Exploring With GraphiQL GraphQL Syntax 101 . Complex Types Exploring a Graph Graph Nodes ; Viewer Graph Connections and Edges Mutations Subscriptions GraphQL With JavaScript GraphQL With React

Programming in HTML5 with CSS course description This course provides an introduction to HTML5, CSS3, and JavaScript. It is an entry point into both the Web application and Windows Store apps training paths. The course focuses on using HTML5 / CSS3 / JavaScript to implement programming logic, define and use variables, perform looping and branching, develop user interfaces, capture and validate user input, store data, and create well-structured application. What will you learn Create and style HTML5 pages. Use JavaScript. Style HTML5 pages by using CSS3. Use common HTML5 APLs in interactive Web applications. Create HTML5 Web pages that can adapt to different devices and form factors. Enhance the user experience by adding animations to the HTML5 page. Programming in HTML5 with CSS course details Who will benefit: Website developers. Prerequisites: HTML5 development fundamentals. Duration 5 days Programming in HTML5 with CSS course contents Overview of HTML and CSS Overview of HTML, Overview of CSS, Creating a Web Application by Using Visual Studio 2012. Hands on Exploring the Contoso Conference Application. Creating and Styling HTML5 Pages Creating an HTML5 Page, Styling an HTML5 Page. Hands on Creating and Styling HTML5 Pages. Introduction to JavaScript Overview of JavaScript Syntax, Programming the HTML DOM with JavaScript, Introduction to jQuery. Hands on Displaying Data and Handling Events by Using JavaScript. Creating Forms to Collect and Validate User Input Overview of Forms and Input Types, Validating User Input by Using HTML5 Attributes, Validating User Input by Using JavaScript. Hands on Creating a Form and Validating User Input. Communicating with a Remote Data Source Sending and Receiving Data by Using XMLHTTPRequest, Sending and Receiving Data by Using jQuery AJAX operations. Hands on Communicating with a Remote Data Source. Styling HTML5 by Using CSS3 Styling Text, Styling Block Elements, CSS3 Selectors, Enhancing Graphical Effects by Using CSS3. Hands on Styling Text and Block Elements using CSS3. Creating Objects and Methods by Using JavaScript Writing Well-Structured JavaScript, Creating Custom Objects, Extending Objects. Hands on Refining Code for Maintainability and Extensibility. Creating Interactive Pages using HTML5 APIs Interacting with Files, Incorporating Multimedia, Reacting to Browser Location and Context, Debugging and Profiling a Web Application. Hands on Creating Interactive Pages by Using HTML5 APIs. Adding Offline Support to Web Applications Reading and Writing Data Locally, Adding Offline Support by Using the Application Cache. Hands on Adding Offline Support to a Web Application. Implementing an Adaptive User Interface Supporting Multiple Form Factors, Creating an Adaptive User Interface. Hands on Implementing an Adaptive User Interface. Creating Advanced Graphics Creating Interactive Graphics by Using Scalable Vector Graphics, Programmatically Drawing Graphics by Using a Canvas. Hands on Creating Advanced Graphics. Animating the User Interface Applying CSS Transitions, Transforming Elements, Applying CSS Key-frame Animations. Hands on Animating User Interface Elements. Web Sockets for Real-Time Communications Introduction to Web Sockets, Sending and Receiving Data by Using Web Sockets. Hands on Implementing Real-Time Communications by Using Web Sockets. Creating a Web Worker Process Introduction to Web Workers, Performing Asynchronous Processing by Using a Web Worker. Hands on Creating a Web Worker Process.

This course is designed to help you master the concepts of JavaScript needed to create interactive web games. You will create five interesting word games that will teach you how to write and test the game code in JavaScript.

Are you interested to learn how to build user interface? Do you work as a user interface designer? If so, take a look at our Learn React 16 and Redux by building real world Application course. Its precise contents will help you in understanding all you need to know about React 16 and Redux effectively. React 16 is an updated JavaScript library works to build user interface in different stage. It provides you with effective mental model so that you can build astonishing user interface efficiently. The Learn React 16 and Redux by building real world Application course is designed to teach you the basic functions of React 16. It instructs you how to develop apps providing the knowledge with portals, context API, errors boundaries, and the use of less code to write. The course also introduces you to the important features of React such as user-friendly DOM to build UI design, different algorithm to test without starting a headless browser, and different framework for the development. However, the aim of the course is to teach you the core concepts of React to make you an efficient UI designer. What Will I Learn? Master the React Fundamentals Build Real world Applications with React and Redux Learn firebase with React and Redux Requirements Basic understanding of Javascript and HTML ES6+ JavaScript knowledge is beneficial but not a must-have Who is the target audience? Javascript developers who want to develop frontend applications with React Javascript developers who want to learn Redux with React Developers who want to integrate firebase with React and redux Getting Started VS Code Setup FREE 00:03:00 How to get source code for each lecture FREE 00:01:00 Create React App using create-react-app cli 00:02:00 Creating Nested React Elements 00:08:00 Creating Nested Elements in React 00:08:00 How React uses React Elements to Create Virtual DOM 00:01:00 What is DOM 00:03:00 What is Virtual DOM 00:05:00 Create Nested Components in React 00:05:00 Creating Components in React 00:06:00 Adding Props Validations in React Component 00:03:00 Create Nested Components in React 00:05:00 Create State in React Component.. 00:08:00 Update State using events and custom methods 00:08:00 Iterate Array and render the components 00:06:00 Pass function as props from Parent to Child Componenty 00:09:00 Convert React Components to JSX 00:09:00 Module Summary 00:01:00 Data Flow in React Components State in React Component 00:05:00 Shallow Merging with setState 00:06:00 Use props, PropTypes and defaultProps in React Component 00:06:00 Communicate with Parent and Child Component// 00:07:00 Module Summary 00:01:00 Component LifeCycle Methods in React What are LifeCycle Methods in React Component 00:01:00 Types and Phases of LifeCycle Methods 00:04:00 LifeCycle Mounting Methods in Action 00:09:00 LifeCycle Updating Methods in Action 00:07:00 Error Handling with componentDidCatch 00:08:00 Hacker news App - Building Components Setup React Application 00:03:00 Add Bootstrap to React Application 00:01:00 Create Mock Restful API with Json-Server 00:07:00 Send HTTP Request in React using axios 00:06:00 Iterate Array and render the components 00:06:00 Add Bootstrap Card to render List Items 00:07:00 Creating Header Component 00:06:00 Error Handling with Custom ErrorMessage Component 00:07:00 Adding Loading Spinner 00:04:00 React Context API Introduction to React Context API 00:04:00 React Context API in Action 00:16:00 Create Reducer to update the State in React Context 00:09:00 Create new Action to Handle Errors 00:02:00 Working with Forms in React Creating Controlled Component 00:03:00 Adding State to the Form 00:06:00 Save new record by sending Http Request 00:14:00 Creating Reusable Component for Input FormControl 00:07:00 Adding Form Validations in React and Bootstrap 00:08:00 Add Routing in React using React-Router Add Link Navigations using React-Router 00:04:00 Redirect after submitted new Record 00:01:00 Creating NotFound Component 00:02:00 Creating new Component to Edit the Record 00:14:00 State Management with Redux Setting up Redux into React application 00:10:00 Connect React Component to Redux 00:07:00 Delete the Record from the ReduxStore 00:07:00 Add Record to ReduxStore 00:05:00 Consuming Http Rest API using Async Action Creators Create Async Action to fetch records from the API 00:07:00 Create Async Action to delete records from the API 00:01:00 Create Async Action to add new Record 00:01:00 Async Action to fetch single record 00:09:00 Async Action to update the Link 00:04:00 Integrating React and Redux with Firebase Creating Database on Firebase 00:04:00 Fetching data from firebase collection in react component 00:12:00 Delete document from firebase collection with react 00:04:00 Add document in firebase collection with react 00:03:00 Update document from firebase collection 00:12:00 Firebase Authentication with React and Redux User Registration in React and Firebase 00:09:00 Logout User 00:15:00 User Login with Firebase and React 00:04:00 Apply Authentication on private Routes 00:07:00 Display error notification in React 00:06:00 Deploy React Application to Firebase 00:05:00 Bonus: ES6 crash course var scoping 00:04:00 understanding let 00:01:00 Examples of const 00:01:00 More use cases of let and const 00:04:00 Introduction to Arrow functions 00:02:00 Examples on Arrow functions 00:03:00 Javascript call, bind, apply 00:03:00 Destructring Objects 00:04:00 Destructring Arrays 00:03:00 Destructring Function Arguments 00:02:00 Course Certification

Dreamweaver training course description Dreamweaver is a web authoring program that allows you to build professional quality websites. This course starts with a tour of Dreamweaver and customising your workspaces, moving onto HTML and CSS basics. Page layouts, templates and interactive pages are also covered. The final session covers how to use Dreamweaver as a HTML editor. Hands on session follow all the major theory chapters. What will you learn Use Dreamweaver to create websites. Customise Dreamweaver. Use templates. Add interactivity to web pages. Use Dreamweaver to edit HTML code. Dreamweaver training course details Who will benefit: Anyone wishing to create or edit websites. Prerequisites: None. Duration 3 days Dreamweaver training course contents Getting started Installing the programme, Updating to the latest version,, Online content, On first launch, Choosing the program colour theme, Setting up the workspace, Defining a Dreamweaver site, Checking for updates, Additional resources. Customizing your workspace Touring the workspace, Using the start screen, Exploring new feature guides, Setting interface preferences, Switching and splitting views, Selecting a workspace layout, Personalising Dreamweaver, Working with extract, Creating custom keyboard shortcuts, Using the Property inspector, Using the Related Files interface, Using tag selectors, Using the CSS Designer, Using the Visual Media Query (VMQ) interface, Using the DOM viewer, Using Element dialogs, displays and inspectors, Setting up version control in Dreamweaver, Exploring experimenting and learning. HTML Basics What is HTML? Where did HTML begin? Frequently used HTML elements, What's new in HTML5. CSS Basics What is CSS? HTML vs. CSS formatting, HTML defaults, CSS box model, Applying CSS styling, Multiples, classes and ids. Web design basics Developing a new website, Scenario, Working with thumbnails and wireframes, Creating a page layout Evaluating page design options, Working with predefined layouts, Styling an existing layout, Styling elements using the Extract panel, Extracting text from a Photoshop mockup, Troubleshooting CSS styling, Extracting text styling from a Photoshop mockup, Creating a gradient background using Extract, Extracting image assets from a mockup, Adding CSS background effects in code, Finishing up the layout. Working with templates Creating a template from an existing layout, Inserting editable regions, Inserting editable regions, Inserting HTML entities, Inserting metadata, Validating HTML code, Producing child pages, Moving CSS styles to linked file, Updating a template. Working with text, lists and tables Previewing the completed file, Creating and styling text, Creating lists, Creating and styling tables, Spell-checking webpages, Finding and replacing text. Working with images Web image basics, Previewing completed files, Inserting an image, Controlling image positions with CSS classes, Working with the Insert panel, Using the Insert menu, Inserting non-web file types, Working with Photoshop Smart Objects, Copying and pasting images from Photoshop, Inserting images by drag and drop, Optimizing images with the Property inspector. Working with navigation Hyperlinks, previewing the completed file, creating internal and external hyperlinks, setting up email links, Creating image-based links, Targeting page elements, Locking an element on the screen, Styling a navigation menu, Checking your page, Adding destination links. Adding interactivity Dreamweaver behaviours, Previewing the completed file, Working with Dreamweaver behaviours, Working with jQuery Accordion widgets, Inserting a jQuery Accordion widget, Styling a jQuery Accordion. Publishing to the web Defining a remote site, Cloaking folders and files, Wrapping things up, Putting your site online, Synchronizing local and remote sites. Working with code Creating HTML code, multicursor support, commenting your code, Working with CSS preprocessors, Selecting code, Collapsing code, Expanding code, Accessing Split code view, Previewing assets in Code View.

CPD Certified | 19-in-1 Diploma Bundle | Free PDF & Transcript Certificate | New & Updated | 24/7 Learner Support