Welcome to the first episode in a series on creating a simple character in Blender. (http://blender.org)

Download reference images:
http://i.imgur.com/7LPDejZ.jpg (front)
http://i.imgur.com/Bjfeafn.jpg (side)

Download blender file:
http://www.blendswap.com/blends/view/77613

If you're struggling with this tutorial, try this series instead: https://youtu.be/ocLZNRasU64?list=PLFt_AvWsXl0djuNM22htmz3BUtHHtOh7v

FAQ:
Q: My background images won't show up after dragging them in.
A: Ensure that your view is properly aligned (press 1 on numpad to set view from front). You also need to be in orthographic (as opposed to perspective) view. You can toggle between ortho and perspective with 5 on the numpad. If, for whatever reason, simply dragging the images in does not work for you, you can also add them manually by pressing 'n' to open the properties panel, navigating to the 'Background Images' section near the bottom, and pressing "Add Image".

Q: Pressing the numbers only changes frame/layer.
A: You need to press the numbers on the numpad (as opposed to the top row of numbers). If your keyboard does not have a numpad, go into preferences and in the input tab check 'emulate numpad'.

If you'd like to support these videos, you can make a recurring monthly donation (cancellable at any time) through Patreon: http://bit.ly/sebPatreon
Or a once-off donation through PayPal:
http://bit.ly/SupportGamedevTutorials

Blender Character Creation: Modelling

In this video we will build a clean coded responsive mobile friendly HTML5 website for a fictional web design company. We will go over semantic HTML tags like header and footer as well as the basics of HTML and CSS. This is a great project for beginners.

Like this? Check out my 21 hour HTML/CSS course:
https://www.udemy.com/course/modern-html-css-from-the-beginning/?referralCode=EB0470C43F3C3E9AA306

CODE DOWNLOAD:
http://www.traversymedia.com/downloads/acme_website.zip

SUGGESTED VIDEOS: 
HTML Crash Course For Absolute Beginners - 
https://www.youtube.com/watch?v=UB1O30fR-EE
Product Landing Page (CSS Grid) - https://www.youtube.com/watch?v=61R5kn_kYwY&feature=youtu.be

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

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia

NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia

Build An HTML5 Website With A Responsive Layout

Check out my courses and become more creative!
https://developedbyed.com

My take on making a responsive navigation bar in 2018 with media queries and a sprinkle of animations and javascript. In this tutorial we are going to learn media queries, keyframe animations, basic javascript toggling, building a burger menu and more!

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.


-~-~~-~~~-~~-~-
Follow my Twitter:
https://twitter.com/DevEd94

Please watch: "Should You Become A Software Engineer?" 
https://www.youtube.com/watch?v=V_kTl0eIJ4A


-~-~~-~~~-~~-~-

Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT

BLACK FRIDAY SALE  40% OFF ALL COURSES 🔥🔥🔥
https://developedbyed.com/

USE COUPON: BF40

Today we will look on how to add pro 3d animations to your websites using blender and gsap for scroll animations. Apple did a popular effect similar to this using their airpods pro and everyone was really curious and impressed on how this was done.
This is a full length tutorial covering everything from scratch. Creating our 3D models in blender, animating them with the timeline and exporting a sequence of images ready to be animated with javascript and gsap.

📕Source code
https://github.com/developedbyed/3d-scroll-ball

🛴 Follow me on:
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #3d

How To Create PRO 3D WEBSITES Tutorial From Scratch

This is a beginner-friendly challenge where I attempt to code a basic version of the game Tic-Tac-Toe using JavaScript and the p5.js library. Code: https://thecodingtrain.com/challenges/149-tic-tac-toe

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/5JngATm3c

🎥 Previous video: https://youtu.be/YNyULRrydVI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/vEetoBuHj8g?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Videos:
🔴 Livestream Archive: https://youtu.be/Y6cMTh2BODY

Related Coding Challenges:
🚂 #77 Recursion: https://youtu.be/jPsZwrV9ld0
🚂 #154 Tic Tac Toe AI with Minimax Algorithm: https://youtu.be/trKjYdBASyQ
🚂 #163 Bézier Curves: https://youtu.be/enNfb6p3j_g

Timestamps:
0:00 Welcome!
0:54 Start coding
3:50 Drawing X and O
5:00 Let's diagram this!
8:46 Randomly choose the first player at the start of round
10:18 Drawing the grid
10:58 Each player places their symbol on a random spot
15:00 Check for a winner
18:44 Checking for equality of three elements
19:50 More bugs
21:01 Final Working Version! Show the winner
22:34 Thanks for watching!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#beginners #tictactoe #games #p5js

Coding Challenge #149: Tic Tac Toe

Check out Bookmark.com - https://goo.gl/mup5Av
Today's Question: Do you use any tools or plugins for CSS animations?
-- It's a lengthy one today! But a great one, because many of you ask me how to take your UI prototypes made in Adobe XD and make them a reality in the browser. Today, I'm delivering! We're going to create a large overlay menu (sometimes referred to as a "mega menu") first in Adobe XD, exactly as it should appear in the browser. Then, we'll step inside the code editor and make it a reality with HTML, CSS and vanilla JavaScript. 

So, instead of the usual formula of just covering an html tutorial, css tutorial, javascript tutorial, or adobe xd tutorial -- We're covering everything in mega tutorial!

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

My site:                                 https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

From Adobe XD Prototype to HTML, CSS & JS - Making an Animated Mega Menu

Projects are the best way to learn JavaScript, and a calculator is one of the best projects to choose. A calculator covers all the complex interactions with UI and JavaScript while still being simple enough for people of any skill level.

In this video I will walk you through the steps it takes to build a completely modern calculator using JavaScript best practices. If you want to learn JavaScript or improve your JavaScript skill this is a must do project.

📚 Materials:

Code: https://github.com/WebDevSimplified/Vanilla-JavaScript-Calculator

🧠 Concepts Covered:
 
- How to use ES6 classes to organize code
- How to sync JavaScript code with a UI
- CSS Grid
- Flexbox
- The best way to cleanly handle user input
- How to debug complicated edge cases

🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#JavaScript #WebDevelopment #Programming

Build A Calculator With JavaScript Tutorial

It's time to attempt to build a Flappy Bird clone in JavaScript with the p5.js! Code: https://thecodingtrain.com/challenges/31-flappy-bird

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/FtBc2BhHM

🎥 Previous video: https://youtu.be/KWoJgHFYWxY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🗄 Flappy Bird on Wikipedia: https://en.wikipedia.org/wiki/Flappy_Bird

Related Coding Challenges:
🚂 #41 Clappy Bird: https://youtu.be/aKiyCeIuwn4
🚂 #100 Neuroevolution Flappy Bird: https://youtu.be/c6y21FkaUqw
🚂 #147 Chrome Dinosaur Game: https://youtu.be/l0HoJHc-63Q

Timestamps:
0:00:00 Flappy Bird
0:00:51 Creating a Bird Object
0:02:38 Adding Simple Physics
0:06:25 Moving Up
0:08:13 Adding Obstacles
0:16:02 Collision Detection
0:19:45 Finishing The Game

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#flappybird #javascript #p5js