Course Classes
Web Development for beginners by LearnCode.academy

217

Teacher LearnCode.academy

Start course

Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript14m

Once you're done with this, checkout lesson #2 - introduction to CSS:
https://www.youtube.com/watch?v=gBi8Obib0tw

How to put your website online (with coupon):
https://www.youtube.com/watch?v=tq7dqdHCc7U

How to build webpages with html, css, javascript tutorial for beginners.
In this video, we'll cover how to develop websites using just the computer you have already.
I'm using Sublime Text editor http://www.sublimetext.com/ and Google Chrome

Other great text editors:
Atom.io
Brackets.io
Notepad++

Now, if you just want a website and don't want to be a web developer, don't mess with learning all of this, get a site from squarespace.com and use squarespace plugins from http://thecustomsquare.com to make your site unique.

Learn how to develop your own websites using the computer you already have. The basics of web development is the html file, which is centered around html tags. In this first lesson, we'll cover the basic html tags and how to use them to build a web page.

Once you

Web Development Tutorial for Beginners (#2) - Basic CSS - How to build a website with HTML & CSS15m

In Lesson #2, we cover CSS and how it adds style to webpages.
How to build webpages with html, css, javascript tutorial for beginners.
In this video, we'll cover how to develop websites using just the computer you have already.
I'm using Sublime Text editor http://www.sublimetext.com/ and Google Chrome

Learn how to develop your own HTML & CSS websites using the computer you already have. The basics of web development is the html file, which is centered around html tags. In this first lesson, we'll cover the basic html tags and how to use them to build a web page.

Once you learn HTML, you can use CSS to add style to your pages and JavasScript to add animation and fun features.

If you missed lesson #1, here it is:
https://www.youtube.com/watch?v=3JluqTojuME

Learn Javascript with the Javascript tutorials for beginners: https://www.youtube.com/watch?v=fGdd9qNwQdQ&list=PLoYCgNOIyGACnrXwo5HMCfOH9VT05znGv

How to create CSS Layouts - Web Development Tutorial for Beginners (#3) - with HTML & CSS21m

Web Development tutorial for Beginners Lesson 3.
In this lesson, we'll cover CSS layouts for beginners, how to build hand coded CSS layouts, and some more intermediate CSS concepts.

We'll be building a CSS navigation, using CSS floats, and creating a multi-column CSS layout.

A helpful tool in doing web development is the Emmet plugin for Sublime Text. To install it, you'll need Sublime Package Manager (https://sublime.wbond.net/installation).
Once package manager is installed, install Emmet by hitting Tools / Command Pallette, then type "package control: install package" and choose Emmet.

As you can see in this video, there aren't an infinite amount of css rules. The most commonly used ones are:
margin (spacing outside your html element)
padding (spacing inside your html element)
background (for color or image background)
color (font color)
display (block, inline, inline-block, none)
border-radius (rounded edges)
float (float left or right)

** You'll notice I didn't have the corr

Bootstrap Tutorial For Beginners - Responsive Design with Bootstrap 3 - Responsive HTML, CSS13m

In this video, I'll cover how to make a responsive design layout with Bootstrap 3 (from Twitter's development team). This bootstrap tutorial will help you make a responsive HTML & CSS web page that looks great on mobile, tablet, and desktop devices.

Begin by going to http://www.getbootstrap.com and adding bootstrap to your page by copying and pasting the CDN links. Once you have bootstrap added, you can create a 3-column responsive HTML layout within seconds.

Twitter Bootstrap also makes it easy to create navbars, buttons, panels, and other great features in a matter of moments.


Other Videos:

jQuery Rapid-Learn Course
https://www.youtube.com/watch?v=hMxGhHNOkCU

Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript
http://www.youtube.com/watch?v=3JluqTojuME

Web Development Tutorial for Beginners (#2) - Basic CSS - How to build a website
http://www.youtube.com/watch?v=gBi8Obib0tw

How to create CSS Layouts - Web Development Tutorial for

CSS Tutorial - Web Development Tutorial for Beginners (#5)20m

In this CSS tutorial for beginners, we'll cover how to manually build out a content panel similar to the ones in Twitter Bootstrap and also describes css cascading and specificity rules.

This is part 5 of a series of web development tutorials for beginners. Here are the other videos in this series.

Basic HTML: http://www.youtube.com/watch?v=3JluqTojuME
Basic CSS #1: http://www.youtube.com/watch?v=gBi8Obib0tw
Basic CSS #2 - making layouts: http://www.youtube.com/watch?v=9tzyJEwO9Os
Basic CSS #3 - introducing Bootstrap: http://www.youtube.com/watch?v=no-Ntkc836w

How to put your website online - how to FTP to a domain & upload files to a webhost06m

Get your site online as cheap and quick as possible! Tons of people have asked me "how do I get my site online"? And here's how.
I recommend HostGator (http://bit.ly/1UCHuf4), since they have the best customer service as well as the best price. For $6/mo, you get unlimited domains/websites, so if you're building websites for other people, you can bill them monthly and not have any expenses increase.

All you need is a
Domain Name: $12/yr
Webhost: $5-10/mo
I recommend HostGator (http://bit.ly/1UCHuf4)

Free FTP Program:
I recommend Cyberduck (http://cyberduck.io/)

We're going to get a webhost & domain, open an FTP connection to it, upload our files to our webhost, and then we're done!

Javascript Tutorial For Beginners - Free JS Course - Web Development Tutorial08m

This Javascript Tutorial is a Free Javascript Web Development Course designed for beginners. If you're wanting to know how to Javascript, in this course, you'll get JS tutorials that cover the basics and programming basics from the very beginning.

We'll cover Javascript variables, if else statements, functions, arrays, event bindings, and more. If you're learning web development and are ready to learn Javascript for beginners, this is the free tutorial for you.

JS Tutorial For Beginners - #2 If Else & Comparison Operators07m

In this free Javascript tutorial, we'll cover if, else statements & comparison operators. This is a Free JS Course designed for beginners. These Javascript lessons cover the basics of Javascript and programming basics from the very beginning.

In the last lesson, we covered variables and several Javascript types. Before covering more types, we'll cover comparison operators and if, else statements.

Comparison Operators Covered in this Video:
(youtube doesn't allow me to do less-than and greater-than signs, which is really quite silly,
so I have to use LT and GT)
LT Less than
GT Greater than
LT= Less than or equal to
GT= Greater than or equal to
== equal to
!= not equal to

There are also "strict" equality types
=== same value and same type
!== not same value and same type

For example:
"2" == 2 will be true - even though they're different types, they're considered equal
"2" === 2 will be false because the second value is a number type, where the first is a string type

Javascript Tutorial For Beginners - #3 Javascript Functions Tutorial13m

This Javascript tutorial covers functions in Javascript. Functions are a great way to store your code in reusable pieces of Javascript code that can be run at any time.

This is a Free Javascript Course designed for beginners. These Javascript lessons cover the basics of Javascript and programming basics from the very beginning.

In the first 2 lessons, we covered variables, several Javascript types, if else statements & comparison operators. Now, we'll cover functions.

How I did livereload: https://www.youtube.com/watch?v=q78u9lBXvj0
You can also use the http://brackets.io editor - they have a great feature called "live preview"

Javascript Tutorial For Beginners - #4 Javascript Arrays & Loops14m

This Javascript tutorial covers Javascript arrays and looping arrays in Javascript. Arrays store lists of items of any type. You can iterate a Javascript array with loops, making it easy to run actions on all of the items in the array.

This is a Free Javascript Course designed for beginners. These Javascript lessons cover the basics of Javascript and programming basics from the very beginning.

Javascript Selectors - Javascript Tutorial for Beginners With Examples11m

In this Javascript tutorial for beginners, we're going to be using Javascript selectors to access the DOM (document object model) and interact with our webpage in realtime. Selectors allow us to search for elements in the web page, get those html elements, and do things with them.

Selector methods are:
document.getElementsByTagName('div')
document.getElementsByClassName('done')
document.getElementById('my-id')
document.querySelector('#my-id')
document.querySelectorAll('.classname')

Once you have selected an html element, you can modify it:
document.getElementById('my-id').innerHTML = "new html"
document.getElementById('my-id').className = "newclass otherclass"

Hopefully you liked this javascript tutorial for beginners with examples (hopefully you like every web development tutorial I crank out)
As you can see, selectors are powerful in Javascript and even if you're a javascript beginner, you can make any and every change to your web page.

Javascript Events Tutorial - How Web Developers Respond to User Input18m

Simple Javascript Events Tutorial with code! Almost every Web Developer finds themselves needing to respond to user actions on a page by changing content or adjusting the page display somehow. The way you do that is by listening to Javascript events.

VIEW THE CODE:
- addition: http://codepen.io/anon/pen/vOeeqG?editors=101
- pic link: http://codepen.io/anon/pen/vxYxKN?editors=101

Popular Javascript Events Are:
- click
- mouseenter
- mouseleave
- mousedown
- mouseup
- mousemove
- keydown
- keyup
- blur
- focus

See list of all javascript events here: https://developer.mozilla.org/en-US/docs/Web/Events

In this lesson, we'll add event listeners to html elements. When the users click, focus, blur, press a key, or move their mouse, javascript will get notified and we can make the webpage change.

Listening to Javascript events is a bread and butter task for web development and web developers.

Javascript Events Tutorial Part 2 - Javascript Tutorials for Beginning Web Development15m

In the last video, I covered Javascript Events for new Javascript Web Developers. Let's get a little more complex with those events by adding a loop and some different types of event listeners.

Here's the source code: http://codepen.io/anon/pen/doZbPQ?editors=101

And here's all the key codes: https://css-tricks.com/snippets/javascript/javascript-keycodes/

A web developer often needs to add an event to multiple elements, but you don't want to repeat your code all over the place, so the best way to do it is to make a loop.

The good news is, since this loop just goes from i=0, i=1, i=2, etc, we can use one loop and add events to all 3 li's & inputs with it.

Github Tutorial For Beginners - Github Basics for Mac or Windows & Source Control Basics18m

Github Tutorial For Beginners - learn Github for Mac or Github for windows
If you've been wanting to learn Github, now's the perfect time! Github is seen as a big requirement by most employers these days and is very critical to business workflow. This Github tutorial will cover the basics of how to use Github and the command line.

Lesson #2: Pull requests, Branching merging
https://www.youtube.com/watch?v=oFYyTZwMyAg

Other Videos:
jQuery rapid-learning Course
https://www.youtube.com/watch?v=hMxGhHNOkCU

GITHUB PULL REQUEST, Branching, Merging & Team Workflow11m

Github Pull Requests are an integral part of Team Workflow. This video covers how to make a new Github feature branch, merge that branch, handle merge conflicts, submit a pull request, discuss the github pull request, and ultimately merge that pull into the master branch of your github repository.

- Begin by doing a git pull to get the latest content on your master branch
- Run "git branch your-feature-name" to make a git branch
- Code in your changes, add and commit the files
- Pull the master branch again and merge it with your new branch
- Push the branch up to github and submit it as a pull request
- That pull request can now receive comments and code discussion, as well as accept new commits before being merged in with the master branch

Other Videos:
Github Lesson 1: https://www.youtube.com/watch?v=0fKg7e37bQE
Bootstrap: https://www.youtube.com/watch?v=no-Ntkc836w
AngularJS Tutorial: https://www.youtube.com/watch?v=QETUuZ27N0w
Javascript Tutorial: https://www.youtube.com/watch

jQuery Tutorial #1 - jQuery Tutorial for Beginners08m

This jQuery Tutorial for beginners will help you get jQuery on your page and get up-to-speed with how to use basic jQuery commands.

What is jQuery? As you'll see in this tutorial, even beginners to javascript can write jQuery within minutes. It's also the most universally used javascript library in the world at present, so odds are your next employer will be using it.

The first thing we'll be doing in this jQuery lesson is showing, hiding, fading, & sliding. Next, we'll modify contents of elements and learn to do a better job keeping our code clean.

Lesson #2: Listen to user events and respond with jQuery actions!
https://www.youtube.com/watch?v=G-POtu9J-m4

Lesson #3: Clean up the jQuery by putting some data in the HTML
https://www.youtube.com/watch?v=Cc3K2jDdKTo

jQuery Tutorial #2 - Event Binding - jQuery Tutorial for Beginners07m

This second part of the jQuery Tutorial for beginners will show you how to do event binding with jQuery. Events happen whenever a user clicks, hovers, drags, types, or does pretty much anything to interact with an HTML element.

jQuery allows the web developer to easily write a program to listen to these javavscript events and modify the webpage in realtime. This is often called a dynamic website.

You can do all of this in plain javascript, but jQuery makes it incredibly easier.

Previous Lesson - #1: https://www.youtube.com/watch?v=hMxGhHNOkCU&list=UUVTlvUkGslCV_h-nSAId8Sw
Next Lesson - #3: https://www.youtube.com/watch?v=Cc3K2jDdKTo&list=UUVTlvUkGslCV_h-nSAId8Sw

Basic Terminal Usage - Cheat Sheet to make the command line EASY08m

Freak out no more...here's how to use the terminal/command line! Using the terminal is EASY, and more importantly, it's a HUGE part of being a web developer these days. If you avoid the terminal, it will only hold you back. This tutorial will teach you how to use the command line in a few easy steps. You'll be comfortable in no time.

ls - list files
cd {directory name} - change directory
cd / - go to root (top) directory
cd ~ - go to user home directory
cd .. - go up a level
mkdir {file name} - make a directory
touch {filename} - create an empty file
rm {filename} - remove a file
rm -r {directory name} - remove a directory and all files within
mv {filename} {new filename} - rename a file or folder
open {filename} - open file in default program
open {filename} -a "{program name}" - open file in specific application
open . - open current directory

HOT KEYS
Command+k - clear the terminal screen
Tab - autocomplete (if more than one files match, nothing happens, you will n

jQuery Tutorial #3 - Writing Smarter, Better Code - jQuery Tutorial for Beginners06m

With jQuery is easy to make things happen, but easy doesn't always mean right! In this lesson, we're gonna make our 20 lines of code compact into 4 lines of code...and it will be better code

This will involve selecting HTML elements by classname and getting a custom HTML5 attribute value with jQuery.

Lesson #1: https://www.youtube.com/watch?v=hMxGhHNOkCU&list=UUVTlvUkGslCV_h-nSAId8Sw

Lesson #2: https://www.youtube.com/watch?v=G-POtu9J-m4&list=UUVTlvUkGslCV_h-nSAId8Sw

Lesson #4: https://www.youtube.com/watch?v=LYKRkHSLE2E

How the Internet Works for Developers - Pt 1 - Overview & Frontend15m

How does the internet work? Most people really don't have to know, but web developers have to know more and more as they grow in their career. These 2 videos cover how the internet works from a web development perspective.

Also, check out part 2: How the internet works from a web developers perspective - pt 2 - backend: http://youtu.be/FTAPjr7vgxE

At a high level, the internet is browsers making requests to servers and getting responses back. Each request contains headers that tell the server how to respond. The server responds with a response and a content-type, which tells the browser what to do with the response.

If the content-type is text/html, then the browser knows to treat the response like an html file. If the content-type is image/jpeg, then the browser knows it's a jpeg file.

This video covers how the browser parses the html document, and ways that you can improve the loading of your webpage with things like concatenating and minifying assets like javascript, css, et

Our project is also available at:
Spanish Portuguese Hindi

Our best free courses

1

Web Development for beginners by LearnCode.academy

05 hours and 21 minutes

217

2

English lessons by Sonia

07 hours and 15 minutes

207

3

First Aid Training by St John Ambulance

02 hours and 40 minutes

191

4

Business Administration by Animate U

01 hours and 25 minutes

177

5

Social media marketing by Freemium

02 hours and 01 minutes

159

6

Android for beginners by The new boston

10 hours and 47 minutes

146

7

Business english course by BED

02 hours and 44 minutes

116

8

Investing like Warren Buffett with Preston Pysh

03 hours and 29 minutes

110

9

Computer Science by CrashCourse

07 hours and 54 minutes

109

10

Self-Defense by Ando Mierzwa

01 hours and 24 minutes

109

11

English grammar by Oxford Online English

05 hours and 37 minutes

107

12

Beginners guide to Graphic Design by TastyTuts

06 hours and 26 minutes

100

Get to know a little about our project that has been changing the lives of thousands of people through free courses.

+700 free courses +300 categories +1 million downloads +50 Thousand certificates issued Courses in 3 different languages

Found a good course on youtube and want to see it in our project, click here to indicate new courses.