Traversy Media
-
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:/
-
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
-
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
-
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.
-
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:
-
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
-
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
-
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
-
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
-
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
-
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://
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
29:54 Popular
Nodemailer - Send Emails From Your Node.js App
Added 119 Views / 0 LikesIn this video we will create a simple Node.js and Express app and implement the Nodemailer module to add a contact form. CODE: Complete Node app repo https://github.com/bradtraversy/nodecontactform ORIGINAL HTML/CSS FORM DOWNLOAD: http://www.traversymedia.com/downloads/responsiveform.zip INMOTION HOSTING SIGNUP: https://inmotion-hosting.evyy.net/c/396530/260033/4222 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TI
-
33:56
Awesome Split Screen Slider Using CSS3 & JavaScript
Added 100 Views / 0 LikesIn this video we will build a split screen slider using HTML, CSS3 and vanilla JavaScript. This slider was inspired by a Corsair website - http://www.corsair.com/en-eu/specalpha. It uses some advanced CSS but nothing too difficult, beginners should be able to follow along CODE: Codepen for this project https://codepen.io/bradtraversy/pen/NaKxdP BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://w
-
39:01 Popular
JavaScript DOM Crash Course - Part 1
Added 107 Views / 0 LikesThis crash course focuses on the DOM WITHOUT JQUERY. In this part we will talk about what the JavaScript DOM (Document Object Model) is and we will look at the different selectors like document.getElementById() document.getElementsByClassName() document.getElementsByTagName() document.querySelector() document.querySelectorAll() We will also look at how to change content and styles via these selectors CODE: Code for this video http://www.traversymedia.
-
21:21 Popular
JavaScript DOM Crash Course - Part 2
Added 102 Views / 0 LikesIn this video we will learn how to traverse and move around the DOM with properties like parentNode, parentElement, nextElementSibling and so on. We will also learn how to insert elements with createElement() and createTextNode() CODE: Code for this video http://www.traversymedia.com/downloads/domcrashcourse2.zip BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia COURS









