HTML, CSS, and Javascript for Web Developers

About this course: Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

Who is this class for: WE ARE NOT COVERING RUBY ON RAILS IN THIS COURSE AND NO RUBY ON RAILS KNOWLEDGE IS REQUIRED TO COMPLETE IT! This course is geared to ANYONE who is interested in starting in Web Development. It starts with the basics and methodically goes to a fair amount of depth on each of the subjects. Most importantly, it allows the students to follow a real-world project with a real client from beginning of talking to the customer to fully coding their website. The portion on Javascript does require you to be at least familiar with some programming concepts like looping, variable storage, etc.

Created by:  Johns Hopkins University

• Taught by:  Yaakov Chaikin, Adjunct Professor, Graduate Computer Science

  Whiting School of Engineering

Basic Info Course 4 of 6 in the Ruby on Rails Web Development Specialization Commitment 5 weeks of study, 4-6 hours/week Language English How To Pass Pass all graded assignments to complete the course. User Ratings 4.9 stars Average User Rating 4.9See what learners said Coursework

Each course is like an interactive textbook, featuring pre-recorded videos, quizzes and projects.

Help from your peers

Connect with thousands of other learners and debate ideas, discuss course material, and get help mastering concepts.

Certificates

Earn official recognition for your work, and share your success with friends, colleagues, and employers.

Johns Hopkins University The mission of The Johns Hopkins University is to educate its students and cultivate their capacity for life-long learning, to foster independent and original research, and to bring the benefits of discovery to the world.

Syllabus


WEEK 1


Introduction to HTML5



In this module we will learn the basics of HTML5. We'll start with instructional videos on how to set up your development environment, go over HTML5 basics like valid document structure, which elements can be included inside other elements and which can not, discuss the meaning and usefulness of HTML5 semantic tags, and go over essential HTML5 tags.


18 videos, 6 readings, 11 practice quizzes expand

1. Video: Course Introduction
2. Reading: How Grading and Being Late on Assignments Works
3. Reading: Recommended Books
4. Reading: CHECK OUT MY SITE!
5. Reading: ALL of the EXAMPLE SOURCE CODE for this Course
6. Practice Quiz: Optional Practice Quiz
7. Video: Welcome to Module 1: Introduction to HTML5
8. Video: Development Environment Setup, Part 1
9. Video: Development Environment Setup, Part 2: MacOS
10. Video: Development Environment Setup, Part 2: Windows
11. Practice Quiz: Optional Practice Quiz
12. Video: Development Environment Setup, Part 3: Github and Browser Sync
13. Video: Resources for Asking Questions
14. Video: Lecture 1: What is HTML?
15. Practice Quiz: Optional Practice Quiz
16. Video: Lecture 2: Relevant History of HTML
17. Practice Quiz: Optional Practice Quiz
18. Video: Lecture 3: Anatomy of an HTML Tag
19. Practice Quiz: Optional Practice Quiz
20. Video: Lecture 4: Basic HTML Document Structure
21. Practice Quiz: Optional Practice Quiz
22. Video: Lecture 5: HTML Content Models
23. Practice Quiz: Optional Practice Quiz
24. Video: Lecture 6: Heading Elements (and some new HTML5 semantic comments)
25. Practice Quiz: Optional Practice Quiz
26. Video: Lecture 7: Lists
27. Video: Lecture 8: HTML Character Entity References
28. Practice Quiz: Optional Practice Quiz
29. Video: Lecture 9: Creating Links
30. Practice Quiz: Optional Practice Quiz
31. Video: Lecture 10: Displaying Images
32. Reading: Frequently Asked Questions
33. Practice Quiz: Optional Practice Quiz
34. Reading: CONNECT WITH ME!
35. Video: Module 1 Wrap-Up

Graded: Module 1 Quiz

WEEK 2


Introduction to CSS3



A lot of people "tinker" with CSS. In this module, we'll take you from the very basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict resolution. We'll go over the 'box model', background property, etc. We'll finish off the module with learning about Responsive Design using our own CSS code as well as start introducing Twitter Bootstrap with its essential Grid System.


27 videos, 4 readings, 14 practice quizzes expand

1. Video: Welcome to Module 2: Introduction to CSS3
2. Reading: Recommended Books
3. Reading: ENTER RAFFLE (ends April 23rd, 2017)
4. Video: Lecture 11: Power of CSS
5. Video: Lecture 12: Anatomy of a CSS Rule
6. Practice Quiz: Optional Practice Quiz
7. Video: Lecture 13: Element, Class, and ID Selectors
8. Practice Quiz: Optional Practice Quiz
9. Video: Lecture 14: Combining Selectors
10. Practice Quiz: Optional Practice Quiz
11. Video: Lecture 15: Pseudo-Class Selectors
12. Practice Quiz: Optional Practice Quiz
13. Video: Lecture 16: Style Placement
14. Practice Quiz: Optional Practice Quiz
15. Video: Lecture 17, Part 1: Conflict Resolution
16. Video: Lecture 17, Part 2: Conflict Resolution
17. Practice Quiz: Optional Practice Quiz
18. Video: Lecture 18, Part 1: Styling Text
19. Video: Lecture 18, Part 2: Styling Text
20. Reading: CONNECT WITH ME!
21. Practice Quiz: Optional Practice Quiz
22. Video: Lecture 19, Part 1: The Box Model
23. Video: Lecture 19, Part 2: The Box Model
24. Video: Lecture 19, Part 3: The Box Model
25. Practice Quiz: Optional Practice Quiz
26. Video: Lecture 20: The background Property
27. Practice Quiz: Optional Practice Quiz
28. Video: Lecture 21: Positioning Elements by Floating
29. Practice Quiz: Optional Practice Quiz
30. Video: Lecture 22, Part 1: Relative and Absolute Element Positioning
31. Video: Lecture 22, Part 2: Relative and Absolute Element Positioning
32. Practice Quiz: Optional Practice Quiz
33. Video: Lecture 23, Part 1: Media Queries
34. Video: Lecture 23, Part 2: Media Queries
35. Practice Quiz: Optional Practice Quiz
36. Video: Lecture 24, Part 1: Responsive Design
37. Video: Lecture 24, Part 2: Responsive Design
38. Practice Quiz: Optional Practice Quiz
39. Video: Lecture 25, Part 1: Introduction to Twitter Bootstrap
40. Video: Lecture 25, Part 2: Introduction to Twitter Bootstrap
41. Video: Lecture 26, Part 1: The Bootstrap Grid System
42. Video: Lecture 26, Part 2: The Bootstrap Grid System
43. Practice Quiz: Optional Practice Quiz
44. Reading: Frequently Asked Questions
45. Video: Module 2 Wrap-Up

Graded: Module 2 Coding Assignment

WEEK 3


Coding the Static Restaurant Site



Ready for some REAL fun? This module is it! We'll go over some basics of interacting with a client when managing a web site project and then go visit a real client at their place of business (a Chinese restaurant), help the owner figure out what she wants in a site, and get acquainted with the restaurant in general. We'll spend the rest of the module building a real web site for this business from scratch and you'll get to sit next to me and watch as the site comes together.


24 videos, 3 readings, 5 practice quizzes expand

1. Video: Welcome to Module 3: Coding the Static Restaurant Site
2. Reading: Recommended Books
3. Video: Lecture 27, Part 1: Visit with the Client
4. Video: Lecture 27, Part 2: Visit with the Client (Field Trip)
5. Reading: ENTER RAFFLE (ends April 23rd, 2017)
6. Video: Lecture 28: Design Overview
7. Video: Lecture 29: Some Ground Rules and Overview of Setup
8. Practice Quiz: Optional Practice Quiz
9. Video: Lecture 30, Part 1: Coding Basics of Navbar Header
10. Video: Lecture 30, Part 2: Coding Basics of Navbar Header
11. Practice Quiz: Optional Practice Quiz
12. Video: Lecture 31: Coding Button for Future Collapsible Menu
13. Practice Quiz: Optional Practice Quiz
14. Video: Lecture 32, Part 1: Coding Nav Menu Buttons
15. Video: Lecture 32, Part 2: Coding Nav Menu Buttons
16. Video: Lecture 33, Part 1: Fixing Navbar Layout, Text, and Dropdown Menus
17. Video: Lecture 33, Part 2: Fixing Navbar Layout, Text, and Dropdown Menus
18. Video: Lecture 34: Coding the Jumbotron
19. Practice Quiz: Optional Practice Quiz
20. Video: Lecture 35, Part 1: Coding Navigation Tiles
21. Video: Lecture 35, Part 2: Coding Navigation Tiles
22. Video: Lecture 36, Part 1: Coding the Footer
23. Video: Lecture 36, Part 2: Coding the Footer
24. Practice Quiz: Optional Practice Quiz
25. Video: Lecture 37, Part 1: Coding the Menu Categories
26. Video: Lecture 37, Part 2: Coding the Menu Categories
27. Video: Lecture 38, Part 1: Coding the Single Menu Category Page
28. Video: Lecture 38, Part 2: Coding the Single Menu Category Page
29. Video: Lecture 38, Part 3: Coding the Single Menu Category Page
30. Video: Lecture 39: Testing the Mobile Version on a Real Phone
31. Reading: Frequently Asked Questions
32. Video: Module 3 Wrap-Up

Graded: Module 3 Coding Assignment

WEEK 4


Introduction to Javascript



What fun would a web site be if there was no functionality to it? In this module, we are going to concentrate on learning the fundamentals of the Javascript language. A lot of even seasoned developers “tinker” with Javascript without really understanding how the language works. That leads to viewing the language as more of a nuisance instead of a powerful tool. That is why we are going to concentrate not only on the “how” but also on the “why”, so you are empowered by the Javascript language features, not confused by them. We’ll cover just about everything - from common language constructs and Javascript types to objects, functions, arrays, closures, and scope isolation.


24 videos, 3 readings, 9 practice quizzes expand

1. Video: Welcome to Module 4: Introduction to Javascript
2. Reading: Recommended Books
3. Video: Lecture 40, Part 1: Adjusting Development Environment for Javascript Development
4. Video: Lecture 40, Part 2: Where to Place Javascript Code
5. Video: Lecture 41, Part 1: Defining Variables, Function, and Scope
6. Video: Lecture 41, Part 2: Defining Variables, Function, and Scope
7. Practice Quiz: Optional Practice Quiz
8. Video: Lecture 42, Part 1: Javascript Types
9. Video: Lecture 42, Part 2: Javascript Types
10. Practice Quiz: Optional Practice Quiz
11. Video: Lecture 43, Part 1: Common Language Constructs
12. Video: Lecture 43, Part 2: Common Language Constructs
13. Video: Lecture 43, Part 3: Common Language Constructs
14. Video: Lecture 44: Handling Default Values
15. Practice Quiz: Optional Practice Quiz
16. Video: Lecture 45, Part 1: Creating Objects Using 'new Object()' Syntax
17. Video: Lecture 45, Part 2: Creating Objects Using Object Literal Syntax
18. Practice Quiz: Optional Practice Quiz
19. Video: Lecture 46: Functions Explained
20. Practice Quiz: Optional Practice Quiz
21. Video: Lecture 47, Part 1: Passing Variables by Value vs. by Reference
22. Video: Lecture 47, Part 2: Passing Variables by Value vs. by Reference
23. Practice Quiz: Optional Practice Quiz
24. Video: Lecture 48: Function Constructors, prototype, and the 'this' Keyword
25. Video: Lecture 49: Object Literals and the 'this' Keyword
26. Reading: ENTER RAFFLE (ends April 23rd, 2017)
27. Practice Quiz: Optional Practice Quiz
28. Video: Lecture 50, Part 1: Arrays
29. Video: Lecture 50, Part 2: Arrays
30. Practice Quiz: Optional Practice Quiz
31. Video: Lecture 51: Closures
32. Video: Lecture 52, Part 1: Fake Namespaces
33. Video: Lecture 52, Part 2: Immediately Invoked Function Expressions (IIFEs)
34. Practice Quiz: Optional Practice Quiz
35. Reading: Frequently Asked Questions
36. Video: Module 4 Wrap-Up

Graded: Module 4 Coding Assignment

WEEK 5


Using Javascript to Build Web Applications



In this module, we are going to take all those newly learned Javascript language skills and learn how to utilize them within the context of a web page. We’ll start by learning how to properly manipulate the web page components using the Javascript Document Object Model API. We will then move on to learning one of the most popular ways of serving up data to a web site - Ajax. We'll learn about the protocol that the language of the web speaks in (HTTP), how to set up and handle Ajax requests and responses, as well as how to process JSON data. We'll finish the module by connecting our restaurant web site from Module 3 to a real backend service that will allow us to pull the data for the restaurant menu dynamically from the server without having to reload the entire page.


17 videos, 6 readings, 3 practice quizzes expand

1. Video: Welcome to Module 5: Using Javascript to Build Web Applications
2. Reading: Recommended Books
3. Video: Lecture 53, Part 1: DOM Manipulation
4. Video: Lecture 53, Part 2: DOM Manipulation
5. Video: Lecture 54: Handling Events
6. Video: Lecture 55: The 'event' Argument
7. Reading: CONNECT WITH ME!
8. Practice Quiz: Optional Practice Quiz
9. Video: Lesson 56: HTTP Basics
10. Video: Lesson 57, Part 1: Ajax Basics
11. Video: Lesson 57, Part 2: Ajax Basics
12. Video: Lesson 57, Part 3: Ajax Basics
13. Practice Quiz: Optional Practice Quiz
14. Video: Lecture 58: Processing JSON
15. Practice Quiz: Optional Practice Quiz
16. Video: Lecture 59: Fixing Mobile Nav Menu Automatic Collapse
17. Video: Lecture 60: Dynamically Loading Home View Content
18. Video: Lecture 61, Part 1: Dynamically Loading Menu Categories View
19. Video: Lecture 61, Part 2: Dynamically Loading Menu Categories View
20. Video: Lecture 62: Dynamically Loading Single Category View
21. Video: Lecture 63: Changing 'active' Button Style Through Javascript
22. Reading: Check out the final deployed site
23. Reading: Frequently Asked Questions
24. Reading: ENTER RAFFLE (ends April 23rd, 2017)
25. Video: Course Wrap-Up
26. Reading: CONNECT WITH ME!

Graded: Module 5 Coding Assignment