Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 13 hours on-demand video
  • 176 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development JavaScript

Learn By Example: The Foundations of HTML, CSS & Javascript

Closures, prototypes, JSON, the DOM, selectors, inheritance in CSS and in Javascript, and first class functions
Rating: 4.5 out of 54.5 (179 ratings)
3,407 students
Created by Loony Corn
Last updated 1/2017
English
English
30-Day Money-Back Guarantee

What you'll learn

  • Understand HTML - its structure, and the commonly used tags
  • Utilise CSS, including inheritance, selectors, the box model - the very topics that make CSS hard to use
  • Master the fundamentals of Javascript
  • Use closures, dynamic prototyping, JSON, and the Document-Object-Model with confidence

Course content

12 sections • 94 lectures • 13h 11m total length

  • Preview02:18

  • Preview09:15
  • Preview12:33
  • Preview06:43
  • The A Tag
    08:18
  • Paths
    05:39
  • Preview06:33
  • Lists - Ordered and Unordered
    07:52
  • Other Miscellaneous HTML Tags
    02:32
  • URL and Domain Names
    11:01
  • The img Tag
    10:38
  • The HTML Standard
    03:17

  • Cascading Stylesheets reintroduced
    08:23
  • Preview07:28
  • CSS Selectors
    09:59
  • Fonts
    10:08
  • Colors
    03:38
  • The Box Model
    11:54
  • Preview07:55
  • What is the exact style applied?
    08:21
  • The <span> Element
    02:55
  • Preview02:59
  • Preview15:00
  • The CSS float and clear properties
    09:42
  • Experimenting with the position attribute
    12:23
  • Fluid And Fixed Layouts
    08:58
  • The CSS display property
    08:02
  • Preview15:45

  • Preview15:36
  • Preview05:58
  • Example 2: Basic programming constructs
    07:30
  • Example 3: Separating HTML and JS files
    10:16
  • Example 4: Using the console.log statement
    06:21
  • Example 5: Local and global variables
    16:08
  • Example 6: Undeclared variables in JS are global
    07:46
  • Example 7: Local variables hide global variables of the same name
    05:42
  • Example 8: Javascript is ephemeral, reloading a page resets everything
    04:19
  • Preview14:39
  • Example 10: Copying an array
    13:56
  • Example 11: Adding an element to an array
    05:58
  • Example 12: Deleting elements from an array
    08:08
  • Example 13: Arrays can contain different types
    03:22
  • Example 14: Non-existent array elements are undefined
    06:32
  • Preview06:31

  • Preview10:58
  • Example 15: Creating an object using JSON
    08:12
  • Example 16: Creating an object using a constructor
    15:51
  • Example 17: Adding properties to objects dynamically
    11:58
  • Example 18: Removing properties from objects dynamically
    03:05
  • Example 19: Object properties can be functions
    07:33
  • Example 20: Object constructors can have property functions
    02:46
  • Preview06:40
  • Example 22: Iterating over all properties in an object
    04:54
  • Example 23: Calling a constructor without new
    10:02
  • Example 24: Understanding the typeof operator
    06:12
  • Example 25: Paternity tests using instanceof
    05:36
  • Example 26: Faking public and private properties
    10:24

  • Example 27: Functions as arguments to functions
    12:35
  • Example 28: Functions that return functions
    08:38
  • Preview07:31
  • Example 30: Arguments pass by reference
    15:42

  • Introduction to Javascript Quirks
    06:13
  • Preview11:28
  • Example 32: Understanding null
    13:58
  • Example 33: Understanding NaN
    08:58
  • Example 34: Strings and numbers and conversions between them
    10:40
  • Example 35: Strange comparison operators
    10:51
  • Example 36: Truthy and falsy
    06:58
  • Example 37: Simple string operations
    14:09

  • Example 38: Declared Functions, Function Literals and Hoisting
    15:47
  • Example 39: Named And Anonymous Function Literals
    07:23
  • Preview15:05
  • Example 41: Nested functions can be declared
    06:54

  • Preview18:42
  • Example 42: Closure variables win over local variables
    08:51
  • Example 43: Closures with declared functions and function literals
    02:27
  • Example 44: Referencing environment with function parameters
    05:43
  • Example 45: Closure variables cooler than global variables
    13:38

  • Preview06:45
  • Preview08:14
  • Example 47: Dynamic Prototyping
    04:24
  • Example 48: Inheritance hierarchy using chained prototypes
    05:44
  • Example 49: Overriding properties using prototypes
    06:58
  • Example 50: The base object as the ultimate prototype
    04:37
  • Example 51: Overriding properties of built-in objects
    02:58

Requirements

  • Any modern browser and a simple text editor are all that will be needed for the code examples
  • Some prior programming experience will definitely help in the advanced Javascript portions - if you are entirely new to programming, the second half of the Javascript section will seem very challenging

Description

Closures, prototypes, JSON, the DOM, selectors, inheritance in CSS and in Javascript, and first class functions - that's what this course is about.

This is not a course on Javascript frameworks - its about solid, fundamental HTML, CSS and Javascript. You'll be surprised by how much more you can get done on your web pages once you learn these technologies the right way.

What do we mean by that?

  • Relatively few folks formally learn HTML, CSS or Javascript, because its quite easy to get stuff done in these technologies in a "quick-and-dirty way".
  • That "quick-and-dirty" way of learning and doing leads to problems over time, because Javascript and CSS are actually quite complex, so it is easy to do things the wrong way
  • This course will help, because it has 75 examples, 20 in HTML/CSS and 55 in Javascript. Each is self-contained, has its source code attached, and gets across a simple, specific use-case. Each example is simple, but not simplistic.

What's Included:

  • Basic HTML: Folks stopped counting HTML as a language worth formally learning sometime in the 90s, but this is only partially justified. It always helps to have strong basics.
  • CSS: Cascading Stylesheets are incredibly powerful, and incredibly hard to use - until you know how they really work. Once you understand inheritance and selection in CSS, it will all make a lot more sense.
  • Javascript is a full-fledged, powerful and complicated language. Its really important to learn Javascript formally, because it is just so different from most other languages you would have encountered. For instance - Javascript has objects and inheritance but no classes.
  • Closures in Javascript are a rather mind-bending concept - functions that "remember" how the world looked when they were created.
  • Prototypes are Javascript's way of doing inheritance, and its very different from the C++/Java way of doing it.
  • JSON is not conceptually difficult to use, but it is incredibly important, and you should understand why - because its the glue between backends written in Java or other traditional languages, and front-ends written in Javascript
  • The Document-Object-Model is what ties Javascript back to HTML and CSS. Together with JSON, the DOM ties it all together from server to skin.

Who this course is for:

  • Yep! Folks who are absolutely new to web programming, and wish to learn HTML and CSS from scratch
  • Yep! Folks who are seeking to learn Javascript the right way - including folks who may done some Javascript programming, but are not quite confident using advanced features such as closures or dynamic prototyping
  • Yep! Java, C#, Python or C++ programmers who are looking to master Javascript
  • Nope! This class is not right for you if you are looking to learn Javascript frameworks such as JQuery, Angular or Node.js

Instructor

Loony Corn
An ex-Google, Stanford and Flipkart team
Loony Corn
  • 4.2 Instructor Rating
  • 21,351 Reviews
  • 127,149 Students
  • 73 Courses

Loonycorn is us, Janani Ravi and Vitthal Srinivasan. Between us, we have studied at Stanford, been admitted to IIM Ahmedabad and have spent years  working in tech, in the Bay Area, New York, Singapore and Bangalore.

Janani: 7 years at Google (New York, Singapore); Studied at Stanford; also worked at Flipkart and Microsoft

Vitthal: Also Google (Singapore) and studied at Stanford; Flipkart, Credit Suisse and INSEAD too

We think we might have hit upon a neat way of teaching complicated tech courses in a funny, practical, engaging way, which is why we are so excited to be here on Udemy!

We hope you will try our offerings, and think you'll like them :-)

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.