Teach on Udemy

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

Learn More

Your cart is empty.

Keep shopping

Core Web Development 1: Get used to the basics

Name: Core Web Development 1: Get used to the basics
Rating: 4.5 (11 reviews)

Focus on getting a foundation in the web development basics

Created byDaniel Lin

Last updated 5/2017

English

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

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

6 sections • 93 lectures • 11h 46m total length

Introduction - part 19:01
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
Introduction - part 23:50
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
The web and the internet9:32
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

Creating a web document in HTML9:28
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.
Using Cloud 9 for creating a web document12:43
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
Analyzing the web document9:00
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.
HTML Basics: Defining a HTML5 document
HTML Basics
Heading & Paragraph9:32
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.
HTML Basics: Heading & Paragraph
HTML Basics: the heading and the paragraph
Text Formatting and Link12:57
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.
HTML Basics: Text Formatting and Link
Text Formatting and Link
The Image Element11:24
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.
HTML Basics: Making an image as a link
The Image Element
List & Table (1/2)8:18
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 (2/2)7:16
HTML Basics: List (1)
HTML Basics: List (2)
HTML Basics: List (3)
HTML Basics: List (4)
HTML Basics: Table
HTML Basics: List & Table
HTML5 Semantic Elements5:29
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.
HTML5 Semantic Elements
Why should we work on project?6:00
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.
Web Development Process5:29
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.
Drawing a Prototype7:09
Drawing a Prototype
You can draw a prototype with a pen and paper
The Self Introduction Web: Implementation of a Prototype (1/2)9:02
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 (2/2)7:52
Assignment 1: Create your own self-introduction page0:39
Assignment 1:

- Create your own self-introduction page
The Self Introduction Web with a Navigation Menu (1/2)8:49
The Self Introduction Web with a Navigation Menu
The Self Introduction Web with a Navigation Menu (2/2)6:16
Turn a single web page into multiple pages with a navigation menu, and see that building a web isn’t as difficult as it seems.
Assignment 2: Make the web into multiple pages0:22
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.
Use your own Tech library using Evernote5:49
Learn to build a personal tech library with Evernote to store and quickly retrieve HTML and other web development knowledge, helping you beat the forgetting curve without memorizing every detail.

Intoduction to Deployment10:51
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.
Intoduction to Deployment
What is Amazon Web Services?10:27
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.
Getting ready to use AWS6:55
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
Deploying a web to S3 (1/2)7:22
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 (2/2)5:28

Introduction to CSS (1/4)10:12
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.
Introduction to CSS (2/4)7:47
Introduction to CSS (3/4)6:16
Introduction to CSS (4/4)7:02
Learn how CSS cascading and specificity determine which styles apply, from body defaults to targeted h1 rules, and see inheritance and rule precedence in action.
Introduction to CSS
Getting ready to use CSS
CSS Properties - The Text Related Properties (1/2)8:09
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 (2/2)8:25
Discover how to style text with CSS, including justify alignment, text-decoration (removing underline, applying line-through), font-size control, and the comparison of em versus fixed units.
CSS Properties - The Text Related Properties
CSS Properties - The Text Related Properties
CSS Properties - List and Table (1/2)8:41
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 (2/2)5:18
Define CSS rules for th and td borders to improve table readability, avoid repetition with comma separated selectors, and hide bullets with list style type, preparing for the box model.
CSS Properties - List and Table
The Box Model (1/3)8:34
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 (2/3)6:36
The Box Model (3/3)6:20
Explore the CSS box model by analyzing a 600px width, showing that the content box determines the width while margins, borders, and padding create surrounding space.
The Box Model
The box model related CSS properties: Borders9:04
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: Margins8:02
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
Links, Display and Selectors (1/5)7:06
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 (2/5)5:58
Links, Display and Selectors (3/5)5:18
Handle CSS display behavior by using block and inline-block, place paragraphs on one line, and center images by setting display to block and margins, enabling responsive wrapping.
Links, Display and Selectors (4/5)9:29
Learn to target specific elements with css selectors using commas for kinds, descendant selectors inside headers, and grouping to apply styles to elements, including class-based selections like p2p3.
Links, Display and Selectors (5/5)5:13
Links, Display and Selectors
Design the self introduction web with CSS (1/3)9:46
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 (2/3)9:04
Center text, color it dark slate gray, justify paragraphs, add indentation and white space above image between sections, underline headings, border table with padding, center-align content for a magazine layout.
Design the self introduction web with CSS (3/3)7:54
Improve the self introduction web with css by removing link underlines and styling link states, tightening table borders and margins, and centering the footer to wrap up the design.

