This is a nice program to train your front-end web development skill by several small projects. Each project focuses on different key points. The projects will be ordered by its skill level. They will be harder and harder to finish. After each project dues, we will have an online review on your code.
Here are some basic requirements:
- Stupid question will not be answered. Google it yourself.
- You must push all your code to a github repository called
web-learning. - Every commit must not contain too much changes to let me easily check how you have done these works.
- Commit messages must be clear and detailed.
- Commit messages and comments must be in English.
- You are required to complete every project before it dues.
And the most important requirement:
- You are not allowed to use any libraries/frameworks like jQuery, Vue, etc.
Your Bible: MDN (https://developer.mozilla.org/en-US)
Chinese version of MDN is broken. You must read the English version.
Make a static Facebook index page with CSS3 flexbox layout.
- The page you made must have 98% similarity, comparing to the original page.
- Use CSS3 flexbox layout whenever possible. No float layout. No absolute layout.
- f**k GFW
- Basic HTML and CSS
- CSS layout
- CSS3 flexbox guide
- CSS3 flexbox froggy
- git tutorial
- github tutorial
Jul 15, 2017
Make a user register form with the following fields:
- First Name (text field)
- Last Name (text field)
- Gender (radio buttons)
- State (select menus)
- City (select menus)
The form must contain a submit button and a reset button. When a user clicks the submit button, show a dialog to tell the user that registration is succeed and what the user has filled in the register form.
-
The page style must follow Material Design.
- The page must use Roboto Font.
- Components you need to make:
- Buttons (CSS only)
- Radio buttons (CSS only)
- Select menus (CSS only)
- Text field (with floating label)
- Dialog
This may be a little bit hard 😏. Do not copy codes from Material Design website.
The options of the "City" field are retrieved by ajax from this API:
GET http://ohmyszu.com/states/[state_abbr]/cities
Params:
state_abbr: the abbreviation of a state. Must be uppercase.
Example: http://ohmyszu.com/states/CA/cities
API returns data in json format. You can get a string array if succeed. Otherwise you get a 404 status code and error response. Here are example responses:
Success:
[ "Acampo", "Acton", "Adelanto", ... ]
Failure:
{
"error": "Invalid State xx"
}JavaScript:
- Basic JavaScript tutorial
- Getting Started with DOM
- Getting Started with Ajax
Material Design:
US Data:
Jul 25, 2017
Learn some interesting JavaScript skills (functional programming)
Complete a JavaScript online quiz (~ 10 problems to solve).
Jul 27, 2017
Make a todo list web app.
- Your app must have the same feature and style as TodoMVC.
- Data is stored in a set of APIs (details will be given later).
- Do not copy codes from the example.
Google it yourself!
Aug 3, 2017
Make a myQuery framework that have jQuery's basic functionalities and ECMAScript 2015 (and above) inside.
- Users can only access
$andmyQueryas global variables - Users can use
$(selector)to get some of elements selected - Users can use chained function calls to complete multiply actions in one line of code. e.g.
$('.item').css('color', 'red').show() - Users can use these jQuery features below:
addClass(class),hasClass(class),removeClass(class),toggleClass(class)css(property),css(property, value)each(func)find(selector)hide(),show(),toggle()html(),html(content)remove()
Implement as much as you can!
Aug 10, 2017