Teach on Udemy

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

Learn More

Your cart is empty.

Keep shopping

Practical Web Programming 101

Name: Practical Web Programming 101
Rating: 3.5 (13 reviews)

Build A Functional, End To End Website!

Created byIreneusz Erik Owsiak

Last updated 2/2017

English

English [Auto],

What you'll learn

Design and build an entire professional website with interactive features
Use SQLite to store informatoin
Build a class library in C#
Work with IIS by setting up IIS, creating and configuring new applications
Add extensions to existing framework classes in C#
Use select, insert and update sql language features
Create, run and interpret unit tests
Use string interpolation in ECMASCRIPT 6 / JavaScript
Use arrow functions in ECMASCRIPT 6 / JavaScript
Attach & debug IIS processes
Create classes in JavaScript
Create powerful JavaScript code
Write SQL code in an applied context
Learn to think like an application architect

Course content

10 sections • 69 lectures • 10h 16m total length

Course Intro5:49
Intro to the course and zip files with code for the finished project.

Dowload & Install Dev Tools0:55
Download and install the essential dev tools for practical web programming, including Notepad++ for editing, Visual Studio Code for html/css/json/javascript, and Visual Studio 2015 for C# back end.
NuGet - installed0:49
To make sure that VS Comm. 2015 came with NuGet.
NuGet - not installed1:06
Edit Host File3:34
Setup Webserver IIS2:15
Set up a web server on your Windows machine by enabling Internet Information Services through control panel, then verify the management console and CGI settings match the video.
Testing Webserver4:24
Test the web server by loading localhost in Firefox to verify static pages and SBX processing, then deploy info.zip to the www root with Everyone full control.
Creating joespizza.dev App Site6:17
Set up a local hosting folder and map it to an IIS site named Joe's Pizza, using the WW root path and updating the hosts file.
Lets tune VS Code6:09
Learn to tune Visual Studio Code to speed up web development by using code snippets, configuring preferences, and creating language-specific snippets to auto-generate HTML boilerplate and page structure.
App Architecture3:53

Add Imgs to the Site2:46
index.html - top banner (html, css)16:05
Create and style a top banner in an index.html page using html and css, load images, add text and links, and apply a 30-degree gradient to achieve a polished header.
index.html - page body (html, css)14:46
/order/order.html - part 19:58
Default page in the orders subfolder.
/order/order.html - part 24:26
/submit/submit.html - part 114:17
/submit/submit.html - part 26:15
Build and test a submit page address form with street address, city, and zip code fields using Bootstrap inputs, with labels and placeholders.

Please take a free course: JavaScript in 55 Minutes0:39
Correction to order.html1:24
We must add missing html code to the file.
menu.js - JSON data type14:34
Student will define a JSON document for a menu and turn it into a JavaScript object.
Heads Up2:00
Few words about the app from now on.
app.js, order.html6:44
Video00.mp4
app.js, html-templates.js16:02
Video01.mp4
app.js, html-templates.js, menu.js18:32
Video02.mp4
app.css - part 112:28
Video03.mp4
app.js, app.css correction1:56
We need to rename PizzaOrderSubmit to PizzaOrderNext
app.css - part 26:29
app.js12:12
Video05.mp4
/submit/submit.html - part 33:22
Tweak to html code.
app.css8:53
Video06.mp4 - add css to style submit.html
html-templates.js3:42
Video07.mp4 - add new template for submit page.
app.js, submit.htm & debugger13:43
Video08.mp4 - add InitSubmit & LoadOrderDetails methods to App object.
app.js6:05
Video09.mp4 - add address functionality to the app.js file.
app.css, order.html9:32
Video10.mp4 - style address area & fix to order.html
app.js, html-templates.js13:37
Video11.mp4 - finishing LoadOrderAddress method
app.js16:01
Video12.mp4 - add PrePostOrder method, homework: ValidateAddressData method
app.js, app.css13:03
Video13.mp4 - add IsAddressCached, finish PrePostORder & started PostOrder method. Fix to app.css
clt-backend.js, app.js, submit.html15:47
Video14.mp4 - add ClientBackend class
ops.aspx, web.config10:49
Video15.mp4 - add ops.aspx, create backend folder, start using VS 2015, try/catch/finally
app.js12:47
Video16.mp4 - add MonitorOrderStatus, bug fixes

Starting Backend project.7:19
BackendVideo00.mp4 - Basic info about the project & project setup.
Write the constructor and data source in Ops.cs10:53
BackendVideo.mp4 - Create class constructor & data fields.
Add method FormatEx to String objects.3:29
BackendVideo02.mp4 - extensions
Ops.cs - start work on class methods15:48
BackendVideo03.mp4 - Add TotalCost, OpenConnecton & PostOrder methods
Ops.cs8:45
BackendVideo04.mp4 - Complete PostOrder method
Intro into Unit Testing & first test15:36
Quick intro to unit testing and first unit test for PostOrder method.
Ops.cs & OpsTests.cs16:59
Add new unit test and two Ops class methods.
Ops.cs & OpenOrder.cs18:45
Work on ReadOpenOrders & add OpenOrder class
Ops.cs & OpsTests.cs10:41
Complete ReadOpenOrdersTest unit test.
OpsTests.cs7:45
Add TotalCostTest & UpdateOrderTest methods.

Start Pizza Shop Side of the App - shop.html8:34
Add shop subfolder & shop.html file.
html-templates.js12:10
Add template used on the pizza shop side of the app.
shop-backend.js4:34
Add backend interface to shop side of the app.
shop.css & shop.html5:33
CSS for shop.html & small correction to shop.html
shop.js11:24
Start work on the shop.js file.
shop.js9:59
Add order form buttons.
shop.js13:15
Add none dependent methods.

Requirements

Student should know what HTML is; but even without it student can learn from the this course
Willing to learn and be curious

Description

Why take this course?

Three main reasons:

1. It's taught by an experienced programmer who can show you the kinds of unique insights no other person here can

2. To become GREAT at web development, you have to learn how to integrate multiple skills. This course does just that.

3. You will acquire years worth of skills and insights in only 10.5 hours

In this course, Erik, who's been doing website development for nearly two decades, demonstrates how to integrate a suite of powerful technologies to build an interactive and fully functional modern website. This website has features like order placing, real time order tracking, and more! You'll learn how to use each of the following technologies like an coding hero:

1. JavaScript, used to add dynamic features to the website

2. CSS, used to layout the website

3. C#, used to power the backend of the website

4. HTML, used to structure the overall web pages

5. SQL Lite, used as an information storage system

6. IIS, used as a web server

7. jQuery, used as a way of making interactive pages

8. JSON, used to transfer information

9. Website design you can use in your own professional website

Thanks for reading, and if you're ready to push your skills much higher, JOIN TODAY!

Notes:

1. jQuery is a trademark of the JS foundation. This course is not affiliated with the JS foundation.

2. Parts of promo licensed from presentermedia

Who this course is for:

Someone who wants to know how things are connected on the web

Practical Web Programming 101

What you'll learn

Explore related topics

Course content

Intro1 lecture • 6min

Prep work9 lectures • 29min

Let's build the client frontend7 lectures • 1hr 9min

Client frontend JavaScript files23 lectures • 3hr 40min

Lets Build App's Backend2 lectures • 10min

Coding the C# backend component (Backend.dll)10 lectures • 1hr 56min

Putting it Together - Consumer Side3 lectures • 40min

Pizza Shop Side of the App7 lectures • 1hr 5min

Putting it Together6 lectures • 57min

The End1 lecture • 4min

Requirements

Description

Who this course is for: