Skip to content

Latest commit

 

History

History
416 lines (298 loc) · 15.4 KB

README.md

File metadata and controls

416 lines (298 loc) · 15.4 KB
Raw

Web Development Guides, Tutorials and Snippets

Guides, tutorials, demos and snippets for front and back end web development.

Design

Development

System

More

Full Screen Navigation Overlay

A style of navigation that triggers a full screen overlay. This example utilizes flexbox.

Tutorial | Demo

aside {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}
.open {
	opacity: 1;
	visibility: visible;
}
<aside>
	<div class="toggle-overlay">
		<a class="close"> Toggle </a>
	</div>
	<nav>
	</nav>
</aside>
$('.toggle-overlay').click(function() {
	$('aside').toggleClass('open');
});

Off Canvas Navigation

Slide out navigation that is hidden off canvas until triggered. Inspired by the Lanyon/Poole theme for Jekyll.

Tutorial | Demo

html, body { overflow-x: hidden; }

.position {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
@media screen and (min-width: 800px) {
	.position { position: fixed; }
}
aside {
	width: 250px;
	height: 100%;
	position: fixed;
	top: 0;
	left: -250px;
}
main {
	width: 100%;
	position: absolute;
	left: 0;
}
article {
	padding: 0 80px;
}
.show-nav aside, .show-nav .position, .show-nav main { transform: translateX(250px); }
.show-nav .position { position: fixed; }
<aside> Navigation </aside>
<a id="nav-toggle" class="position">Toggle</a>
<main>
	<article> Main content </article>
</main>
$('#nav-toggle').click(function () {
this.classList.toggle("active");
	if ($('body').hasClass('show-nav')) {
		$('body').removeClass('show-nav');
		} else {
	$('body').addClass('show-nav');
	}
});

Responsive Dropdown Navigation Bar

A classic top navigation bar with dropdowns. The navigation links collapse into a hamburger icon toggle on mobile collapse.

Tutorial | Demo

$('nav ul li a:not(:only-child)').click(function (e) {
	$(this).siblings('.nav-dropdown').toggle();
	$('.nav-dropdown').not($(this).siblings()).hide();
	e.stopPropagation();
});
$('html').click(function () {
	$('.nav-dropdown').hide();
});
$('#nav-toggle').click(function () {
	$('nav ul').slideToggle();
});

Flexbox Grid

A simple, responsive grid made with flexbox. This grid is based on percentages and is infinitely expandable.

Tutorial | Demo

.column { flex-basis: 100% }

@media screen and (min-width: 800px) {
	.row {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
		.column { flex: 1; }
		.one-fourth { flex: 2.5; }
		.one-third { flex: 3.3; }
		.half { flex: 5; }
	}
<div class="row">
  <div class="column"> 50% </div>
  <div class="column"> 50% </div>
</div>

Float Grid

A simple, responsive grid made with CSS floats and a clearfix hack. This grid is based on percentages rather than the traditional 12-column grid. You can add as many classes as you want columns.

Tutorial | Demo

.row::before, .row::after {
	display: table;
	content: " ";
	clear: both;
}
.one, .one-third, .two-thirds, .one-fourth, .half { width: 100%; }

@media only screen and (min-width: 800px) {
	.one { width: 100%; }
	.half { width: calc(100% / 2); }
	.one-third { width: calc(100% / 3); }
	.one-fourth { width: calc(100% / 4); }
	.two-thirds { width: calc(100% / 3 * 2); }
	.column { float: left }
}
<div class="row">
	<div class="half column"> 50% </div>
	<div class="half column"> 50% </div>
</div>

Fundamentals of Responsive Design

Before integrating third party frameworks into your websites, learn how to build your own simple framework and understand responsive breakpoints, grids, and navigation styles.

Understanding the Fundamentals of Responsive Design

  1. Foundation - <meta name="viewport" content="width=device-width, initial-scale=1">
  2. Breakpoints - @media screen and (min-width: 800px) { }
  3. Structure - a grid system
  4. Navigation - collapsible navigation

Bootstrap

Bootstrap is one of the most popular CSS frameworks. Learn what a framework is, how to get started with Bootstrap, and how to use the documentation to build a responsive frame upon which you can add custom styles.

What Bootstrap Is and How To Use It

  • What is Bootstrap?
  • Why is a framework important?
  • Building a basic Bootstrap template
  • Applying custom styles

Parallax Scroll Effect

Parallax scrolling, an effect that allows sections of a website to scroll at different speeds, is an effect that has gone through various stages of popularity over the last few years. I’m not going to debate the usefulness or trendiness of parallax scrolling here, I’m simply going to show you how to do it.

Parallax Scroll Effect

Local Server Environment - MAMP

Setting up a local environment is necessary In order to begin working in the back end with languages such as PHP and MySQL. Learn how to set up a LAMP/MAMP/WAMP stack.

Setting Up a Local Server Environment with MAMP

  • Linux/Mac/Windows
  • Apache
  • MySQL
  • PHP

Virtual Hosts

If you want to set up more than one websites on a local server, you can use virtual hosts to work on as many sites as you want.

Setting Up Virtual Hosts

  • Editing the Apache configuration file - httpd.conf
  • Editing the hosts files - hosts
  • Setting the correct ports

How to Use the Command Line for Apple macOS and Linux

How to Use the Command Line for Apple macOS and Linux

Beginner's guide to using the command line for the first time. Useful for anyone going into web development.

Developing a WordPress Theme from Scratch

You know HTML, but your potential clients don't. If you intend to make a website and pass it on to a user so that they might edit it by themselves in the future, a content management system (CMS) will be necessary. WordPress is the most popular CMS, and it's built on PHP.

This guide will show you how to take your HTML site and turn it into a WordPress theme. It assumes no prior knowledge of PHP or WordPress.

Developing a WordPress Theme from Scratch

Developing a WordPress Theme from Scratch Part 2

Expanding on the original article, you will learn how to do the following:

  • Create individual post pages – single.php
  • Add pagination
  • Include comments
  • Learn how to use functions.php
  • Properly enqueue stylesheets and scripts
  • Create global custom fields
  • Create custom post types

Developing a WordPress Theme from Scratch Part 2

Developing a WordPress Theme from Scratch Part 3

More advanced concepts are covered:

  • Create a custom post type
  • Add a custom meta box
  • Create the following custom fields:
  • Input text field
  • Textarea
  • Checkbox
  • Select Menu
  • Image (and image upload)

Developing a WordPress Theme from Scratch Part 3

Migrating WordPress

After creating a WordPress theme in a local environment, there are a few necessary steps to take to ensure that the site doesn't break when migrating to a live server.

Migrating a WordPress Site to a Live Server

###Getting Started with Git

Links to Git repositories are everywhere. Learn how to use the command line to create a local project, upload it to a Git repository host (such as GitHub), and upload it onto a live server, bypassing FTP.

This guide assumes no prior knowledge with or familiarity of Git, GitHub, version control software, or using command lines.

Getting Started with Git

Using Grunt and Sass

Understanding how to use Node.js, Node Package Manager (npm), Grunt, Sass, and command line can be daunting. This guide assumes no prior knowledge of using the command line, installing Node.js, using npm, Grunt or Sass, and details every step along the way to ensure that Grunt it up and running.

By the end of this article you will be able to set up Grunt and use it to compile SCSS into CSS which is minified and autoprefixed, as well as minifying and linting JavaScript code.

Getting Started with Grunt and Sass

Using Jekyll

Use Jekyll, the static site generator, to create a dynamically generated static website, and push it to GitHub pages.

Making a Static Website with Jekyll

Learn Sass Now

Sass is a CSS preproccessor that can make writing CSS faster and more efficient. You might have heard of Sass, but not know how to set it up or integrate it with your projects. We’ll go over all of that in this tutorial for Mac and Windows.

Installing, Using, and Understanding Sass

Guide to Installing and Using Gulp

Gulp is a task runner which makes it easy to run redundant tasks without thinking about them. In the case of this article, we'll learn all the necessary prerequisites to installing Gulp, and create a task which compiles SCSS to CSS, minifies, and adds vendor prefixes.

Installing and Using Gulp for Front End Web Development

Introduction to jQuery

jQuery is the "Write Less, Do More" JavaScript library. It is not a programming language, but rather a tool used to make writing common JavaScript tasks more concise. jQuery has the added benefit of being cross-browser compatible, meaning you can be certain the output of your code will render as intended in any modern browser.

Introduction to jQuery

How to Use JSON Data with PHP or JavaScript

Learn what a JSON feed is, and how to extract its data with PHP, JavaScript, or jQuery.

**How to Use JSON Data with PHP or JavaScript

Setting Up EC2 with AWS

Amazon Web Services, or AWS, is a popular platform for deploying cloud based apps. Learn how to set up a virtual server in the cloud with AWS EC2 instances.

Getting Started with AWS - Setting Up a Virtual Server

Enable HTTPS with an SSL/TLS Certificate

Learn how to encrypt your server by enabling HTTPS on your website with a TLS/SSL certificate. Also includes information on how to properly hook up HTTPS with WordPress.

Obtain a TLS/SSL Certificate and Enable HTTPS Encryption

Setting Up a Basic Cron Job in Linux

Learn how to send out an email in PHP and set up a scheduled task to send it out.

Setting Up a Basic Cron Job in Linux

Styling Web UI Components from Scratch: Buttons and Forms

Learn how to style buttons and forms without a framework.

Styling Web UI Components from Scratch: Buttons and Forms

Design for Developers

  • Structure layout first
  • Use more padding
  • Use more line height on body than headings
  • Do not use pure black
  • Use fewer fonts, or be consistent with fonts
  • Use fewer colors, or complementary colors
  • Be consistent with borders and corners
  • Fine details, transitions and animations last
  • Don’t go overboard with drop shadows, gradients, or animations

Design for Developers

Setting Up a Brand New Mac for Development

Learn how to set up a fast, efficient, up-to-date developer workflow for macOS Sierra using Homebrew.

Setting up a Brand New Mac for Development

More