This is a fabulous course for an introduction of HTML, CSS, and Javascript given by Prof. Yaakov Chaikin from Johns Hopkins University on Coursera. The rating for this course on Coursera is 4.9 out of 5 -- you see its high quality and popularity. I've also taking other similar courses from the web as well (e.g., the HKST one on Coursera), and this course is no-doubt the best.
The basics and fundenmental concepts of the languages are introduced systematically and clearly, and one would have a big picture and a clear idea about how these langurages are built and structured. This is really a college-style course, not like many other courses which just teach you about the syntex and some really simple usages.
On the other hand, this course is also practical and handy. Many examples and templates are given, even a "field-trip" into a real client-involved project. I can easily build my own webpage and web application after this course. I will highly recommend it to everyone.
Week 1: Introduction to HTML5
In this module, Prof. Chaikin gives an introduction of HTML, including environmen setup, basics of HTML and HTML5 tags. Coding assignment is not required for this module.
Week 2: Introduction to CSS3
In this module, CSS3 basics, conflict resolution, text styling, the box model, responsive designs and the Twitter Bootstrp are introduced. Assignment requirment for this module can be found here. We are asked to implement a responsive webpage including a header and three tiles, based on the 12-column grid layout. Basic styles including margins, paddings, and positioning, etc. are also need to be applied. My solution for this assignment can be found at http://elliezheng.github.io/Coursera-HTML_CSS_JS/module2-solution/index.html.
Week 3: Coding the Static Restaurant Site
In this module, Prof. Chaikin leads us through a real project: from tips about visiting the client and setups, to the coding of a static Chinese restaurant website. Intensive details about Twitter Bootstrap and useful tips of styling headers, navigation bars, menue buttons, tiles, footers, etc. are given -- we are getting closer to a real project!
The assignment requirment for this module can be found here. This assignment features a responsive design (especially for mobile users), and more functionalities about menus and navigations in Twitter Bootstrap. My solution for this assignment can be found at http://elliezheng.github.io/Coursera-HTML_CSS_JS/module3-solution/index.html.
Week 4: Introduction to Javascript
Fundamentals of Javascript is introduced in the module. By using "fundamental", I'm not saying it's simple; instead, they are quite essential if one wants to step further into JS. As Prof. Chaikin said, even some seasoned developers may not know all the contents. Seven data types (6 primitive + object), the concept of "scope" and common language construct are explained in details. The most powerful part of JS, as I would say, is that functions are first-class data types as well as objects. This allow nesting and passing around functions and link funtions to objects. Here we learn the concepts of "this" and using function constructors to create objects. We also learn about fake namespaces and IIFEs (immediately invoked function expressions) that deals with conflicts.
The assignment requirment for this module can be found here. This assignment asks us to use IIFEs to group two pieces of codes seperately where there are conflicts on namespace, and selectively print out different messages defined in those pieces of scripts based on some criteria. My solution for this assignment can be found at http://elliezheng.github.io/Coursera-HTML_CSS_JS/module4-solution/harder/index.html. Look at the concole and js-source to see the functionality.
Week 5: Using Javascript to Build Web Applications
The last module contains an introduction to HTTP, Ajax and JSON besides more contents of Javascript. We've learned handling event with Javascript, GET & POST using Ajax, and passing data via JSON. An example is given by completing building the restaurant website (a single-page application) where the contents are loaded dynamically.
The assignment requirment for this module can be found here. This assignment asks us to dynamically generate the homepage with random "Special" category, i.e., a random menu-category page is shown when clicking on the "Special" tile. My solution for this assignment can be found at http://elliezheng.github.io/Coursera-HTML_CSS_JS/module5-solution/index.html.
Congrats to myself for completing this course!
Support or Contact
Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.