Introduction to Version Control (1/4)6:58
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.
Introduction to Version Control (2/4)7:05
Explore the essentials of version control, comparing Git and GitHub with costly tools like Clearcase, and learn how history, collaboration, and meaningful versions boost productivity in web development.
Introduction to Version Control (3/4)5:38
Explore how version control in web development tracks meaningful changes, creates versions to snapshot artifacts, and safely reverts to prior states using tools like Git in a local repository.
Introduction to Version Control (4/4)5:04
Git Basics (1/6)3:54
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 (2/6)4:34
Install and configure git for command line use, mastering version control in a CLI environment. Learn why developers prefer CLI over GUI and practice basic commands like ls in Cloud9.
Git Basics (3/6)7:09
Explore verifying and using Git in Cloud 9, understand why you may not need local Git installation, and learn to approach setting up a scalable development environment.
Git Basics (4/6)7:03
Git Basics (5/6)7:33
Add files to a git repository, stage them, and commit to create new versions with descriptive messages; verify versions, see author and date, and track changes.
Git Basics (6/6)5:39
Git Basics
Github Basics (1/3)6:19
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 (2/3)6:26
Github Basics (3/3)10:14
Working on under version control (1/3)8:12
Design the web with CSS while using Git and GitHub for version control, copying existing CSS to style a horizontal navigation menu, and applying a consistent font with Google Pangolin.
Working on under version control (2/3)8:29
Working on under version control (3/3)11:57

Introduction to Bootstrap (1/2)6:56
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.
Introduction to Bootstrap (2/2)6:12
Bootstrap Basics: Text Alignment10:07
Text Alignment
text-center
text-left
text-right
text-justify
Bootstrap Basics: Text Alignment
Bootstrap Basics: Table8:14
Table
table
table-striped
table-bordered
table-hover
table-condensed
Bootstrap Basics: Table
Bootstrap Basics: Image5:28
Bootstrap Basics: Image
Bootstrap Basics: Jumbotron7:02
Jumbotron
Use a <div> element with class .jumbotron to create a jumbotron.
Bootstrap Basics: Jumbotron
Bootstrap Basics: Wells & Glyphicons9:34
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
Bootstrap Basics: Buttons8:53
Button Styles
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
Bootstrap Basics: Buttons
Bootstrap Basics: List Group (1/2)8:07
Basic List Groups
use an <ul> element with class .list-group, and <li> elements with class .list-group-item
Bootstrap Basics: List Group (2/2)6:10
Bootstrap Basics: List Group
Bootstrap Basics: Panel5:05
Basic Panel
Panels are created with the .panel class, and content inside the panel has a .panel-body class
Bootstrap Basics: Panel
Bootstrap Basics: Collapsible9:50
Basic Collapsible

Collapsibles are useful when you want to hide and show large amount of content:
Bootstrap Basics: Tabs & Pills (1/3)9:18
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 (2/3)8:17
Bootstrap Basics: Tabs & Pills (3/3)8:30
Explore bootstrap basics: tabs and pills, and practice modifying the tabs and their data values.
Bootstrap Basics: Tabs
Bootstrap Basics: Pills
Bootstrap Basics: Navigation Bar (1/2)6:42
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 (2/2)7:03
Learn to add dropdown menus to navigation bars, align links to the right, and include sign up and sign in links with glyphicons using the dropdown menu class.
Bootstrap Basics: Navigation Bar
Bootstrap Basics: Media Objects9:01
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: Carousel (1/2)8:05
The Carousel Plugin

The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
Bootstrap Basics: Carousel (2/2)6:12
Bootstrap Basics: Modal3:53
The Modal Plugin

The Modal plugin is a dialog box/popup window that is displayed on top of the current page.
Bootstrap Basics: Tooltip2:58
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: Grids9:27
Bootstrap Basics: Grids
Bootstrap Basics: Image Gallery7:37
Build a clean image gallery with the Bootstrap grid system and thumb class, then compare how Bootstrap speeds up design work versus css in the final self introduction page.
Designing the web with Bootstrap (1/5)6:10
Designing the web with Bootstrap
Designing the web with Bootstrap (2/5)8:44
Designing the web with Bootstrap (3/5)10:41
Adjust the page layout by adding white spaces to the header and heading. Then implement bootstrap dynamic tabs to display sections more elegantly, improving the overall design.
Designing the web with Bootstrap (4/5)12:13
Designing the web with Bootstrap (5/5)10:30

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

Core Web Development 1: Get used to the basics

What you'll learn

Explore related topics

Coding Exercises

Course content

Introduction to Web Development3 lectures • 22min

Creating a web document in HTML19 lectures • 2hr 24min

Running Your Web by Deploying it to a Web Server5 lectures • 41min

Designing a Web with CSS21 lectures • 2hr 40min

Safeguard Your Project with Version Control16 lectures • 1hr 52min

Improving Productivity by using a library Bootstrap29 lectures • 3hr 47min

Requirements

Description

Who this course is for: