Railsbridge Frontend

Contents

Site List

Frontend

Goal

To get you started with HTML, CSS, and JavaScript, the most essential building blocks
of web experiences, we'll have you create a basic web page about yourself and deploy
it to the web. You'll:

  • Write some content and give it some structure with HTML,
  • Use CSS to adjust the layout and style of that content,
  • Manage your code and push it to a remote server with git, and
  • Use JavaScript to add interactive components.

Here's a sample sketch of what your page could look like:

screenshot

Meta-Goal

Many introductions to programming start on the command line and stay
there for a long time before you see any results besides strings of text.

We want to give you tools to make a visual, shareable product
right away, and then start programming on top of that, adding
interactivity to enhance your content.

Schedule

  • 1-ish hour of playing with basic HTML, CSS and Javascript
  • 4-ish hours of building our page and pushing it to github

This is just a rough guideline, not a mandate. Some steps you'll go
over and some you'll go under. It'll all work out by the end of the
day. :D

Requirements

We're going to be working with:

  • Chrome (If you're experienced with the developer tools in another browser, that may work too.)
  • Git
  • A GitHub account of your own
  • The code editor of your choice. Komodo Edit is a good open source option, if you don't have one yet.

Working Effectively and Efficiently

I highly recommend you do the following:

  • Open your browser fresh or hide any windows you already have open.
    • Bring up one window with two tabs
      • One for this content
      • One for interacting with your app.
  • Open your text editor and do not ever close it. We're not quitters.
  • Hide all extra applications. Turn off twitter, IM, and all other distractions.

By minimizing the number of things you interact with, you reduce the
amount of time spent switching between them and the context lost as
you work through the lessons. Having 50 tabs open in your web
browser gets confusing and wastes time.

Format

Each lesson will look like this:

Step Title

Goal:

Description of the current step.

Red because big goals are scary.

Steps:

steps to take.
def code_to_write
  1 + 1
end

Yellow because we've gotten it done, but we have no clue what's going on.

Explanation

Details of what the steps actually did... spell out the cause and effect.

Green because we can tie everything together now.

Step 1: Choose between...

Option 1: Are your tools installed?

Option 2: Do you need to set up your tools?

Railsbridge Docs

Source: https://github.com/railsbridge/docs