Home
Videos uploaded by user “LearnWebCode”
CSS Absolute and Relative Positioning Tutorial
 
06:56
In this CSS tutorial we cover both absolute and relative positioning and how the two interact with each other. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 213464 LearnWebCode
Git Tutorial Part 1: What is Version Control?
 
09:36
Part 2 will be posted Thursday. If you already know Git, don't worry, a brand new "JSON & AJAX" video will be up next Tuesday. Link to full course with coupon: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Views: 98566 LearnWebCode
CSS Box Model Tutorial - Padding, Margin, and Border
 
04:15
In this CSS video tutorial we cover the basics of padding, margin, and border (box model). Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 71691 LearnWebCode
Z-Index CSS Tutorial
 
07:33
In this tutorial we learn what the z-index property is used for. Check out my premium 9 hour web design video course: https://www.udemy.com/web-design-for-beginners-real-world-coding-in-html-css/?couponCode=YOUTUBE-HALF-OFF Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 67382 LearnWebCode
Viewport Units Tutorial: The Magical CSS Unit of Measurement
 
11:03
My front-end course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL We know about pixels and percentages, but what about viewport units? Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Views: 15382 LearnWebCode
CSS Display Property Tutorial
 
09:40
In this video we learn about the CSS property "display." We take a look at the most common values and their typical uses in web pages. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 54184 LearnWebCode
Flexbox Tutorial (CSS): Real Layout Examples
 
28:46
Learn how to use Flexbox to create different layouts. Link to my new "Git a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Link to code used in this video: http://codepen.io/anon/pen/VKxRoE?editors=1100 Link to more about browser support: http://caniuse.com/#feat=flexbox Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Views: 463313 LearnWebCode
How to Center an Image Horizontally (CSS & HTML Tutorial)
 
04:03
In this video we look at two of the most popular techniques to center images. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 90602 LearnWebCode
What is Object-oriented Programming? (JavaScript Tutorial)
 
18:57
My front-end course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL I'll be releasing two brand new JavaScript courses in 2018; join my newsletter to be notified as soon as they launch: https://learnwebcode.com/ Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Views: 157658 LearnWebCode
Learn CSS (Tutorial) - Basics + Selectors (For Absolute Beginners)
 
09:52
In this video we learn how to add basic styles to a page with CSS. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF You can also view this same lesson material in written form: http://learnwebcode.com/what-is-css/ http://learnwebcode.com/how-to-create-your-first-css-file/ http://learnwebcode.com/basic-css-selectors/ Topics covered in this video: Linking to an external style sheet CSS Syntax Type Selectors ID Selectors Class Selectors Descendant Selectors Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 201820 LearnWebCode
WordPress get_template_part Tutorial
 
08:57
My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL In this lesson we learn how to use the "get_template_part()" function to avoid repeating code throughout our theme files. To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/wordpress-get_template_part-theme-development-tutorial/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 82046 LearnWebCode
WordPress Custom Homepage Tutorial
 
07:53
My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL Learn how to setup a custom (or static) homepage in WordPress. This involves creating WP pages, adjusting a few simple settings, and using a special page template. Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/wordpress-setup-custom-static-homepage/ To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 296896 LearnWebCode
WordPress Tutorial 1: Introduction
 
13:10
Updated video on getting started with WordPress Development: https://www.youtube.com/watch?v=FVqzKAUsM68 My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL This is the beginning of a series on WordPress. In this initial lesson we learn what WordPress is, why it's useful, and get a feel for what we'll learn in upcoming lessons (admin screens, custom theme development). Watch the full playlist for this WordPress series: https://www.youtube.com/playlist?list=PLpcSpRrAaOaqMA4RdhSnnNcaqOVpX7qi5 To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 2170529 LearnWebCode
WordPress Custom Loop WP_Query Tutorial
 
15:22
My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL Learn about WP_Query and create custom loops in any WordPress theme file. To learn about everything that WP_Query is capable of check out the official WordPress documentation: http://codex.wordpress.org/Class_Reference/WP_Query Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/wordpress-custom-loop-wp_query-tutorial/ To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 105200 LearnWebCode
How to Insert an Image in a Webpage (HTML / XHTML)
 
03:21
In this video we learn how to insert an image into a web page by hand, using HTML code. Check out my 9 hour web design video course: https://www.udemy.com/web-design-for-beginners-real-world-coding-in-html-css/?couponCode=YOUTUBE-HALF-OFF You can also view this lesson in written format: http://learnwebcode.com/how-to-insert-an-image-in-xhtml/ Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts and my favorite hosting company: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 795857 LearnWebCode
JavaScript in Half an Hour (Without jQuery!)
 
31:52
My front-end course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL I'll be releasing two brand new JavaScript courses in 2018; join my newsletter to be notified as soon as they launch: https://learnwebcode.com/ Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Views: 592725 LearnWebCode
JSON and AJAX Tutorial: With Real Examples
 
40:45
My front-end course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL In this JavaScript tutorial we learn what JSON and AJAX are and how to use them to load new data into our webpage on-the-fly. JSON URLs I use in the video: https://learnwebcode.github.io/json-example/animals-1.json https://learnwebcode.github.io/json-example/animals-2.json https://learnwebcode.github.io/json-example/animals-3.json Link to "beginning" demo code so you can follow along: http://codepen.io/anon/pen/QKPJmW Link to "completed" demo code so you can see a final working example: http://codepen.io/anon/pen/RGOqQY Link to my "JavaScript in Half an Hour" video I mentioned: https://www.youtube.com/watch?v=zPHerhks2Vg Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Views: 919617 LearnWebCode
The 10 Days of JavaScript: Day 6 (Higher-Order Functions)
 
19:05
My full premium JavaScript course will be available soon, subscribe to be notified as soon as it launches. Day 0: Intro https://www.youtube.com/watch?v=dc-2t26Vuhs Day 1: Getting Started https://www.youtube.com/watch?v=K4b7LdWAVyw Day 2: Functions https://www.youtube.com/watch?v=bYshPb-wEWs Day 3: Objects https://www.youtube.com/watch?v=CXnnw9rQH5I Day 4: Arrays https://www.youtube.com/watch?v=rTK0Gmf57jE Day 5: Making Decisions https://www.youtube.com/watch?v=ZWxWx-vmubI Day 6: Higher-Order Functions https://www.youtube.com/watch?v=25VUf6pUwEU Day 7: Returning vs Mutating https://www.youtube.com/watch?v=eJ7hvnS0Bfk Day 8: Scope & Context https://www.youtube.com/watch?v=WPcW83BMT3Y Day 9: Misc. Must Know Info https://www.youtube.com/watch?v=AzxiDWeFeps Day 10: Web Browser Practice https://www.youtube.com/watch?v=HQuJzGU7TWg I'm using document.write() as a quick and dirty way to see/test values instead of always using console.log(). Please do as I say and not as I do :) Do not use document.write() for anything beyond this simple testing case and outside of CodePen I'd say never use it. In future lessons we will learn far superior ways of adding HTML content to the page from JavaScript. Also, in the real world we would never want to repeatedly update the page for each item like this, it's much better to use JavaScript to create one big string of HTML content (could concatenate to a string variable from within a while loop or forEach or even use array.reduce()) in memory first and then only add it to the page all at once. However, that's getting into efficiency and web browser performance which are not topics I wanted to address this early in the course :) Follow me for cat pics: Instagram: https://www.instagram.com/learnwebcode/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/
Views: 13302 LearnWebCode
Bootstrap Responsive Layout Tutorial
 
19:40
In this lesson we learn how the Bootstrap column grid system makes creating responsive layouts incredibly simple. We also create a responsive navigation menu! Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Demo files: http://learnwebcode.com/bootstrap-responsive-layout-tutorial/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 93353 LearnWebCode
Sublime Text Introduction (Tutorial #1)
 
09:04
I finally launched the full workflow course! https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL Download Sublime Text (Buy it if you love it!) http://www.sublimetext.com/ Follow me on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 400236 LearnWebCode
Sublime Text Emmet (Tutorial #7)
 
13:32
I finally launched the full workflow course! https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL Download Sublime Text (Buy it if you love it!) http://www.sublimetext.com/ Follow me on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 86426 LearnWebCode
CSS Sprites Tutorial
 
09:48
In this CSS tutorial we take a look at CSS Sprites. Check out my premium 9 hour web design video course: https://www.udemy.com/web-design-for-beginners-real-world-coding-in-html-css/?couponCode=YOUTUBE-HALF-OFF View Live Demo of Code: http://learnwebcode.com/tutorial-files/css-sprites-tutorial/ Download Files used in Video (.zip): http://learnwebcode.com/tutorial-files/css-sprites-tutorial/CSS-Sprites-Tutorial.zip Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 40667 LearnWebCode
Sublime Text Line and Indentation Tools (Tutorial #2)
 
06:26
I finally launched the full workflow course! https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL Download Sublime Text (Buy it if you love it!) http://www.sublimetext.com/ Follow me on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 150783 LearnWebCode
WordPress Excerpt Tutorial
 
10:25
My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL In this lesson we learn how to add "Read more" or "Continue reading" links to our posts, as well as how to manage and customize excerpts in our theme's output. To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/wordpress-read-more-links-and-excerpts/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 112748 LearnWebCode
Sublime Text Create New Snippet (Tutorial #8)
 
10:48
I finally launched the full workflow course! https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL Download Sublime Text (Buy it if you love it!) http://www.sublimetext.com/ Looking for a list of all valid scope values for your snippets? https://gist.github.com/iambibhas/4705378 Follow me on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 50872 LearnWebCode
The 10 Days of JavaScript: Day 2 (Functions)
 
20:45
My full premium JavaScript course will be available soon, subscribe to be notified as soon as it launches. Day 0: Intro https://www.youtube.com/watch?v=dc-2t26Vuhs Day 1: Getting Started https://www.youtube.com/watch?v=K4b7LdWAVyw Day 2: Functions https://www.youtube.com/watch?v=bYshPb-wEWs Day 3: Objects https://www.youtube.com/watch?v=CXnnw9rQH5I Day 4: Arrays https://www.youtube.com/watch?v=rTK0Gmf57jE Day 5: Making Decisions https://www.youtube.com/watch?v=ZWxWx-vmubI Day 6: Higher-Order Functions https://www.youtube.com/watch?v=25VUf6pUwEU Day 7: Returning vs Mutating https://www.youtube.com/watch?v=eJ7hvnS0Bfk Day 8: Scope & Context https://www.youtube.com/watch?v=WPcW83BMT3Y Day 9: Misc. Must Know Info https://www.youtube.com/watch?v=AzxiDWeFeps Day 10: Web Browser Practice https://www.youtube.com/watch?v=HQuJzGU7TWg Follow me for cat pics: Instagram: https://www.instagram.com/learnwebcode/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/
Views: 21287 LearnWebCode
Channel Update
 
03:54
My front-end course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL The newest WordPress video I mentioned: https://www.youtube.com/watch?v=YzNfIM_9TaM Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Views: 112330 LearnWebCode
CSS Floats - Understanding & Clearing Floats Tutorial
 
07:27
In this CSS tutorial we take a look at how the float property affects the elements it is applied to, and also its surrounding and parent elements. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Link to "clearfix" CSS to copy and paste: http://learnwebcode.com/clearing-css-floats-clearfix/ Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 78790 LearnWebCode
The 10 Days of JavaScript: Day 8 (Variable Scope & Context / this keyword)
 
33:11
My full premium JavaScript course will be available soon, subscribe to be notified as soon as it launches. Day 0: Intro https://www.youtube.com/watch?v=dc-2t26Vuhs Day 1: Getting Started https://www.youtube.com/watch?v=K4b7LdWAVyw Day 2: Functions https://www.youtube.com/watch?v=bYshPb-wEWs Day 3: Objects https://www.youtube.com/watch?v=CXnnw9rQH5I Day 4: Arrays https://www.youtube.com/watch?v=rTK0Gmf57jE Day 5: Making Decisions https://www.youtube.com/watch?v=ZWxWx-vmubI Day 6: Higher-Order Functions https://www.youtube.com/watch?v=25VUf6pUwEU Day 7: Returning vs Mutating https://www.youtube.com/watch?v=eJ7hvnS0Bfk Day 8: Scope & Context https://www.youtube.com/watch?v=WPcW83BMT3Y Day 9: Misc. Must Know Info https://www.youtube.com/watch?v=AzxiDWeFeps Day 10: Web Browser Practice https://www.youtube.com/watch?v=HQuJzGU7TWg I'm using document.write() as a quick and dirty way to see/test values instead of always using console.log(). Please do as I say and not as I do :) Do not use document.write() for anything beyond this simple testing case and outside of CodePen I'd say never use it. In future lessons we will learn far superior ways of adding HTML content to the page from JavaScript. Also, in the real world we would never want to repeatedly update the page for each item like this, it's much better to use JavaScript to create one big string of HTML content (could concatenate to a string variable from within a while loop or forEach or even use array.reduce()) in memory first and then only add it to the page all at once. However, that's getting into efficiency and web browser performance which are not topics I wanted to address this early in the course :) Follow me for cat pics: Instagram: https://www.instagram.com/learnwebcode/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/
Views: 10784 LearnWebCode
WordPress Navigation Menus (Theme Development)
 
16:47
My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL In this lesson we learn how to add navigation menu locations to our theme and register the menus so users can easily manage the menu links via the WordPress Admin UI. To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/wordpress-theme-development-navigation-menus/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 448046 LearnWebCode
WordPress Page Templates (Theme Development)
 
11:34
My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL In this lesson we learn how to use page templates and conditional logic to apply different layouts to different WP pages. To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/wordpress-page-templates-tutorial/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 298243 LearnWebCode
The 10 Days of JavaScript: Day 3 (Objects)
 
20:29
My full premium JavaScript course will be available soon, subscribe to be notified as soon as it launches. Day 0: Intro https://www.youtube.com/watch?v=dc-2t26Vuhs Day 1: Getting Started https://www.youtube.com/watch?v=K4b7LdWAVyw Day 2: Functions https://www.youtube.com/watch?v=bYshPb-wEWs Day 3: Objects https://www.youtube.com/watch?v=CXnnw9rQH5I Day 4: Arrays https://www.youtube.com/watch?v=rTK0Gmf57jE Day 5: Making Decisions https://www.youtube.com/watch?v=ZWxWx-vmubI Day 6: Higher-Order Functions https://www.youtube.com/watch?v=25VUf6pUwEU Day 7: Returning vs Mutating https://www.youtube.com/watch?v=eJ7hvnS0Bfk Day 8: Scope & Context https://www.youtube.com/watch?v=WPcW83BMT3Y Day 9: Misc. Must Know Info https://www.youtube.com/watch?v=AzxiDWeFeps Day 10: Web Browser Practice https://www.youtube.com/watch?v=HQuJzGU7TWg Follow me for cat pics: Instagram: https://www.instagram.com/learnwebcode/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/
Views: 17054 LearnWebCode
Full Width Background with Fixed Width Content (CSS)
 
04:23
Learn how to mix full width background containers with fixed width content containers. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 27490 LearnWebCode
Responsive Web Design Tutorial and Explanation
 
19:48
Learn what Responsive Web Design is, and how to write the necessary code to create our own custom responsive web layouts. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode Demo files: http://learnwebcode.com/responsive-web-design-tutorial/
Views: 419044 LearnWebCode
How to Install WordPress
 
11:37
Easier & updated video of installing WP: https://www.youtube.com/watch?v=FVqzKAUsM68 My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL Let's review the different ways to get started with WordPress. The lesson walks users through the process of installing WordPress locally on their own computer so they can follow along with future lessons. To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for tutorials and cat pics: https://twitter.com/learnwebcode
Views: 938792 LearnWebCode
The 10 Days of JavaScript: Day 0
 
10:49
My full premium JavaScript course will be available soon, subscribe to be notified as soon as it launches. Day 0: Intro https://www.youtube.com/watch?v=dc-2t26Vuhs Day 1: Getting Started https://www.youtube.com/watch?v=K4b7LdWAVyw Day 2: Functions https://www.youtube.com/watch?v=bYshPb-wEWs Day 3: Objects https://www.youtube.com/watch?v=CXnnw9rQH5I Day 4: Arrays https://www.youtube.com/watch?v=rTK0Gmf57jE Day 5: Making Decisions https://www.youtube.com/watch?v=ZWxWx-vmubI Day 6: Higher-Order Functions https://www.youtube.com/watch?v=25VUf6pUwEU Day 7: Returning vs Mutating https://www.youtube.com/watch?v=eJ7hvnS0Bfk Day 8: Scope & Context https://www.youtube.com/watch?v=WPcW83BMT3Y Day 9: Misc. Must Know Info https://www.youtube.com/watch?v=AzxiDWeFeps Day 10: Web Browser Practice https://www.youtube.com/watch?v=HQuJzGU7TWg Follow me for cat pics: Instagram: https://www.instagram.com/learnwebcode/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/
Views: 36658 LearnWebCode
Handlebars.js Tutorial (webpack integration at the end)
 
28:05
Since the filming of this lesson webpack has changed their API so don't type out the exact webpack code you see on my screen. Instead, my GitHub link below has the newest code changes that will work. NOTE: in my updated version you do NOT need the dollar sign $ before the helper name in your templates. My front-end course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL "Follow along" code: http://codepen.io/anon/pen/qqPegg "Finished product" code: http://codepen.io/anon/pen/WoddJb?editors=1010 Webpack Handlebars Example Repo: https://github.com/LearnWebCode/handlebars-webpack Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Views: 66608 LearnWebCode
WordPress Search Theme Tutorial
 
10:08
My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL In this lesson we learn how to add a search form to our theme's header, and also how to control the output for the relevant search results screen. To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/wordpress-search-form-and-results-tutorial/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 95189 LearnWebCode
Git Tutorial Part 2: Vocab (Repo, Staging, Commit, Push, Pull)
 
15:17
Part 3 will be posted this weekend. If you already know Git, don't worry, a brand new "JSON & AJAX" video will be up next Tuesday. Link to full course with coupon: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Views: 44067 LearnWebCode
Learn HTML - Your First Web Page (For Absolute Beginners)
 
04:34
In this video we learn how to create and save our first web page. Check out my 9 hour web design video course: https://www.udemy.com/web-design-for-beginners-real-world-coding-in-html-css/?couponCode=YOUTUBE-HALF-OFF You can also view this lesson in written form at http://learnwebcode.com/what-is-xhtml/ Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts and my favorite hosting company: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 29923 LearnWebCode
Sublime Text Snippets (Tutorial #6)
 
06:44
I finally launched the full workflow course! https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL Download Sublime Text (Buy it if you love it!) http://www.sublimetext.com/ Follow me on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 41209 LearnWebCode
WordPress Theme Tutorial (Part 1)
 
23:04
My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL Let's learn how to create a WordPress theme by hand, from scratch. We'll write our own HTML, CSS, and PHP to create the basic foundation for a WordPress theme. To view a complete list of the WordPress theme development lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/create-wordpress-theme-from-scratch/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 927451 LearnWebCode
The 10 Days of JavaScript: Day 4 (Arrays)
 
20:33
My full premium JavaScript course will be available soon, subscribe to be notified as soon as it launches. Day 0: Intro https://www.youtube.com/watch?v=dc-2t26Vuhs Day 1: Getting Started https://www.youtube.com/watch?v=K4b7LdWAVyw Day 2: Functions https://www.youtube.com/watch?v=bYshPb-wEWs Day 3: Objects https://www.youtube.com/watch?v=CXnnw9rQH5I Day 4: Arrays https://www.youtube.com/watch?v=rTK0Gmf57jE Day 5: Making Decisions https://www.youtube.com/watch?v=ZWxWx-vmubI Day 6: Higher-Order Functions https://www.youtube.com/watch?v=25VUf6pUwEU Day 7: Returning vs Mutating https://www.youtube.com/watch?v=eJ7hvnS0Bfk Day 8: Scope & Context https://www.youtube.com/watch?v=WPcW83BMT3Y Day 9: Misc. Must Know Info https://www.youtube.com/watch?v=AzxiDWeFeps Day 10: Web Browser Practice https://www.youtube.com/watch?v=HQuJzGU7TWg Follow me for cat pics: Instagram: https://www.instagram.com/learnwebcode/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/
Views: 14008 LearnWebCode
jQuery Variables, Functions, and Conditional Logic Tutorial
 
26:08
Learn how to use variables, conditional logic and functions to write flexible JavaScript. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around! http://p.asmallorange.com/learnwebcode/specialoffer Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode Link to the example files shown in the video: http://learnwebcode.com/jquery-variables-functions-and-conditional-logic/ Link to the first JavaScript with jQuery lesson: https://www.youtube.com/watch?v=1vMFpT0h-WI&list=UUHRp19HU7Y2LwfI0Ai6WAGQ Note: The reveal effect shown in this lesson is not terribly useful in real world applications. Most tablets and smartphones cannot run code during the middle of a swipe scroll event so the effect will only run seamlessly on traditional computers / laptops. In short, I wouldn't necessarily use this effect on a production website, but it is a good playground for the sake of learning more about JavaScript variables, functions, and conditional logic. Also, I recommend not using jQuery's "animate" method whenever possible. Instead, you can simply use jQuery to add/remove a class at the desired moments, and instead use CSS transitions or animations. We'll cover this strategy in future lessons. The jQuery animate method is more dependable in older browsers and devices, but the CSS method provides smoother performance. Finally, we created the "on scroll reveal" functionality in this lesson from scratch as a learning exercise. If, however you're interested in a more robust and pre-built solution, be sure to search for the existing jQuery plugin named "jQuery WayPoints."
Views: 72805 LearnWebCode
Sublime Text Key Bindings (Tutorial #9)
 
06:28
I finally launched the full workflow course! https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL Download Sublime Text (Buy it if you love it!) http://www.sublimetext.com/ Follow me on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 29464 LearnWebCode
Learn HTML - Basic Structure and How To Link Pages
 
04:48
In this video we learn the basic structure of an HTML file, and also, how to create hyperlinks. Check out my 9 hour web design video course: https://www.udemy.com/web-design-for-beginners-real-world-coding-in-html-css/?couponCode=YOUTUBE-HALF-OFF You can also view this lesson material in written form here: http://learnwebcode.com/how-to-create-and-save-your-first-xhtml-file-by-hand/ http://learnwebcode.com/html-attributes-and-values-how-to-create-a-hyperlink/ Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts and my favorite hosting company: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 33315 LearnWebCode
Sublime Text Macros (Tutorial #10)
 
08:57
I finally launched the full workflow course! https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL Download Sublime Text (Buy it if you love it!) http://www.sublimetext.com/ Follow me on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 28557 LearnWebCode
HTML Tables Tutorial
 
09:38
In this tutorial we learn how to code HTML tables and add basic styling with CSS. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 149107 LearnWebCode
Sublime Text Command Palette (Tutorial #4)
 
04:55
I finally launched the full workflow course! https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL Download Sublime Text (Buy it if you love it!) http://www.sublimetext.com/ Follow me on Twitter for resources and updates: https://twitter.com/learnwebcode
Views: 48574 LearnWebCode
The 10 Days of JavaScript: Day 9 (Misc Must Know Info)
 
23:16
My full premium JavaScript course will be available soon, subscribe to be notified as soon as it launches. Day 0: Intro https://www.youtube.com/watch?v=dc-2t26Vuhs Day 1: Getting Started https://www.youtube.com/watch?v=K4b7LdWAVyw Day 2: Functions https://www.youtube.com/watch?v=bYshPb-wEWs Day 3: Objects https://www.youtube.com/watch?v=CXnnw9rQH5I Day 4: Arrays https://www.youtube.com/watch?v=rTK0Gmf57jE Day 5: Making Decisions https://www.youtube.com/watch?v=ZWxWx-vmubI Day 6: Higher-Order Functions https://www.youtube.com/watch?v=25VUf6pUwEU Day 7: Returning vs Mutating https://www.youtube.com/watch?v=eJ7hvnS0Bfk Day 8: Scope & Context https://www.youtube.com/watch?v=WPcW83BMT3Y Day 9: Misc. Must Know Info https://www.youtube.com/watch?v=AzxiDWeFeps Day 10: Web Browser Practice https://www.youtube.com/watch?v=HQuJzGU7TWg Follow me for cat pics: Instagram: https://www.instagram.com/learnwebcode/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/
Views: 10558 LearnWebCode