SGLearn: HTML5 and CSS3: Learn Web Design
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1 student enrolled
Wishlisted Wishlist

Please confirm that you want to add SGLearn: HTML5 and CSS3: Learn Web Design to your Wishlist.

Add to Wishlist

SGLearn: HTML5 and CSS3: Learn Web Design

Quickly learn HTML5 and CSS3 + Bootstrap - the basics of Web Development - to design your own responsive websites.
New
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1 student enrolled
Last updated 7/2017
English
Price: $200
30-Day Money-Back Guarantee
Includes:
  • 9 hours on-demand video
  • 2 Articles
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • You will learn how to build a custom website with HTML, CSS, and Boostrap
  • You will learn real-world skills to build professional and modern websites
  • You will learn the basic building blocks to becoming a web developer
  • You will learn to build websites while you learn each building block - HTML, CSS, Bootstrap
  • You will get bonus downloadable cheat sheets and guides to help you quickly design your websites
  • You will learn how to use each skill in the real world with case studies
  • You will learn basic web design tips so your websites look and act professionally
View Curriculum
Requirements
  • No coding experience necessary
  • Seriously, you don't need to know anything about websites or coding!
  • Any computer will be fine - Windows, OSX or Linux
  • We'll show you free tools that you can use to follow along and build your own websites in the course
Description

*** BRAND NEW HTML5 and CSS3 COURSE ON UDEMY! ***

Do you  want to learn how to build your own websites?

Do you want to become a web developer?

Do you just want to know how to customize the design of a website created with Wordpress (or other web-builder) so it looks like you want it to?

HTML & CSS are the basic building blocks of the website world! And this is the perfect course for you to dive right in and learn them.

Why should you enroll in this course?

1. It's great for absolute beginners, with NO coding or web development experience required!

Many of the other courses on HTML5 and CSS3 on Udemy are too advanced, or use language that is confusing to a beginner. We break down every definition and step of the process so you never get lost.

2. Project-based learning. Plus it's free to build websites!

Learning is better when you're actually doing. As you follow along with each section of the course, you'll be building your own websites. Plus, we'll be using free applications to do so - Brackets and Google Chrome. No matter what type of computer you have - Windows, Mac, Linux - you can get started.

Seriously, within the first hour of the course, you'll be building your own basic websites!

3. No more boring lectures!

If you've watched other HTML5 and CSS3 courses or tutorials before, you know that it can be difficult to make it interesting and fun. The instructors Nick and Phil strive to make each lesson fun and interesting, so you feel like you're actually learning something new... and progressing... all while having fun!

4. Real world case studies!

It's great to learn how to use HTML and CSS, but it's even better if you know how what you are learning applies to real-world websites. Throughout the entire course, Nick shows how real websites are using HTML and CSS today. Phil follows up with personal case studies of how even beginner's can use HTML and CSS to customize their own websites.

WHAT WILL YOU LEARN IN THIS COURSE?

  • Start by understanding how to use HTML5, CSS3, and Bootstrap
  • Each section builds upon the previous ones to give you a complete understanding of the basics of HTML, CSS, and Bootstrap
  • Once you are in the Bootstrap section, you'll learn how to quickly develop and design beautiful responsive websites
  • Finally, you'll put all your knowledge together with full website projects such as creating a modern landing page

IS THIS THE PERFECT COURSE FOR YOU?

YES - if you are a complete beginner with no experience building a website.

YES - if you already know some HTML and CSS, but want to learn everything from the ground up so you know how to build a complete website.

YES - if you don't necessarily want to be a web developer, but want to understand how HTML and CSS work so you can customize your own WordPress site (or other type of website)

NO - if you already know the basics of HTML and CSS. If that's the case, we recommend a more advanced HTML and CSS course.

WHAT DO YOU GET WHEN YOU ENROLL?

  • Lifetime access to all of our videos. Start whenever you want - and go at your own pace!
  • Download any of the lectures, so you can easily watch back on your computer or device.
  • Downloadable cheat sheets and guides that make writing website code much more efficient.
  • High quality support in the course Q&A for whenever you are stuck and have any questions.
  • An amazing new skill that is in high demand for getting a well paid job.
  • Insight to the current IT world with an added section of Interview with an Expert from Singapore.

READY TO ENROLL?

With our 30-day 100% money-back guarantee, there's no reason to hesitate. Enroll now to try out the course completely risk free!

We can't wait to see you in the course!

Nick and Phil

Who is the target audience?
  • Absolute beginners who want to learn the first building blocks (HTML & CSS) for creating websites
  • Anyone with a website that wants to be able to customize it with HTML and CSS to make it look like you imagine
  • Anyone looking for a quick refresher of how HTML, CSS, and Bootstrap works
Compare to Other HTML Courses
Curriculum For This Course
76 Lectures
08:57:22
+
Welcome
4 Lectures 09:37

Welcome to this course on HTML, CSS, and Bootstrap! We're so excited to have you here. In this lesson, you'll learn how this course will work, what you will learn, exactly who this course is for, and how to succeed.

Preview 02:34

In this lesson of the HTML, CSS, and Bootstrap course, you'll download the different tools we will use in this course - such as Brackets and Google Chrome.

Plus, you'll get a quick orientation of Brackets, the program you'll be using to create and edit your code. Literally, you'll see how code affects a website right in this video!

Preview 05:04

DOWNLOAD: HTML Cheat Sheets
00:17

In this lesson, Phil introduces himself and what he'll be bringing to the table in this course! 

Preview 01:42
+
HTML 5
14 Lectures 01:36:19

In this section of the HTML, CSS, and Bootstrap course, you'll learn what HTML is, and how to use it. Let's get ready to rock and roll!

Preview 00:46

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn more about what HTML actually is, and how is it used - and it's history. It's important to understand the basics of what HTML is, to know the foundations of HTML.

You'll learn the different versions of HTML (ie. HTML 5 vs HTML 4). 

See how HTML actually works - from text file to browser.

Also, see the HTML behind any website.

Learn how to manipulate how any website looks using simple HTML edits.

Preview 10:39

Here's a case study to show you how to change anyone's tweets with HTML.

Preview 02:28

Start your first HTML website in this lesson of the HTML, CSS & Bootstrap course. Learn how to start a new HTML file in Brackets. Also, learn how to save an HTML file.

Next, you'll learn about how to use basic tags within your HTML document.

Start a New HTML File & Use Tags
11:36

In this lesson of the HTML, CSS, & Bootstrap course, you'll learn about creating headers using the header tag. These are important, not just for style but also for SEO purposes as Google uses your website's headers to determine what is important on your page.

Header Tags: How to use them + why they are important.
05:23

In this case study, Phil shows you how he uses headers on his website, and how to make text turn into a header using HTML.

Case Study: Using Header Tags to Improve SEO
07:22

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to properly edit text via HTML. For example, you'll learn how to create paragraphs, line breaks, and more.

You'll also learn how to affect your text style with HTML tags - such as italics, bold, and underlining.

Edit Text: Spacing, Styles, Paragraphs and more!
08:31

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to add links to a website using HTML. A link (also known as a hyperlink) will let users go from one page to another (or one website to another) via a clickable piece of text.

This is also called an a tag.

Links: Create Clickable Text-based Hyperlinks
08:59

In this lesson of the HTML, CSS, and Bootsrap course, you'll learn how to add images to your website with HTML text. 

Learn the importance of using alternative text for your images for visually impaired website visitors and SEO purposes.

You'll also learn how to adjust placement and size of your images as well.

Images: Add Images to Your Website with HTML
09:48

In this case study, Phil walks through adding a clickable image to your website with HTML.

Case Study: Add an Clickable Image to My Website
06:44

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to create a list of items using HTML tags. 

First, you'll learn how to create an unordered bullet-point list. Next, you'll learn how to create a numbered list.

Lists: Create Bullet-Point and Numbered Lists with HTML
04:09

Welcome to the first challenge of the course. Follow the instructions in the course from Nick to complete the first challenge, which is building your first basic website in HTML.

Challenge Exercise 1: Build Your First Basic Website with HTML
15:59

