Core Web Development 1: Get used to the basics
5.0 (3 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.
58 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Core Web Development 1: Get used to the basics to your Wishlist.

Add to Wishlist

Core Web Development 1: Get used to the basics

Focus on getting a foundation in the web development basics
5.0 (3 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.
58 students enrolled
Created by Daniel Lin
Last updated 5/2017
English
English
Current price: $12 Original price: $180 Discount: 93% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 12 hours on-demand video
  • 26 Supplemental Resources
  • 28 Coding exercises
  • Full lifetime access
  • Access on mobile and TV

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I 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
View Curriculum
Requirements
  • You should have some experience in using the web
Description

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 is the target audience?
  • 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
Compare to Other Web Development Courses
Curriculum For This Course
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
09:32

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
12:43

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
09:00

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
09:32

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
12:57

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
11:24

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)
08:18

List & Table (2/2)
07:16

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?
06:00

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
05:29

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)
09:02

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

Assignment 1: 

- Create your own self-introduction page

Assignment 1: Create your own self-introduction page
00:39

The Self Introduction Web with a Navigation Menu

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

The Self Introduction Web with a Navigation Menu (2/2)
06:16

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
00:22

Use your own Tech library using Evernote
05:49
+
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?
10:27

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
06:55

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)
07:22

Deploying a web to S3 (2/2)
05:28
+
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)
07:47

Introduction to CSS (3/4)
06:16

Introduction to CSS (4/4)
07:02

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)
08:09

CSS Properties - The Text Related Properties (2/2)
08:25

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)
    08:41

    CSS Properties - List and Table (2/2)
    05:18

    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)
    08:34

    The Box Model (2/3)
    06:36

    The Box Model (3/3)
    06:20

    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
    09:04

    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
    08:02

    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)
    07:06

    Links, Display and Selectors (2/5)
    05:58

    Links, Display and Selectors (3/5)
    05:18

    Links, Display and Selectors (4/5)
    09:29

    Links, Display and Selectors (5/5)
    05:13

    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)
    09:46

    Design the self introduction web with CSS (2/3)
    09:04

    Design the self introduction web with CSS (3/3)
    07:54
    +
    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)
    07:05

    Introduction to Version Control (3/4)
    05:38

    Introduction to Version Control (4/4)
    05:04

    Git

    • 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)
    03:54

    Git Basics (2/6)
    04:34

    Git Basics (3/6)
    07:09

    Git Basics (4/6)
    07:03

    Git Basics (5/6)
    07:33

    Git Basics (6/6)
    05:39

    Git Basics
    9 questions

    Github

    • 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)
    06:19

    Github Basics (2/3)
    06:26

    Github Basics (3/3)
    10:14

    Working on under version control (1/3)
    08:12

    Working on under version control (2/3)
    08:29

    Working on under version control (3/3)
    11:57
    +
    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)
    06:12

    Text Alignment

    • text-center
    • text-left
    • text-right
    • text-justify
    Bootstrap Basics: Text Alignment
    10:07

    Bootstrap Basics: Text Alignment
    1 question

    Table

    • table
    • table-striped
    • table-bordered
    • table-hover
    • table-condensed
    Bootstrap Basics: Table
    08:14

    Bootstrap Basics: Table
    1 question

    Bootstrap Basics: Image
    05:28

    Bootstrap Basics: Image
    1 question

    Jumbotron

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

    Bootstrap Basics: Jumbotron
    1 question

    Wells

    • 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
    09:34

    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
    08:53

    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)
    08:07

    Bootstrap Basics: List Group (2/2)
    06:10

    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
    05:05

    Bootstrap Basics: Panel
    1 question

    Basic Collapsible

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

    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)
    09:18

    Bootstrap Basics: Tabs & Pills (2/3)
    08:17

    Bootstrap Basics: Tabs & Pills (3/3)
    08:30

    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)
    06:42

    Bootstrap Basics: Navigation Bar (2/2)
    07:03

    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
    09:01

    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)
    08:05

    Bootstrap Basics: Carousel (2/2)
    06:12

    The Modal Plugin

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

    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
    02:58

    Bootstrap Basics: Grids
    09:27

    Bootstrap Basics: Grids
    1 question

    Bootstrap Basics: Image Gallery
    07:37

    Designing the web with Bootstrap


    Designing the web with Bootstrap (1/5)
    06:10

    Designing the web with Bootstrap (2/5)
    08:44

    Designing the web with Bootstrap (3/5)
    10:41

    Designing the web with Bootstrap (4/5)
    12:13

    Designing the web with Bootstrap (5/5)
    10:30
    About the Instructor
    Daniel Lin
    4.5 Average rating
    85 Reviews
    811 Students
    3 Courses
    Instruction Designer

    Summary

    I am an instruction designer and a fullstack web developer. I am mainly focusing on designing courses for the beginner so that they can jump the hurdle to an intermediate level without getting discouraged. I believe education should be kind to students. They shouldn't be frustrated while learning. Whether learning can be fun or frustrating depends on how it is designed. 


    Experience

    I started my career as a software engineer in Samsung Electronics. Then I got interested in education because I felt it was the most productive among any other fields. Then I decided to be an educator for my whole life. I am very skillful at creating a good learning experience for students. Now I am running Nuts & Bolts, an organization providing e-Learning contents.


    Education

    - Bachelor Degree in Computer Engineering at Ajou University

    - Master Degree in Education Technology at Seoul National University