Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Complete Web Developer Course - Build 20 Websites

Name: The Complete Web Developer Course - Build 20 Websites
Rating: 4.4 (140 reviews)

Learn the fundamentals of HTML, CSS and JavaScript by building 20 real world websites!

Created byJohn Bura, Mammoth Interactive

Last updated 6/2019

English

What you'll learn

Learn to build your own websites.
Learn how to code in CSS
Learn to code in JavaScript
Learn to code in HTML
Build 20 fantastic websites
Start a web design business
Make money from this course

Course content

23 sections • 315 lectures • 11h 48m total length

Welcome to the Course0:56
What you need for this course7:17

Intro to HTML15:03
Writing our first HTML11:57
Intro to Lists and Comments7:36
Nested Lists4:41
Loading Images5:39
Loading Images in Lists3:15
Load images into lists by nesting them inside list items, experiment with unordered lists, and combine text and images to understand how markup affects bullets and list structure.
Links6:38
Images as Link2:29
Mailto Link2:31
Create a mailto link with the a href attribute to open an email program and compose a message to a specified address, including a concrete example and proper tag closing.
Div Element8:36

01. Introduction to the basic one page website2:58
02. Setting up an image1:25
03. Selecting a coffee bean image1:56
04. Setting up a column2:35
Set up a three-column layout by adding divs for the main page and column one, then insert a header two and a paragraph in column one.
05. Adding in latin text and the other columns1:17
06. Setting up the body CSS1:17
07. Adding in the h1 and h2 css1:50
08. Changing the header1:09
09. Formating the header tag1:50
10. Adding in the banner tag1:25
11. Making the 3 columns work3:40
12. Fixing the image1:49
13. Changing the text and talking about the letters2:40
14. Challenge - Add links to the website2:16

01. Introduction to the background image website2:28
02.Adding in the three columns1:52
03. Adding in a background image1:41
04. Setting the resize features for the image2:00
05. Adding in the text formats for the headers2:12
06. Setting up the logo size2:18
07. Adding in the three columns2:34
08. Formatting the titles of the 3 columns1:30
09. Adding in the margin to the header1:54
10. Adding in a semi transparent background to see the text3:23
Create a semi-transparent text background with rgba in CSS, choosing alpha values like 0.3 to separate text from the page and enhance readability.
11. Changing the header 21:47
12. Adding in the logo and talking about busines2:07
13. Challenge - Think like a business1:29

01. Introduction to making a six column website1:44
02. Adding in the 6 columns1:57
03. Adding in the background image2:19
04. Adding in the header code2:16
05. Adding in the logo formatting2:18
06. Adding in the columns2:31
07. Changing the header of the columns1:23
08. Adding in a background to the columns2:13
09. Making the text pop out3:14
Explore how to make header text pop using CSS text stroke and rgba colors, with practical tweaks like stroke width and chrome-specific rendering.
10. Adding in a graphic logo to the top3:06
Add a graphic logo to the top with an img tag. Size the logo to 200 pixels, center it with display block and auto margins, and add a subtle background.
11. Challange - Add in a footer0:50

01. Making a minimalist website1:47
02. Adding in the columns1:49
03. Adding in a background color2:07
04. Adding in the header code2:37
05. Adding in the columns2:45
06. Testing boundaries and fixing the logo1:57
Fix the logo bleed by setting its width to 1000px via CSS, remove the white background, adjust letter spacing, and preview scalable vector graphic icons in the next tutorial.
07. Adding in the code for the fontawesome2:53
08. Adding in the HTML to make FontAwesome work1:09
09. Adding in an item using FontAwesome1:58
10. Adding in the icons to the columns1:41
11. Changing the header2 text1:57
12. Changing the margins of the entire page and talking about color2:35
13. Adding in a splash of color and span tags2:17
14. Adding in the font awesome icons that make sense4:20
15. Challange - Find a different color scheme1:10

01. Making a basic minimalist site1:50
Set up a minimal HTML page by creating divs with ids page, header-page, header, and logo, and insert an h1 labeled temp logo, introducing foundational page structure.
02. Adding in the columns1:46
Add six columns by creating a sixColumns container and six column divs, each with an h2 and a paragraph of Latin text to keep the design minimalist.
03. Adding in the body CSS code1:25
Set the body's background to near white using RGBA 252,252,252 and the text color to #2B2B2B, with font family Abel, sans-serif, at 20px.
04. Changing the header CSS1:33
05. Adding in the header code and the logo code1:29
06. Adding in the columns2:19
07. Setting up font awesome2:15
08. Setting up the logos in the page2:23
09. Adding in a span tag2:24
10. Adding in a stroke2:32
11. Adding in a specific span tag2:15
Add and replicate span tags across the page, assign an id like small span, and apply css rules to outline and style each instance, demonstrating consistent styling across multiple elements.
12. Playing around with color4:20
Explore color in a minimalist interface by changing text and background colors, trying red, orange, blue, greenish, or yellow, and learn HTML color codes and RGBA values.
13. Challenge - find a good colorscheme0:21