Thank you so much for completing this section of the course! We hope you enjoyed it. If you have any questions about HTML, please let us know how we can help!

Outro: Congrats, you know the basics of HTML!
00:55

Here are the most popular HTML tags that you'll use if you have a WordPress website.

Basic HTML for WordPress Users
03:00
+
CSS 3
16 Lectures 01:49:03

In this section of the HTML, CSS, and Bootstrap course, you'll learn what CSS 3 is, and how to use it. Let's get ready to rock and roll!

Intro to CSS
03:43

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to add CSS styles to your website. For example, you'll learn how to change the background color of an entire website, or to specific parts of a website like a Heading 1.

How to Add CSS Styles
16:09

In this case study, Phil shows you how to add custom CSS to any WordPress website with a plugin. For example, he'll show you how to change all the headers to a specific brand color.

Case Study: Change the Header Style for My Website
05:29

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to add classes and ids to your css styles. This allows you to edit only specific parts of your website with CSS styling.

Classes and Ids
07:27

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to add borders around different elements of your website.

Borders
05:32

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to change the sizing of an element with CSS.

Sizing
04:13

In this lesson of the CSS, HTML, and Bootstrap course, you'll learn how to create space around the edges of your elements. Understand the difference between padding and margin. This allows you to space out the different elements of your website so it looks better.

Padding and Margin: Putting Space Between Elements
07:14

Case Study: Using Padding & Margins to Adjust My Website
04:11

Text Styles: Alignment, Justification, and more!
04:26

In this lesson of the HTML, CSS, and Bootstrap course, let's how to us Div tags to edit multiple pieces of html at once.

With divs, you can add things like borders and styles to a group of text.

Divs: Add Styling to a Group of HTML Code
07:57

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to move elements of your website around.

Positioning: Move Around Elements on Your Screen
07:34

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to change the style of an element when the mouse hovers over an item.

Hover: Change the Style while Hovering
02:32

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to center elements with CSS.

Easily Center Elements with CSS
02:29

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to change the font of your website.

Fonts: Change the Font of Your Website
05:42

Welcome to the second challenge of the course. Follow the instructions in the course from Nick to complete the second challenge, which is building your first basic website in CSS.

Challenge Exercise 2: Create a Website with CSS
23:29

Thank you so much for completing this section of the course! We hope you enjoyed it. If you have any questions about CSS, please let us know how we can help!

Outro: Congrats, you know the basics of CSS!
00:56
+
Bootstrap
8 Lectures 01:00:41

In this section of the HTML, CSS, and Bootstrap course, you'll learn what Bootstrap is, and how to use it. Let's get ready to rock and roll!

Intro to Bootstrap
01:44

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to install (integrate) Bootstrap for your website. You'll also prepare your previous work for working on upcoming projects. 

You'll learn what Bootstrap is, and how to get started with the Bootstrap code available online - including understanding Bootstrap CDN and why we encourage you to use that.

Install Bootstrap: Get Started with Bootstrap
10:08

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to use containers with Bootstrap - such as making the width of your website a specific size. Also, learn how to install a new extension in Brackets to properly indent your code.

Indenting and Containers
07:19

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to use the grid system in Bootstrap, which helps makes your website more responsive - perfect for any size of screen from mobile device to desktop computer.

The Grid System: Make Your Website Responsive
16:24

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to add images to your website. You'll also learn a great place to find beautiful images for your own website. You'll also learn how to make your website responsive.

Images: Add Images with Bootstrap
06:46

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to create buttons with Bootstrap. These buttons can be different sizes, colors, and styles.

Buttons: Create Beautiful Buttons with Bootstrap
06:12

Welcome to the third challenge of the course. Follow the instructions in the course from Nick to complete the third challenge, which is building your first basic website with Bootstrap.

Challenge Exercise 3: Create a Website with Bootstrap
11:05

Thank you so much for completing this section of the course! We hope you enjoyed it. If you have any questions about Bootstrap, please let us know how we can help!

Outro: Congrats, you know the basics of Bootstrap!
01:03
+
Project 1 - Design a Landing Page
9 Lectures 01:08:41

Welcome to this brand new section of the HTML, CSS, and Bootstrap course. This section is the first full website project that we'll be working on. Now, you'll put all your previous knowledge together and design a landing page that looks professional and is responsive. Plus, as you work through this project, you'll learn some new tips and tricks to make your website even more professional!

Intro to Website Project 1
01:10

In this lesson of the HTML, CSS, and Bootstrap course, you'll sketch up your landing page - and learn the importance of sketching up your website.

Sketch Your Website
04:53

In this lesson of the HTML, CSS, and Bootstrap course, you'll work through the first part of your website - including finding and adding icons, centering your content, adding a Sign Up button, and adding images.

Design the Top Section of Your Website
16:18

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to make your text pop out from the background image, finesse the spacing of your web content, and generally make your website look better.

Polish the Top Section of Your Website
05:53

In this lesson of the HTML, CSS, and Bootstrap course, you'll add a row of images to your website. You'll also learn how to crop images, and make them look good on a responsive screen.

Add Images to Your Website
10:59

In this lesson of the HTML, CSS, and Bootstrap course, you'll add a container that includes highlights, icons, and aligning them to the right and left side of your page.

Add Main Points to Your Website
14:07

In this lesson of the HTML, CSS, and Bootstrap course, you'll learn how to add an email opt-in form to your website. This allows you to collect website visitor's email addresses which is so important for growing your own website and brand.

Collect Emails: Add an Email Opt-in Form to Your Website
10:44

Welcome to the fourth challenge of the course. Follow the instructions in the course from Nick to complete to build your own website.

Challenge Exercise 4: Create Your Own Landing Page
03:00

Thank you so much for completing this section of the course! We hope you enjoyed it. If you have any questions about this project, please let us know how we can help!

Outro
01:37
+
Project 2 - Business Website
11 Lectures 01:20:03
Intro
01:03

Sketch
02:55

Fancy Font Logo
07:00

Carousel Basics
10:26

Carousel Extras
08:48

Text on Images
15:03

Phone GlypIcon
03:53

Google Maps
12:47

Font Awesome
09:02

Challenge
08:05

Outro
01:01
+
Project 3 - Portfolio
7 Lectures 01:07:52
Intro
00:52

Sketch
08:00

Jumbotron
10:13

NavBar
23:41

Panels
11:19

Challenge
12:34

Outro
01:13
+
Hosting - Getting Your Website on the Internet
5 Lectures 24:28
Intro
01:16

Bluehost
06:10

Uploading
05:24

Random Tips
10:35

Outro
01:03
+
Interview with Singapore Expert
2 Lectures 20:45
Background of Expert
10:45

Information and Communication Technology in Singapore
10:00
About the Instructor
DioPACT SG
4.5 Average rating
1 Review
7 Students
11 Courses
SGLearn

Dioworks is an e-learning design company focused on using technology as enablers to make learning easy, engaging and effective. Premised on innovative designs, pedagogy and research, we provide quality learning experiences for learners globally. Dioworks offers bespoke solutions for organisations to integrate learning, training and assessment of work-based competencies via blended learning strategies. We are also the local partner to Udemy in Singapore. 

More specifically, we combine the strengths of Classroom-Facilitated Learning, Massive Open Online Courses (MOOCs) in partnership with UDEMY Inc, and our "Kinetic Coach" automated response training solution to achieve learning outcomes.

Video School Online Inc
4.5 Average rating
28,992 Reviews
329,964 Students
69 Courses
Become a Better Creator!

Learn creative skills, from absolute beginner to advanced mastery. 

Video School Online exists to help you succeed in life. Each course has been hand-tailored to teach a specific skill. I hope you agree!

Whether you’re trying to learn a new skill from scratch, or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.

Education makes the world a better place. Make your world better with new skills!

Our courses can be watched 24/7 wherever you are. Most are fully downloadable so you can take them with you. You can also view them on mobile devices with the Udemy mobile app.

All courses have a 30-day money-back guarantee so that you can check it out, make sure it’s the right course for you, and get a refund if it’s not!