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:
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.
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
Brief introduction to the course
Introduction to Web Development
Creating a web in HTML
Deploying a web
Designing a web with CSS
Designing a web with Bootstrap
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 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.
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.
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
1) Basic grammar of HTML
2) Basic grammar of HTML
HTML Elements: Heading & Paragraph
Text Formatting and Link
The image element
List & Table
HTML5 Semantic Elements
The reasons why we should work on a project
Web Development Process
Working on the implementation phase
- Create your own self-introduction page
The Self Introduction Web with a Navigation Menu
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.
Introduction to Deployment
Amazon Web Services
Getting ready to use AWS
Deploying a web to S3
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.
Introduction to CSS
The Text Related Properties
CSS Properties: List and Table
The Box Model
The box model related CSS properties
The box model related CSS properties: Margins
Links, Display and Selectors
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.
Library and Bootstrap
<div>element with class
.jumbotronto create a jumbotron.
Basic List Groups
Tabs and Pills
<ul class="nav nav-tabs">:
<ul class="nav nav-pills">
<nav class="navbar navbar-default">
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:
The Carousel Plugin
The Modal Plugin
The Tooltip Plugin
Designing the web with Bootstrap
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.
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.
- Bachelor Degree in Computer Engineering at Ajou University
- Master Degree in Education Technology at Seoul National University