Skip to content

Instantly share code, notes, and snippets.

View fightingtheboss's full-sized avatar

Mina Mikhail fightingtheboss

129 followers · 6 following
View GitHub Profile
@fightingtheboss
fightingtheboss / gist:4bd5cb54e027db2f4163
Created June 2, 2014 22:05
A playground for testing your skills with @media queries
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Queries!</title>
<meta name="viewport" content="initial-scale=1,width=device-width">
<style>
/* Add your styles here */
@fightingtheboss
fightingtheboss / index.html
Last active August 29, 2015 14:02
A starter HTML document for creating your first responsive design
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>McFly Hoverboards</title>
<meta name="viewport" content="">
<style>
/* Add your styles here */
* {
@fightingtheboss
fightingtheboss / rwd_part1_solution.html
Created June 3, 2014 21:55
Barebones solution to the Responsive Web Design, Part 1 assignment
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Queries</title>
<meta name="viewport" content="initial-scale=1,width=device-width">
<style>
html, body {
width: 100%;
@fightingtheboss
fightingtheboss / index.html
Last active August 29, 2015 14:09
HTML Fundamentals, Part 2: Semantics In Detail
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Fundamentals</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="container">
<header>
<h1>HTML Fundamentals</h1>
@fightingtheboss
fightingtheboss / box-model.html
Last active August 29, 2015 14:09
CSS Box Model Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Working with the Box Model</title>
<style>
.box {
width: 500px;
height: 300px;
@fightingtheboss
fightingtheboss / positioning.html
Last active August 29, 2015 14:09
CSS Positioning Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Positioning &amp; Display</title>
<style>
html {
box-sizing: border-box;
}
@fightingtheboss
fightingtheboss / README.md
Last active August 29, 2015 14:10
Setup Instructions for Sass with Node and Yeoman

Hey everyone,

Now that we've covered the fundamentals of CSS, I'll be introducing the topic of CSS pre-processors, specifically Sass, that augment CSS with a bunch of superpowers, the use of which is more or less an industry best practice at this point. Here I'll provide steps to prepare your system for projects that use Sass for this class and beyond.

There are two pieces we'll need to get your system ready for Sass projects:

  1. NodeJS is a platform that allows us to run the V8 JavaScript engine, the very same one that the Chrome web browser uses to interpret JavaScript, on the command line on our computer. We need it to run some tools that will help us scaffold new projects and render our Sass files into regular CSS.

  2. Yeoman is a combination of three tools that will help you quickly create new projects with everything you need to get working on your prototypes quickly. The three tools are Yo, a scaffolding tool that will setup project directories and files for

@fightingtheboss
fightingtheboss / github_pages.md
Created February 19, 2015 21:16
Publish your first project to GitHub

Publish your first project to GitHub

Now that you've created your first design, you'll want to put it on the Internet (It's not real until it's on the Internet, right?). To accomplish that, we'll use GitHub Pages.

The following steps will walk you through creating a GitHub account, creating a repository for your project, and finally publishing your project to GitHub.

Create a GitHub Account

  1. Visit http://github.com and create an account
  2. Send your GitHub username to fed@bitmakerlabs.com with the subject "GitHub Username [FED February]"
@fightingtheboss
fightingtheboss / fed-setup.md
Last active August 29, 2015 14:16
Front-End Development instructions for setting up Git, Node and Yeoman

Hey Bitmakers,

Now that we've covered the fundamentals of CSS, I'll be introducing the topic of CSS pre-processors, specifically Sass, that augment CSS with a bunch of superpowers, the use of which is more or less an industry best practice at this point. Here I'll provide steps to prepare your system for projects that use Sass for this class and beyond.

There are three pieces we'll need to get your system ready for Sass projects:

  1. Git is a free and open source distributed version control system that we'll depend on to track changes, back up and collaborate on code we write in class.

  2. NodeJS is a platform that allows us to run the V8 JavaScript engine, the very same one that the Chrome web browser uses to interpret JavaScript, on the command line on our computer. We need it to run some tools that will help us scaffold new projects and render our Sass files into regular CSS.

@fightingtheboss
fightingtheboss / neat.html
Last active August 29, 2015 14:18
Neat Grid Playground
<header class="page-title-bar">
<h1 class="logo">Basic Neat Grid</h1>
</header>
<main>
<article class="post">
<h1>Post 001</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quia, dicta omnis illo, dignissimos unde culpa. Harum, nisi, earum fugit voluptas impedit totam adipisci dolore at velit magni delectus iste.</p>
</article>
<article class="post">
<h1>Post 002</h1>