Skip to content

Instantly share code, notes, and snippets.

@hjkcai
Last active November 29, 2018 04:22
Show Gist options
  • Save hjkcai/80fea40a0798691009160fbbf8bf5d1f to your computer and use it in GitHub Desktop.
Save hjkcai/80fea40a0798691009160fbbf8bf5d1f to your computer and use it in GitHub Desktop.

Summer holiday front-end development journey

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.

1. Getting started

Objective

Make a static Facebook index page with CSS3 flexbox layout.

Requirements

  • 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.

Keys & Resources

Due

Jul 15, 2017

2. Have fun writing CSS and JavaScript

Objective

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.

Requirements

  • 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.

Bonus

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"
}

Resources

JavaScript:

Material Design:

US Data:

Due

Jul 25, 2017

3. Think in a JavaScript way

Objective

Learn some interesting JavaScript skills (functional programming)

Requirement

Complete a JavaScript online quiz (~ 10 problems to solve).

Resources

Due

Jul 27, 2017

4. Put things together

Objective

Make a todo list web app.

Requirements

  • 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.

Resources

Google it yourself!

Due

Aug 3, 2017

5. A Different JavaScript

Objective

Make a myQuery framework that have jQuery's basic functionalities and ECMAScript 2015 (and above) inside.

Features

  • Users can only access $ and myQuery as 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()

Bonus

Implement as much as you can!

Resources

Due

Aug 10, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment