Skip to content

Latest commit

 

History

History
40 lines (32 loc) · 2.67 KB

File metadata and controls

40 lines (32 loc) · 2.67 KB

First Steps (Tutorial)

1. The Reason

To simplify the access into the fantastic world of HTML and CSS for our absolut beginners we would like to build a simple app. The app should bundle our and especially Lucas efforts from former Code Girls sessions. This would cover mostly the Hacker-blog experience you can find on github here, [here] (https://github.com/heyLu/codegirls/blob/master/2013-11-05-hacker-blog-pt-2.md) and here. We would like to have all sorts of materials: continuative links, suggestions for google-ing, build-in eb-editors with DIY examples and little projects the girls can manage by themselves, classified into logical and consecutive chapters. The chapters should ideally be based on one and another. Maybe we can even build in a tool, which allows the users to connect and / or the admins to see, which user is on which level.

Important: This should not be something the girls just click through but a real learning experience, where they need to master little tasks by using by previous aquired knowledge, while gaining new skills and experimenting with new code.

2. Goals

  • learn the basics of web development by creating a self-contained project
  • the project should be something that they can show to others and continue to build on
  • a starting point for learning more (e.g. point out improvements, resources for learning, project ideas)
  • should show people that they can create something on the web, but still be challenging (which itself is challenging, but it should be approachable and not too simple at the same time)
  • the projcet (which I call app, but Lucas won't) should function as an first-step tutorial, especially for cases when coaches to have no time to sit down with a beginner during the whole Code Girls session.
  • Better Onboarding
  • More professionalism

3. Characteristics

  • Easy Onboarding and Log-In
  • Pick up where you left
  • Structured learning experience according to Code Girls focal points
  • User friendly navigation
  • Direct user approach
  • Short Chapters taking the user through a specific topic e.g. the box modell
  • Interactive
  • Images, drawings diagrams and links for further information
  • Clean code

4. Examples

Example for a chapter with a task in build-in web editor: Tryit Editor v1.9

A similar editor made by Mozilla, part of a larger project that aims to make it easier to create for the web and get started.