01. Introduction to making a bigger website1:39
02. Adding in the div tags3:06
03. Adding in the body CSS2:29
04. Adding in the header css3:10
05. Adding in the div section formatting1:59
06. Adding in the columns2:29
07. Adding in a full width background color1:43
08. Adding the dimensions to the paragraphs1:38
09. Adding full width to the paragraph sections1:32
10. Adding in the logo CSS1:56
Add a logo h1 to the header with line-height 150px and width 1000px. Set font size to 8.0em, center with auto, and add 30px padding for a blocky look.
11. Adding in the font awesome logic1:56
12. Adding in the font awesome SVG graphics2:23
13. Changing the icons1:01
Update the user interface by changing icons through copy-and-paste of assets and optional custom icons. Review fonts and color schemes, noting how orange on dark grey enhances the design.
14. Changing the H2 to look better2:19
15. Changing the paragraph text1:24
16. Adding a span to the title1:38
Add a span to the title and apply CSS color styles to customize its look. Use a span to color text white and prepare for changing a word, Mammoth Construction.
17. Adding in the second span tag2:39
18. Challenge - Add another div tag to the project0:35

01. Introduction to multiple div tag website1:28
02. Adding in the section div tags2:12
Add and nest div tags with ids like firstSection and section1Content, include a header two and a Latin text paragraph to build five sections for the layout.
03. Setting up the background color2:42
04. Adding in a class to the sections1:28
05. Adding in the section CSS2:02
06. Fixing the font2:03
07. Adding in the logo CSS2:10
08. Adding in span tags2:15
09. Changing the second color2:12
10. Stretching the letters3:35
11. Justifying the text1:20
12. Challenge - Add in columns and FontAwesome icons1:05

01. Introduction to the website1:37
02. Adding in the rest of the HTML2:10
Add divs with ids section 1 and section content 1, apply the section content class, and insert an h2 and paragraph across five sections.
03. Adding in the body and header CSS1:43
04. Adding in the logo CSS1:32
05. Adding in the class content1:53
06. Adding in test colors2:18
07. Adding in images to the div tags2:32
08. Setting up the background image2:18
Learn to set up a background image with css: no-repeat, center positioning, fixed attachment, and size 100%. Adjust logo line height and padding to shape the site's opening.
09. Setting the other div tag images1:55
Learn to style multiple div items by applying relative positioning, a 500px height, a grey background, and padding to move content toward the middle; duplicate items to expand the layout.
10. Adding in the padding and changing the text size1:30
11. Making the text pop out over the images2:19
Learn to make text pop over images by using a translucent rgba background and adjusting text color in CSS. Tweak rgba values and darken tones to improve readability and contrast.
12. Adjusting the Header 22:29
Adjust header 2 by applying font stretched options like ultra condensed, navy blue color, and negative 2 pixel letter spacing, then fine-tune padding and font sizes from 5.0em to 12em.
13. Changing the logo color1:43
14. Challenge - Change the div tag to a dark green and make it work1:47

Requirements

Need to know how to use a computer
JSBin (free web building website)

Description

This course was funded through a massively successful Kickstarter campaign.

Learn how to build websites for your business or your portfolio. This is the best course to learn how to build websites with HTML CSS and JavaScript. In this course you learn by doing. Build your own fantastic websites today.

One of the best features is that you can watch the courses at any speed you want. This means you can speed up the or slow down the video if you want to.

This course is project based so you will not be learning a bunch of useless coding practices. At the end of this course you will have real world apps to use in your portfolio. We feel that project based training content is the best way to get from A to B. Taking this course means that you learn practical, employable skills immediately.

Learning how to code is a great way to jump in a new career or enhance your current career. Coding is the new math and learning how to code will propel you forward for any situation. Learn it today and get a head start for tomorrow. People who can master technology will rule the future.

You will get full lifetime access to this course for a single one off fee. John Bura has created many games, apps and training courses so he is extremely qualified to teach you how to master technology. This is an instructor that does not only teach, he produces apps. This means you get the most relevant information on how to code. Most courses do not show you practical skills and real world examples.

What makes you a good teacher?

I have released over 40 games and apps that have done very well in the app store.
I run a company called Mammoth Interactive so I am actively in the field building apps and making money
I have been teaching since 2002
I personally love learning online and my life is much better because I have learned online rather than a classroom
I am one of the top 10 highest grossing Udemy teachers
I have been a Udemy instructor since 2011.
I make sure people learn how to make money from their creations.
I have over 110k students worldwide

Who is this class for?

People who want to improve their technical skills
Complete beginners
People who want to make money. I show people the tools on how to make money through various methods of passive income
People who want to get ahead of the pack by learning online.

How you will make money by learning new skills

Learn practical skills
Learn about how leverage your new skills to greater wealth
Learn through practical examples

Why should you learn online?

There is an online education revolution taking place. You may have heard about it in the news or heard it from a friend. Either-way, education is going to be changed forever. In this short course I talk about how Online Education has

Motivated me

Helped my career

Helped me as a teacher

Impacted several lives around the planet

I promise that this course will be better and more effective than reading books. I show how to master technology through the use of video. This course will give you everything you need to thrive in our technological society.

Who this course is for:

Complete beginners
People who want to learn to make websites
Not professional programmers

The Complete Web Developer Course - Build 20 Websites

What you'll learn

Explore related topics

Course content

Introduction to the course2 lectures • 8min

Learn to Code in HTML10 lectures • 1hr 8min

Basic one page website14 lectures • 28min

Background image website13 lectures • 27min

03. Making a 6 column website11 lectures • 24min

Making a minimalist website15 lectures • 33min

Making a Basic minimalist site with outlines13 lectures • 27min

Making a bigger website18 lectures • 36min

Learn about Scaleable websites12 lectures • 25min

Interchanging graphics and div tags14 lectures • 28min

Requirements

Description

Who this course is for: