Free online courseWeb Development for beginners by LearnCode.academy

4.75

(709)

5h21m of online video course

Quality content and selected for your learning.

Certificate of course completion

Download your digital certificate of course completion after watching all course videos.

Exercises to train your knowledge

Many of the courses available have exercises to help with learning.

Free lifetime access

This course is free today and always will be, from start to finish you will pay nothing.

Online course in English

Web Development

Learn how to create websites with free Web Development courses, including html, php, javascript, react, angular, and more to learn programming

Teacher

LearnCode.academy
1 Courses / 12559 students

100% FREE Web Development tutorials, web site design tutorials and more. Including, but not limited to: HTML, CSS, JavaScript, CSS Layouts, Responsive Design, React.js, Node.js, Angular.js, Docker, Dev Ops, Server Administration, Deployment Strategies.

Course comments

Discussion Forum

There are no comments yet for this course.

Watch the 1st video of the course

Share

Evaluate course

Go to certificates

Report a problem

Course content

0h14m

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

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

0h15m

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

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

0h21m

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

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

0h13m

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

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

0h20m

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

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

0h06m

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

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!

0h08m

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

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.

0h07m

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

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

0h13m

Javascript Tutorial For Beginners - #3 Javascript Functions Tutorial

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"

0h14m

Javascript Tutorial For Beginners - #4 Javascript Arrays & Loops

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.