Sitechop

Web Design and Development Blog

Welcome to sitechop, a blog about building websites.

Multi-colored backgrounds (Pure CSS or SVG)

Front End Development // 2014-12-01 01:10:47 UTC.

Every once in a while, in the land of front-end development, there comes a time when we need a multi-colored background. In the past I would simply use an image, but this time I decided to try a couple different approaches. There we're two methods that came to mind: CSS gradients with overlapping color-stops, or a two-point SVG. Both worked well to suit my needs, and both have there pros and cons. Today I'll show you how to use both methods.

Read Full
Multi colored bg

Jekyll Guide (The Basics)

Front End Development // 2014-11-16 20:49:06 UTC.

If anyone has been with me since the beginning, they'd know that Sitechop evolved from my now-defunct Jekyll blog that was hosted on robbyk.com. Jekyll has came a long way since then and has been growing in popularity as well. Jekyll is a great solution for those looking to build lightweight small semi-dynamic web pages. Today I want to take you through the basics and get you started building your own Jekyll powered websites.

Read Full
Jekyll post

CSS3 + Pure JavaScript Slide Toggle Menu

Front End Development // 2014-11-05 16:47:01 UTC.

CSS3 transitions are definitely going to replace jQuery and JavaScript animations for simple web uses. By using CSS3 transitions we can create much smoother animations (specifically on mobile), and even cut the jQuery dependency completely on certain websites. Today we're going to breakdown the creation of a smooth CSS3 and pure JavaScript slide toggle navigation.

Read Full
Css3 js slide toggle

Responsive "Easy-Click" Article Index Tutorial

Front End Development // 2014-10-22 23:01:11 UTC.

A new trend in the blogosphere is having the entire excerpt block linked to the article. Not only that but the excerpt block comes to life and looks awesome when hovered over. This creates a much better mobile experience compared to clicking post headings or tiny read full buttons (like on here). We're going to call this “easy-click” style, and today I'll get you started on creating this style of responsive post index.

Read Full
Easy click index

Speeding Up Your Website 101

General // 2014-10-17 01:30:51 UTC.

It seems like only a select few, besides big companies and corporations, care about web page speed and performance. Browsing the web, it's common to see load times of 5 seconds and pages that weigh 4, 5, sometimes 10 megabytes! Even if that's not you, is your website optimized to its full potential? This post is not about stripping your page, its about optimizing everything so that your website loads as fast as possible.

Read Full
Speed website