Traversy Media
-
29:31
Intro to Anime.js - The JavaScript Animation Engine
Added 81 Views / 0 LikesIn this video we are going to look at the Anime.js JavaScript animation engine to create a simple app with some element animation that we can play/pause CODE: Code for this video https://github.com/bradtraversy/animiesample DOCS: https://github.com/juliangarnier/anime BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia COURSES & MORE INFO: http://www.traversymedia.com F
-
31:27
Create a Modal With HTML, CSS & JavaScript
Added 85 Views / 0 LikesIn this video we will be creating a modal from scratch using HTML, CSS and JavaScript. You see these a lot with frameworks like Bootstrap but here we will create our own custom modal. CODE: Code for this video https://codepen.io/bradtraversy/pen/zEOrPp BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.traversymedia.com http://www.face
-
24:07 Popular
LoopBack REST API with Authentication
Added 125 Views / 0 LikesIn this video we will explore the LoopBackJS API framework for Node.js. We will create a REST API with user authentication endpoints. We will be installing the MongoDB connector as well. OFFICIAL SITE & DOCS: https://loopback.io/ COMMANDS: http://www.traversymedia.com/downloads/loopbackcommands.txt BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDI
-
30:54 Popular
Fetch API Introduction
Added 125 Views / 0 LikesIn this video we are going to take a look at the fetch API for making requests and fetching resources. This is an introductory based tutorial. We will create a fetch API sandbox to get data from local resources as well as a remote API CODE: Code for this video http://www.traversymedia.com/downloads/fetchsandbox.zip BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia COU
-
1:09:43 Popular
AJAX Crash Course (Vanilla JavaScript)
Added 108 Views / 0 LikesIn this video we will dive into AJAX with Vanilla JS and NO JQUERY. We will examine the XHR object and how it works. This is a beginner friendly tutorial for anyone that has very basic JavaScript knowledge. We will make xhr requests to a txt file, local json files, an external API and even PHP files. CODE: Files for this course http://www.traversymedia.com/downloads/ajaxcrash.zip BECOME A PATRON: Show support & get perks! http://www.patreon.com/traver
-
44:39 Popular
Build a Useful Wordpress Widget Plugin
Added 105 Views / 0 LikesIn this video we will build a Wordpress widget plugin for displaying a YouTube channel subscriber button. It will have backend options to change the channel, the layout and the option to show the subscriber count. CODE: Code for this widget https://github.com/bradtraversy/youtubesubs BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.f
-
53:04 Popular
Build A Bootstrap 4 Theme | Latest Beta Version
Added 141 Views / 0 LikesThis is a full Bootstrap 4 Beta project which is a theme called LoopLab. This is from my premium Udemy course. It uses many of the new version 4 classes and utilities including flexbox. FULL COURSE: ONLY $10! https://www.udemy.com/bootstrap-4-from-scratch-with-5-projects/?couponCode=YOU_TUBE BOOTSTRAP 4 STARTER PACK: https://github.com/bradtraversy/bs4starter PROJECT FILES: http://www.traversymedia.com/downloads/looplab.zip BECOME A PATRON: Show suppo
-
38:27
Sass Workflow & Dev Server From Scratch Using Gulp
Added 85 Views / 0 LikesIn this video we are going to build the "Sass Starter Pack" which is a complete Sass workflow and dev server and environment using Gulp, the Gulp-Sass plugin and BrowserSync. Then well mess with it a little bit and create a simple little project. Feel free to use this starter pack in future Sass projects SASS STARTER PACK GITHUB: https://github.com/bradtraversy/sass_starter_pack CHECK OUT THE NEW DISCORD SERVER:https://discord.gg/PCb6PaM BECOME A PATR
-
26:08 Popular
Connecting Firebase to a Contact Form
Added 122 Views / 0 LikesIn this video we will take the responsive contact form we built in the last video and hook it up to a firebase backend to store submissions in a firebase database. VIDEO TO CREATE FORM FRONT-END: https://www.youtube.com/watch?v=Sb5qOa3R4hY INITIAL CODE: Form frontend http://www.traversymedia.com/downloads/responsiveform.zip FINAL CODE: With firebase https://github.com/bradtraversy/firebasecontact BECOME A PATRON: Show support & get perks! http://www.p
-
29:42 Popular
Mobile First Responsive Contact Form Featuring Grid CSS
Added 137 Views / 0 LikesIn this tutorial we will be building a responsive mobile first contact form using HTML and CSS. We will use CSS3 styling along with a bit of Grid CSS layout. Well also throw in some icons from font awesome and a simple entry animation using animate.css. This will be the front-end UI. We will implement the back end to capture the data in a later video. PART 2 - IMPLEMENTING FIREBASE! https://www.youtube.com/watch?v=PP4Tr0l08NE CODE: Code for this proje
-
10:23
Build a Sails.js App [Part 4] - Edit & Delete Articles
Added 93 Views / 0 LikesIn part 4 of 4 we will finish up CRUD functionality with the edit and delete methods. CODE: Code for this project https://github.com/bradtraversy/articlebase BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia
-
12:58 Popular
Build a Sails.js App [Part 3] - Article List & Add Pages
Added 137 Views / 0 LikesIn part 3 of 4 we will create the article list page to list articles in a table. We will also create the form to add articles to MongoDB CODE: Code for this project https://github.com/bradtraversy/articlebase BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.in
-
12:51 Popular
Build a Sails.js App [Part 2] - MongoDB Adapter & Homepage
Added 110 Views / 0 LikesIn part 2 of 4 we will implement the sails-mongo MongoDB adapter and build our homepage view using EJS CODE: Code for this project https://github.com/bradtraversy/articlebase BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia
-
14:04 Popular
Build a Sails.js App [Part 1] - Sails & API Setup
Added 101 Views / 0 LikesIn this 4-part mini-series we will put together a CRUD application using the Sails.js MVC framework along with MongoDB as our database. We will also build the UI using Bootstrap 4 Beta. In this video we will setup Sails and the api for articles. CODE: Code for this project https://github.com/bradtraversy/articlebase BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FO
-
22:38 Popular
Easy Fullscreen Landing Page With HTML & CSS
Added 111 Views / 0 LikesIn this small project I will show you how to create a simple HTML/CSS landing page with a fullscreen image in the background. We will also use a little bit of flexbox styling. CODE: Code for this project https://codepen.io/bradtraversy/pen/XerXYV SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY ME
-
1:15:02
Ionic 3 Mobile Weather App Build
Added 96 Views / 0 LikesIn this project we will build a fully working mobile weather app using Ionic 3 and Angular 4. We will be using the API from wunderground.com. we will create a provider to reach out to the API and return and display the data. We will also implement Ionic storage to save the location data. CODE: Code for this project https://github.com/bradtraversy/iweather SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa ANGULAR 4 FRONT TO BACK: FOR $10! https://
-
35:35 Popular
Emmet For Faster HTML & CSS Workflow
Added 111 Views / 0 LikesIn this video we will look at Emmet as a web development tool for creating faster HTML and CSS using abbreviations. We will cover the basics and look at nesting, siblings, multiplication and more. We will be using the Atom text editor but Emmet is available for almost all popular text editors and IDEs CODE: Code for this video http://traversymedia.com/downloads/emmetsandbox.zip EMMET CHEAT SHEET: https://docs.emmet.io/cheat-sheet/ https://github.com/e
-
06:45
Bootstrap 4 Udemy Course Preview & Coupon
Added 96 Views / 0 LikesIn this video I will go over my new Bootstrap 4 course which has 10.5 hours of content and 5 real world projects including beautiful themes and UIs. As subscribers you get the $50 course for just $15. Make sure you use the link below 70% OFF COUPON - Get it for $15 https://www.udemy.com/bootstrap-4-from-scratch-with-5-projects/?couponCode=YOUTUBE
-
30:30
Create Particle Effects With Particles.js
Added 98 Views / 0 LikesIn this tutorial we will be looking at the Particle.js JavaScript library which allows us to create really cool particle systems and effects. We will configure things like number of particles, colors, movement, interactivity and more. We will also build a login box over the particle js canvas. CODE: Code for this project http://www.traversymedia.com/downloads/particleslogin.zip SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa BECOME A PATRON: Sh
-
13:04
Mobile Apps - Web vs. Native vs. Hybrid
Added 91 Views / 0 LikesIn this presentation we will examine the pros and cons of the different types of mobile apps that you can build. We will look at web, native and hybrid mobile apps and compare things like performance, price, difficulty to maintain, etc SPONSORS: ZEQR - https://www.zeqr.com MEGA MOBILE COURSE: https://www.eduonix.com/affiliates/id/16-10474 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.pay
-
27:55 Popular
CSS Grid Layout Crash Course
Added 106 Views / 0 LikesIn this video we will look at the new CSS Grid layout and how to create grid based layouts and alignments. We will look at properties for containers and items. CODE: Code for this tutorial http://www.traversymedia.com/downloads/cssgrid.zip BUILD A CSS GRID WEBSITE: https://www.youtube.com/watch?v=moBhzSC455o BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRA
-
12:04 Popular
Building a GraphQL Server [Part 5] - Mutations
Added 136 Views / 0 LikesIn part 5 of 5 of this series we will create all of our mutations to add, delete and edit customers. We will run the mutations via Graphiql IDE CODE: Code for this project https://github.com/bradtraversy/customerbase BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http:
-
08:20 Popular
Building a GraphQL Server [Part 4] - JSON Server & Axios
Added 102 Views / 0 LikesIn part 4 of 5 of this series we will move away from hardcoded data and implement JSON-server which gives us a mock REST API. We will also install Axios to make our requests. CODE: Code for this project https://github.com/bradtraversy/customerbase BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.
-
15:13 Popular
Building a GraphQL Server [Part 3] - RootQuery & Fetching Data
Added 112 Views / 0 LikesIn part 3 of 5 of this series we will be creating the RootQuery in our schema.js file as well as creating the CustomerType. We will be able to fetch hardcoded customers via Graphql IDE by the end of the video CODE: Code for this project https://github.com/bradtraversy/customerbase BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.face
-
10:12 Popular
Building a GraphQL Server [Part 2] - Server & Express GraphQL Setup
Added 130 Views / 0 LikesIn part 2 of 5 we will install express, express-graphql and we will create an initial dev server to run on our machine. We will create the server.js file and start the main schema.js file CODE: Code for this project https://github.com/bradtraversy/customerbase BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedi
-
07:34 Popular
Building a GraphQL Server [Part 1] - What Is GraphQL?
Added 116 Views / 0 LikesIn part 1 of 5 of this series we will talk about what GraphQL is, what it is used for and we will also look at some of the queries and how simple they are. We will also talk about what to expect in the next few videos CODE: Code for this project https://github.com/bradtraversy/customerbase BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http:/
-
20:17 Popular
Getting Started With Animate.css
Added 106 Views / 0 LikesIn this video I will show you how to implement Animate.css which is a very easy way to add some animation to your websites and UIs. It is as simple as applying a class. Ill also how you how to trigger animations using JS and jQuery. CODE: Code for this video https://codepen.io/bradtraversy/pen/BwBjEK BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY ME
-
32:21
Build a Chat App With MongoDB & Socket.io [Part 2]
Added 97 Views / 0 LikesThis is the second part of the chat application with Node.js, MongoDB and Socket.io. In this video we will build out the UI using Bootstrap 4 as well as the client side JavaScript CODE: Code for this project https://github.com/bradtraversy/mongochat MongoDB 12 Project Course: Please use this link :) https://www.eduonix.com/affiliates/id/16-10219 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://
-
20:54 Popular
Build a Chat App With MongoDB & Socket.io [Part 1]
Added 140 Views / 0 LikesIn this 2 part series we will be building a simple Node.js chat application that uses a MongoDB database to store messages and Socket.io for bi-directional communication. Although this is a simple app, the code is a bit advanced but I do try and explain things the best I can. We will build the Node server in this video CODE: Code for this project https://github.com/bradtraversy/mongochat MongoDB 12 Project Course: Please use this link :) https://www.e
-
18:52 Popular
Animate Your Font Awesome Icons With JavaScript
Added 106 Views / 0 LikesIn this video we will create some animated font-awesome effects using vanilla JavaScript setTimeout and setInterval function. This is a simple project but I thought a cool one to share. I am really liking creating things with plain JS lately. CODE: Code for this video http://www.traversymedia.com/downloads/animicons.zip BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedi









