Core Web Development 1: Get used to the basics
4.4 (9 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
161 students enrolled

Core Web Development 1: Get used to the basics

Focus on getting a foundation in the web development basics
4.4 (9 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
161 students enrolled
Created by Daniel Lin
Last updated 5/2017
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 12 hours on-demand video
  • 26 downloadable resources
  • 28 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create a web document in HTML
  • Design a web document with CSS
  • Deploy a web to a web server through Amazon Web Services
  • Get your project under version control
  • Use a library Bootstrap to speed up your design work
  • Use an online development environment Cloud 9
Course content
Expand all 93 lectures 11:46:27
+ Introduction to Web Development
3 lectures 22:23

The 2 issues novice learners come to have

1) There is too much to learn

2) They learn from technology oriented people

The suggested orientation for novice learners

- Try to find learning resources mainly focusing on the basics

- Stop learning from the learning resources that don't focus on the basics

Preview 09:01

Brief introduction to the course

Section 1

Introduction to Web Development

Section 2

Creating a web in HTML

Section 3

Deploying a web

Section 4

Designing a web with CSS

Section 5

Version Control

Section 6

Designing a web with Bootstrap

Preview 03:50

The Web and the Internet

The Internet is a giant and global network connecting billions of computers. The Web is a kind of system that is on the internet.


Web Development

Web development means creating HTML documents to put it briefly. HTML is a computer language that produces web pages.


How the web works

Web browser asks a web server for a HTML document. This is called Request. When the web server receives the request, it locates and delivers in its' storage the HTML document that the web browser requested. This is called response.

The web and the internet
The web and the internet
6 questions
+ Creating a web document in HTML
19 lectures 02:23:34

Online code editor

- Online code editor is a development tool that enables you to write code online for programming.

- You will be using Cloud 9 for learning the web development.

Preview 09:28

What to do with Cloud 9

1. Creating a workspace in cloud 9

2. Creating a Web document with Cloud 9

3. Serving a web document by running a web server.

4. Checking a web page with the preview feature without running a web server 

Using Cloud 9 for creating a web document

1) Basic grammar of HTML

  • HTML document consists of the tag and the content.
  • The tag consists of a start tag and an end tag.
  • The <!DOCTYPE html> indicates that the document is written by HTML 5.
  • The element represents a tag and a content combined.
  • The tag can be nested.


2) Basic grammar of HTML

  • The html tag is the root of HTML document.
  • The head tag contains general information about the document.
  • The content of a head element is important information in terms of search.
  • The Title tag displays a title of the document on the tab of web browser.
  • The body tag is responsible for creating the contents displayed in the browser screen.
  • The h1 tag defines a heading.
  • The p tag defines a paragraph.
Analyzing the web document
HTML Basics: Defining a HTML5 document
1 question
HTML Basics
5 questions

HTML Elements: Heading & Paragraph

  • There are 6 six heading tags, of which the most important heading is the h1 tag.
  • The hr tag is used to separate a content.
  • The p tag ignores rendering line break and more than 2 spaces.
  • If you want to renders a line brake, use the br tag.
  • If you want to render text with many line breaks and spaces, you can use the pre tag.
Heading & Paragraph
HTML Basics: Heading & Paragraph
1 question
HTML Basics: the heading and the paragraph
4 questions

Text Formatting and Link

  • The strong, the em, the mark, the del tag render the text with a special meaning.
  • The a tag connects two webpages.
  • The HTML element contains an attribute.
  • The attribute provides additional information about the element.
  • The attribute consists of a name and a value.
  • The a element has a href and a target attribute.
  • The href attribute provides address information of the linked page.
  • The target attribute determines where the linked page opens.

Text Formatting and Link
HTML Basics: Text Formatting and Link
1 question
Text Formatting and Link
6 questions

The image element

  • Use the HTML 'img' element to define an image.
  • Use the HTML 'src' attribute to define the URL of the image.
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed.
  • Use the HTML width and the height attribute to define the size of the image. It's recommended to use the only one attribute of them not to break the proportion of the image.  
  • The image size can be adjusted by percent in addition to pixel.

The Image Element
HTML Basics: Making an image as a link
1 question
The Image Element
5 questions

List & Table

  • Use the ul element to define an unorderd list
  • Use the ol element to define an ordered list
  • Use the li element to define a list item such as an image or a link
  • Use the table element to define a table
  • Use the tr element to define a table row
  • Use the td element to define a table data
  • Use the th element to define a table heading
List & Table (1/2)
List & Table (2/2)
HTML Basics: List (1)
1 question
HTML Basics: List (2)
1 question
HTML Basics: List (3)
1 question
HTML Basics: List (4)
1 question
HTML Basics: Table
1 question
HTML Basics: List & Table
5 questions

HTML5 Semantic Elements

  • HTML5 has semantic elements to make the content of web document more clear.
  • The header element is an introduction area of web page
  • The <nav> element is an area where content lists or navigation menus are displayed.
  • The section element  renders a section of the document
  • The article element is used to contain independent content
  • The footer element  is a text such as name or contact information displayed at the bottom of each page.

Preview 05:29
HTML5 Semantic Elements
3 questions

The reasons why we should work on a project

  • The fastest way to improve web development skills is to try to work on project as many as possible.
  • Apply what you learned to make something up. Otherwise, you will lose almost everything you learned within a week.

Why should we work on project?

Web Development Process

  • Web development process helps us to do web development more efficiently.
  • Web development process consists of six phases. We will use the only two phases that are the design and the implementation.
  • Design tools offer powerful features, but you can learn them later when you get used to web development.
  • It's enough for you to design with just paper and a pen.
Web Development Process

Drawing a Prototype

  • You can draw a prototype with a pen and paper
Preview 07:09

Working on the implementation phase

  • You should work on the implementation phase based on the prototype we made earlier. 

The Self Introduction Web: Implementation of a Prototype (1/2)
The Self Introduction Web: Implementation of a Prototype (2/2)

Assignment 1: 

- Create your own self-introduction page

Assignment 1: Create your own self-introduction page

The Self Introduction Web with a Navigation Menu

The Self Introduction Web with a Navigation Menu (1/2)
The Self Introduction Web with a Navigation Menu (2/2)

Assignment 2

You should be able to make the web page into multiple pages with a navigation menu by yourself. Just as we did in the previous lecture, divide the web page you created in the assignment 1 into several pages and add a navigation menu and connect all the pages to each other.

Assignment 2: Make the web into multiple pages
Use your own Tech library using Evernote
+ Running Your Web by Deploying it to a Web Server
5 lectures 41:03

Introduction to Deployment

  • We need a web server to serve the web so that people can see it in public.
  • Web hosting means that web server serves a web.
  • When developing a web, we usually separate the development environment and the production environment.
  • Deployment means that we deliver the web we create to the production environment .
  • To serve the web, you need to rent a Web server.
  • A company that lend a web server is called a web hosting company.
Preview 10:51
Intoduction to Deployment
4 questions

Amazon Web Services

  • Cloud computing means using virtual computers over the Internet.
  • Cloud computing is a technology suitable for Internet applications that need to be serviced for unfixed number of users.
  • Amazon Web Services is based on cloud computing.
  • With Amazon Web Services, you can deliver your web services more stably to people even on the busiest day like Black Friday.
  • Because Amazon Web Services is reliable and easy to use, it helps us focus more on web development.

What is Amazon Web Services?

Getting ready to use AWS

  • In order for you to be able to complete the sign up process to AWS, you need your own credit card.
  • AWS charge you to your credit card for the services you use.
  • AWS offer an opportunity to new subscribers free of charge for a year.
  • Nothing gets charged if you don't use any service.

Getting ready to use AWS
Getting ready to use AWS
2 questions

Deploying a web to S3

  • S3 is a storage service.
  • The bucket means a top-level folder that you create in S3.
  • Procedure for hosting a static Web sites using S3 is as follows.

    1) Create a bucket and upload the files of the web to it.

    2) Configure the bucket to enable static web hosting.

    3) Create a bucket policy so that people can access the web.

Deploying a web to S3 (1/2)
Deploying a web to S3 (2/2)
+ Designing a Web with CSS
21 lectures 02:40:14

Introduction to CSS

  • CSS is a language that visually designs HTML document.
  • You have to link CSS file to HTML document in order to design the document.
  • The link tag is used to link CSS file to HTML document.
  • The CSS code has 2 parts that are a selector and a rule.
  • The rule in CSS has 2 parts that are a property and a value.
  • HTML element inherits rules from its' ancestors.
  • The inheritance helps get rid of repetition in programming.
  • Repetition is bad in Programming.
  • The cascading means in CSS that more specific rules are applied first than the general rules. 

Preview 10:12
Introduction to CSS (2/4)
Introduction to CSS (3/4)
Introduction to CSS (4/4)
Introduction to CSS
7 questions
Getting ready to use CSS
1 question

The Text Related Properties

  • You should use the text-align property to align text.
  • The text-decoration property is used to decorate text.
  • You can set the font size by both the relative unit and fixed unit.
  • You can use a dummy text for your web development.

CSS Properties - The Text Related Properties (1/2)
CSS Properties - The Text Related Properties (2/2)
CSS Properties - The Text Related Properties
1 question
CSS Properties - The Text Related Properties
2 questions

CSS Properties: List and Table

  • Use the list-type-type property to hide the bullet markers of the list.
  • You can give a styling to the table by this rule.

    border: 1px solid gray;
    - 1px means a width of the border, solid means a type of the border and gray is a color of the border.

  • You should use a comma to select multiple HTML elements to avoid code repetition.

    CSS Properties - List and Table (1/2)
    CSS Properties - List and Table (2/2)
    CSS Properties - List and Table
    1 question

    The Box Model

    • The box model is a theory that every HTML element is regarded as a box.
    • According to the box model, HTML element is surrounded by the 4 kinds of boxes that are the margin, the border, the padding and the content box.
    • The content box is an area where a content such as a text or an image occupy.
    • The padding box is an area that is between the border box and the content box. You can control the white space around the content box by the padding.
    • The border box surrounds the padding box. It's usually used to draw a line around the padding box.
    • The margin box is a box that is among the elements.  
    • Usually the padding and the margin are used as a white space to give a better looking design to a web page.
    • The width of a HTML element corresponds to the width of the content box.

    The Box Model (1/3)
    The Box Model (2/3)
    The Box Model (3/3)
    The Box Model
    8 questions

    The box model related CSS properties

    • The border-style property specifies what kind of stlye is used to display the border of an element.
    • The box model makes it possible to decorate each 4 sides of the box.
    • The longhand property offers a better readability. And the shorthand property can shorten the amound of the code. 
    The box model related CSS properties: Borders
    The box model related CSS properties: Borders
    1 question

    The box model related CSS properties: Margins

    • You can set the margin property of an element to auto when you want to align it to the center. Of course the element's width should be set to some fixed value because no remaining blank spaces will get split otherwise. 
    • You can use the max-width property to set the maximum width of an element.
    The box model related CSS properties: Margins
    The box model related CSS properties: Margins
    1 question

    Links, Display and Selectors

    • You can give a different styling to a link with a state. The a element has 4 kinds of states. 
    • Every HTML element has a hover state.
    • There are a block level element and an inline level element in HTML.
    • A block-level element always starts on a new line and takes up the full width available. So it doesn't allow other elements placed on the same line. 
    • An inline-level element, on the contrary, not always starts on a new line. And it doesn't take up the full width available but just the width of itself. So it allows other elements placed on the same line unlike the block-level elements. It doesn't have the box model properties.
    • In order to select several kinds of elements at the same time, you should use commas.
    • In order to select a descendant of an ancestor element, you should use space.
    Links, Display and Selectors (1/5)
    Links, Display and Selectors (2/5)
    Links, Display and Selectors (3/5)
    Links, Display and Selectors (4/5)
    Links, Display and Selectors (5/5)
    Links, Display and Selectors
    1 question

    Design the web with CSS

    You will be able to understand how the web design flow

    goes and actually style the web as you plan.

    Design the self introduction web with CSS (1/3)
    Design the self introduction web with CSS (2/3)
    Design the self introduction web with CSS (3/3)
    + Safeguard Your Project with Version Control
    16 lectures 01:52:14

    Version Control

    • Version control makes you create codes without worrying about losing your codes.
    • Version means a meaningful change.
    • A repository means a storage where precious artifacts get saved with their version information.
    • A repository should be treated as holy.
    • Git is a version control tool for a local repository.
    • Github is a platform for a remote repository.

    Preview 06:58
    Introduction to Version Control (2/4)
    Introduction to Version Control (3/4)
    Introduction to Version Control (4/4)


    • Git manages a file by its' state. The states are each committed, modified and staged.
    • Developers usually use Git in the Command Line Interface environment.
    • You don't have to install Git in Cloud 9 because it was already installed.
    • In order to use Git, you should set your user name and email to Git first. And then you should make your work folder as a git repository.
    • Git divides a file into tracked or untracked.

    Git Basics (1/6)
    Git Basics (2/6)
    Git Basics (3/6)
    Git Basics (4/6)
    Git Basics (5/6)
    Git Basics (6/6)
    Git Basics
    9 questions


    • We can use a Github public repository for free as our remote repository.
    • We can gaurantee our codes never get lost by copying what's in a local repository to a remote repository.
    • This is a precedure of how to use github. First, create a github public repository. Second, connect your local repository to the Github repository. Third, push your files to the github repository.
    • You can compare 2 versions both in Git and Github.
    • You can set a cache in Git so that you don't have to enter your Github account everytime you push to Github.
    • You can clone your remote Github repository to your new workspace folder.

    Github Basics (1/3)
    Github Basics (2/3)
    Github Basics (3/3)
    Working on under version control (1/3)
    Working on under version control (2/3)
    Working on under version control (3/3)
    + Improving Productivity by using a library Bootstrap
    29 lectures 03:46:59

    Library and Bootstrap

    • Use a library such as Bootstrap instead of your doing everything from a scratch. It will reduce your working hours a lot.
    • Bootstrap is a library that helps web developers do web design easily.
    Preview 06:56
    Introduction to Bootstrap (2/2)

    Text Alignment

    • text-center
    • text-left
    • text-right
    • text-justify
    Bootstrap Basics: Text Alignment
    Bootstrap Basics: Text Alignment
    1 question


    • table
    • table-striped
    • table-bordered
    • table-hover
    • table-condensed
    Bootstrap Basics: Table
    Bootstrap Basics: Table
    1 question
    Bootstrap Basics: Image
    Bootstrap Basics: Image
    1 question


    • Use a <div> element with class .jumbotron to create a jumbotron.
    Bootstrap Basics: Jumbotron
    Bootstrap Basics: Jumbotron
    1 question


    • The .well class adds a rounded border around an element with a gray background color and some padding.

    Glyphicon Syntax

    • <span class="glyphicon glyphicon-name"></span>

    Bootstrap Basics: Wells & Glyphicons
    Bootstrap Basics: Wells & Glyphicons
    1 question

    Button Styles

    • .btn
    • .btn-default
    • .btn-primary
    • .btn-success
    • .btn-info
    • .btn-warning
    • .btn-danger
    • .btn-link

    Bootstrap Basics: Buttons
    Bootstrap Basics: Buttons
    1 question

    Basic List Groups

    • use an <ul> element with class .list-group, and <li> elements with class .list-group-item
    Bootstrap Basics: List Group (1/2)
    Bootstrap Basics: List Group (2/2)
    Bootstrap Basics: List Group
    1 question

    Basic Panel

    • Panels are created with the .panel class, and content inside the panel has a .panel-body class
    Bootstrap Basics: Panel
    Bootstrap Basics: Panel
    1 question

    Basic Collapsible

    • Collapsibles are useful when you want to hide and show large amount of content:
    Bootstrap Basics: Collapsible

    Tabs and Pills

    • You can display the menu above with Bootstraps' Tabs and Pills
    • Tabs are created with <ul class="nav nav-tabs">:
    • Pills are created with <ul class="nav nav-pills">
    Bootstrap Basics: Tabs & Pills (1/3)
    Bootstrap Basics: Tabs & Pills (2/3)
    Bootstrap Basics: Tabs & Pills (3/3)
    Bootstrap Basics: Tabs
    1 question
    Bootstrap Basics: Pills
    1 question

    Navigation Bars

    • A navigation bar is a navigation header that is placed at the top of the page.
    • A standard navigation bar is created with <nav class="navbar navbar-default">
    Bootstrap Basics: Navigation Bar (1/2)
    Bootstrap Basics: Navigation Bar (2/2)
    Bootstrap Basics: Navigation Bar
    1 question

    Media Objects

    Bootstrap provides an easy way to align media objects (like images or videos) to the left or to the right of some content. This can be used to display blog comments, tweets and so on:

    Bootstrap Basics: Media Objects
    Bootstrap Basics: Media Objects
    1 question

    The Carousel Plugin

    • The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
    Bootstrap Basics: Carousel (1/2)
    Bootstrap Basics: Carousel (2/2)

    The Modal Plugin

    • The Modal plugin is a dialog box/popup window that is displayed on top of the current page.
    Bootstrap Basics: Modal

    The Tooltip Plugin

    • The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element
    Bootstrap Basics: Tooltip
    Bootstrap Basics: Grids
    Bootstrap Basics: Grids
    1 question
    Bootstrap Basics: Image Gallery

    Designing the web with Bootstrap

    Designing the web with Bootstrap (1/5)
    Designing the web with Bootstrap (2/5)
    Designing the web with Bootstrap (3/5)
    Designing the web with Bootstrap (4/5)
    Designing the web with Bootstrap (5/5)
    • You should have some experience in using the web

    Learning Web Development is NOT easy

    Learning about web development is never easy because it requires knowledge of multiple languages, programming methodologies, computer science theories and getting used to many development tools. You also need to get lots of development experiences under your belt to finally be able to create a decent web. As a matter of fact, all these things require a lot of discipline of you. 

    Build up a Foundation in the only Basics

    So you should get a foundation in the basics first and then later dive deep as a specialist in an area that appeals to you. This course has been designed specifically for the complete beginner who wants to get a strong foundation of web development. Basically you will learn a few selected very basics of web development technologies. The course includes:

    • 93 Lectures
    • 28 Coding Exercises
    • 13 Quizzes
    • Code-Alongs
    • Projects
    • Assignments
    • Downloads

    Contents and Overview

    This course has 6 sections and each section deals with the following subjects.

    Section 1: Introduction to Web Development

    Section 2: Creating a web document in HTML

    Section 3: Running Your Web by Deploying it to a Web Server

    Section 4: Designing a web with CSS

    Section 5: Safeguard Your Project with Version Control

    Section 6: Improving Productivity by using a library Bootstrap

    To summarize what you will be able to do by the end of the course, you will be able to create a web document in HTML and design it with CSS and Bootstrap. You will be able to get your web development under version control using Git and Github. And finally, you will be able to deploy your web to a web server so that everyone can see you web in public.

    The Course designed for the Novice

    What I focus on as an instruction designer when designing a course is get students get a strong foundation in the basics through practices. So you will be able to understand basic concepts of web development first through the lectures, then make sure if your understand them correctly through the quizzes, practice what you learn through the coding exercises and work on your own project as a course assignment.

    This course has been particularly designed for novice learners who want to learn creating a web. The course focuses heavily on the basics. And you will not be surprised or discouraged by the not explained jargons or jumping to the higher difficulties all of a sudden.

    Who this course is for:
    • Any beginner who wants to create value through creating the web
    • Any beginner who is struggling with difficult learning resources
    • Any beginner who wants to have a good start to the long journey of learing web development