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

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

Purchase the full course here! 
https://developedbyed.com/

Today I will share with you the first 3-4 hours of The Creative HTML5 & CSS3 course.
In this free 2 chapters we will explore getting started with html and css from absolute scratch.
So if you are a beginner in web development or you just want to brush up your skills these two chapters will help you with that.
If you enjoy the content of this course, in the full version we will explore other things such as flexbox, css grid, sass and more. 
We will also build out 3 awesome projects using html and css from scratch!

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 me on:
Twitch: https://www.twitch.tv/developedbyed
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #css #html

Learn HTML5 and CSS3 For Beginners - Crash Course

Check out my courses here!
https://developedbyed.com/

#webdevelopment #css #javascript

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.


Today we are going to create an animated responsive navbar with html css and javascript. We are going to use flexbox to structure our navbar and css media queries to toggle the burger menu from desktop to mobile.

Rather than having a typical slide out navbar we are going to implement an expanding circle animation using clip-path.

If you are interested in learning/creating a responsive navbar then I highly recommend you downloading the starter files bellow.

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed


📕 Things covered in this video:
 
- How to create a responsive navbar
- Adding animation using clip-path
- Using CSS media queries

📔 Materials used in this video:

Starter Files: https://github.com/DevEdwin/navbar-circle-animation

🛴 Follow me on:

Twitter: https://twitter.com/deved94
Github: https://github.com/DevEdwin

🎵 Music:

Outro: 
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 
http://creativecommons.org/licenses/b...

Animated Responsive Navbar Tutorial

Check out my courses here!
https://developedbyed.com

In this mini crash course we are going to learn everything about Sass.
What Sass allows us to do is write alot of cool things that we would normally wouldn't be able to do in normal CSS.

With Sass we can create variables, use imports and partials to separate our css code into smaller chunks, we can use mixins to create small functions that allow us to reuse css code, nesting allows us to write children elements directly inside the parent element and much more!

We will also look at a tool called Live Sass Compiler which is going to take our scss code and convert it to regular css with autoprefixer.

If you are interested in learning more about css and sass then take the time to watch this sass crash course covered in 20 minutes!

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed
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.



📕 Things covered in this video:
 
- How to add sass compiler to our project
- How to link our sass to html
- Sass variables
- Mixins
- Nesting
- Extending
- Operators
- Partials and Imports

📔 Materials used in this video:

 VSCode

🛴 Follow me on:

Twitter: https://twitter.com/deved94
Github: https://github.com/DevEdwin

🎵 Music:

Outro: 
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 
http://creativecommons.org/licenses/b...

Learn Sass In 20 Minutes | Sass Crash Course

Explore the full course on Udemy (special discount included in the link): https://www.udemy.com/the-web-developer-bootcamp/learn/v4/?couponCode=WEBDEVBOOTCAMP_UYT

If you're ready to launch your career as a software engineer, check out my job-guaranteed bootcamp with Springboard: https://springboard.com/workshops/software-engineering-career-track/?utm_source=coltsteele&utm_medium=youtubedescription&utm_campaign=sec

Learn the basics of HTML, CSS, and JavaScript in this 4-part crash course for beginners.  Are you curious about web development, but not sure where to start?  Want to make your own websites? Should you learn JavaScript first?  Or is it better to start with HTML? It can be overwhelming. This course will help get you started in just 4 short videos.  Learn what each of the 3 frontend technologies is responsible for, see how they work together, and write your own code! Along the way, we will build a complete project that incorporates all three technologies. 

This course is for anyone, regardless of skill level. The only prerequisites are:
* Have a computer with Internet
* Commit 45 minutes of your time (does not have to be all at once)
* Brace yourself for photos of my grumpy cat

Part 1 of the Crash Course covers:
* What are HTML/CSS/JS? 
* How do the 3 technologies work together?
* Inspecting the HTML on an existing web page

Part 2 of the Crash Course covers:
* What are the steps to build an HTML document?
* Developer tools like Sublime Text
* Writing your own HTML tags
* HTML Attributes
* Creating the HTML of our project

Part 3 of the Crash Course covers:
* Selecting and styling elements with CSS
* Linking CSS to HTML documents
* Adding IDs to HTML to style later
* Adding CSS to our project

Part 4 of the Crash Course covers:
* Writing simple JavaScript code
* Adding scripts to HTML documents
* Selecting DOM Elements with JS
* Writing click event listeners
* Adding JS to our project, to make the image slideshow work.

Links mentioned in the video:
- The Front End Demo Codepen: https://codepen.io/Colt/pen/dJwGLQ

#HTML #CSS #JS #JavaScript #WebDevelopment #WebDev #Programming #Beginner #ColtSteele #LearnToCode #IHateHashtags

HTML/CSS/JS Crash Course Part 1

Learn more about my online job-guaranteed bootcamp here: https://rebrand.ly/coltsbootcamp Use the code "COLT" for a $500 scholarship.  Get the video code and exercise starter code here: https://codepen.io/collection/XMzgEL

The Ultimate CSS3 Flexbox Tutorial - Colt's Code Camp

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.

EVENT: WordCamp Europe, Paris, France, June 2017

SPEAKER: Morten Rand-Hendriksen, https://www.linkedin.com/in/mortenrandhendriksen/

SLIDES: https://www.slideshare.net/mor10/css-grid-changes-everything-about-web-layouts-wordcamp-europe-2017

PERMISSION: The original content of this video is under the Creative Commons Attribution license (reuse allowed).

ORIGINAL SOURCE: https://www.youtube.com/watch?v=txZq7Laz7_4&t=14s

Additional material for CSS learners:
https://amzn.to/2Tk6kBZ  CSS: The Definitive Guide: Visual Presentation for the Web https://amzn.to/2FgQcMI  A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer
https://amzn.to/2Ffp1ll      CSS in Depth
https://amzn.to/2FlKV6N   CSS Secrets: Better Solutions to Everyday Web Design Problems