Udacity 課程地圖：網頁前端技術課程。
這是針對 10-18 歲學生所篩選的課程，以自學為主，共學為輔。為什麼沒有推薦 Codecademy 的課程？主要是因為這個年紀的孩子對於「自己讀文章，然後解題」的學習模式是比較難接受的。
Udacity 的課程雖然大多沒有中文資源，但這也是我們想讓孩子認清的一件事：英文很重要。買了中文書來讀，即使學得很快，但是對於他們現階段最好的投資，就是努力把英文學好。未來最新的科技，都得透過英文來學習。
此外，和市面上課程不同的是，我們不是職業訓練所，而是夢想發展地。我們希望能聚集一群孩子共築夢想。
Intro to HTML and CSS
Not Your Typical Intro to Web Dev | ud304 |
| Lesson 1 - From Design to Code | Diligently employ a code/test/refine strategy as you precisely and deliberately translate initial design documents into static web pages. You'll also investigate the Document Object Model (DOM) and its implications for web development. |
| Lesson 2 - Your Own Framework | Take pride in creating and personalising your own multi-platform, responsive CSS framework for publishing your professional portfolio projects to the web. |
| Lesson 3 - Learning and Using Bootstrap | Strategically investigate an existing professional CSS framework as you use it to build a website using responsive design principles while maintaining code readability. |
JavaScript Basics
The Programming Language of the Web | ud804 |
| Lesson 1: Getting Up and Running | Learn about the tools we'll be using throughout the course and begin modifying web pages with a little bit of code.
- Introduction of résumé project
- Components of the résumé
- Introduction to browser developer tools
- Running commands on the console
- Appending elements to the page
|
| Lesson 2: Data Types | Dig deeper into JavaScript as we introduce you to the building blocks of the language as you write more complex code using variables and advanced data structures like JSON, Objects, and Arrays.
- Variables
- Strings
- Evaluating values
- Arrays
- Objects
- JSON
- Validating JSON
|
| Lesson 3: Flow Control | Finish the résumé while you learn how to make your code more modular and reusable by using conditional statements, loops, and functions.
- Conditional statements
- For and while loops
- Functions
- Encapsulation
|
Intro to AJAX
Making Asynchronous Requests with jQuery | ud110 |
| Inspiration |
- What is AJAX?
- Why use an API?
- How can you identify AJAX requests in existing websites?
|
| Perspiration |
- Clone the Move Planner repository
- Implement the Google Streetview API
- Implement the NY Times API
- Error handling normal AJAX requests
- Implement the Wikipedia API
- Error handling JSON-P requests
|
| Meditation |
- What did you learn?
- How else can you apply AJAX to make speedy page loads?
- Go customize!
|
Intro to jQuery
Manipulating Websites with Ease | ud245 |
| Lesson 1: the DOM, $ and Selectors |
- The jQuery Object ($)
- Basic DOM Structure
- Selectors
- Filters
|
| Lesson 2: DOM Manipulation |
- Reading jQuery Documentation
- Accessing HTML Attributes and Content
- Modifying HTML Attributes and Content
- Adding and Removing DOM Elements
- Iterating with .each()
- Using jQuery to run on DOM ready
|
Responsive Web Design Fundamentals
Great Experiences on Any Device | ud893 |
| Lesson 1 - Why Responsive? | What is responsive web design and why is it important? What kinds of devices should we be targeting with our design? How can we best leverage the different capabilities of each device to provide great experiences to users? You’ll also make sure that your development environment is ready to go.
- What is responsive design?
- Why does responsive design work for any device?
- Remote debugging and emulation in the browser
|
| Lesson 2 - Starting Small | The best way to get started is to start small and build up. In this lesson, we’ll cover the key components that make a site great on a small screen, including setting the viewport, adding content and sizing the content to the viewport. You’ll start the home town site project, by making sure that it looks good on a small screen.
- Why start small and build up?
- What is the viewport?
- Sizing content the content to the viewport
- avoiding static sized items
- Touch targets, and why they should be large
|
| Lesson 3 - Building Up | Once you’ve got a page optimized for small screens, it’s time to start thinking about how they’ll look on larger screens. Learn how to use CSS media queries to add breakpoints that change the layout depending on the screen size or other device characteristics.
- CSS media queries
- What is a breakpoint, and how to choose one
- Using the CSS flexbox to modify layout
|
| Lesson 4 - Common Responsive Patterns | Now that you’ve got the basics of responsive design down, you’ll learn about and practice some of the common layout design patterns used across sites. You'll also iterate on the home town site project, creating breakpoints for tablet and desktop layouts using the patterns from this lesson.
- Mostly fluid pattern
- Column drop pattern
- Layout shifter pattern
- Off canvas pattern
|
| Lesson 5 - Optimizations | Learn strategies for minor breakpoints used to adjust the margins or padding on an element, or increase the font size to make it feel more natural in the layout. You’ll also learn about strategies for dealing with tables and optimal text readability. At the end of the lesson, you'll iterate for the last time on the home town site, adding minor breakpoints to really make the experience stand out.
- Minor break points
- Optimizing text layout
- - font size
- - optimal line length
- Responsive tables, and strategies for dealing with them
|
JavaScript Design Patterns
Organizing code in a disorganized world | ud989 |
| Lesson 1: Changing Expectations | We'll first start by building a project the way you already know how: without an overarching organizational paradigm. Specifically, we'll discuss pain points and difficulties that are easy to run into when you don't use an organizational model. Then, we'll discuss a paradigm that will help us in the future, and we’ll see some examples of that paradigm in action. |
| Lesson 2: Refactoring | We'll spend some time discussing how our new paradigm applies to the project we worked on in Lesson 1. Then we'll rebuild the project with the new organizational paradigm. |
| Lesson 3: Using an Organizational Library | Finally, we'll explore how to use KnockoutJS, an organizational library, to organize our code and to reduce the amount of boilerplate code we write. Our resulting application will be well-organized, easy to understand, and extendable. |