# learn-design-workshop

**Repository Path**: mirrors_thoughtbot/learn-design-workshop

## Basic Information

- **Project Name**: learn-design-workshop
- **Description**: This is a folder of materials for students of the Learn Design Workshop (front-end development)
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-18
- **Last Updated**: 2026-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Best Practices for Front-End Development
[View the workshop details on the Learn page](https://learn.thoughtbot.com/workshops/25-best-practices-for-front-end-development)

### Pre-requisites:
* Make sure that [Middleman][Middleman] is installed on your machine.
* Make sure that you are running Ruby.
* Make sure that you have Google Chrome downloaded. We use Chrome's Web
  Inspector during development.

### Directions:
Clone this repository onto your machine.

You will be working in the folder called `my_project`.

From the `my_project` folder, run:

    bundle

Bundler will install the necessary gems.

To run the Middleman server, go into the `my_project` directory and run:

    bundle exec middleman
    
Go to `http://localhost:4567` to view the website in `my_project`

Refer to the folder `example` when you are stuck; this contains the completed
  website.

### Office Hours:
* 11am-12pm PST/ 2pm-3pm EST
* Lisa — lisa@thoughtbot.com
* Lydia — lydia@thoughtbot.com

### thoughtbot Resources:
* [Neat][Neat]
* [Bourbon][Bourbon]
* [Style Guides][Style]
* [Bitters][Bitters]

### Expectations: After taking this workshop, students will know how to:

* Organize their stylesheets in a clean and efficient manner.
* Use the [Neat][Neat] grid framework to set the grid, lay out the composition of
  a website, and create a flexible and responsive grid. This also means
  understanding the basic 'box layout' structure and looking at both the 'bigger
  picture' and the smaller details at once.
* Use the [Bourbon][Bourbon] mixin library for greater efficiency in styling.
* Create their own mixins and extends to create a clean and modular stylesheet.
* Mark-up a website using semantic HTML 5, strongly influenced by the thoughtbot [style guides][Style].
* Understand how to install gems (e.g. FontAwesome) and open-source libraries to
  build their toolkit and take advantage of using quality, already-made parts.

[Neat]: https://github.com/thoughtbot/neat "Neat"
[Bourbon]: https://github.com/thoughtbot/bourbon "Bourbon"
[Style]: https://github.com/thoughtbot/guides/tree/master/style "Style Guides"
[Bitters]: https://github.com/thoughtbot/bitters "Bitters"
[Middleman]: http://middlemanapp.com/ "Middleman"