This tutorial is proudly sponsored by our generous sponsor, Squarespace, the fast and easy way to create a professional website. Video 1. Get The Plugin (Instafeed.js) Instafeed.js is a crazy simple way to grab an Instagram feed and pop it into your website. You can download the Instafeed.js file for free here at this link and...
What is SASS? SASS (Syntactically Awesome Stylesheets) is the web’s most popular CSS preprocessing framework. Unlike typical stylesheets, SASS files is not directly readable by web browsers (yet), but it is much developer friendly. Once a SASS file is saved it is then compiled to plain CSS so long as the compiler is installed and...
Video 1. Start By Writing H1 Tags We want to wrap our link in an h1 tag to let search engines know that the text in our link (which will be replaced by an image) is very important text. Drop an opening and closing h1 tag where you want the logo to appear. 2....
Video 1. Place The HTML And Text We must first place a few lines of text. I’m going to jump over to http://html-ipsum.com and grab three of the long paragraphs and just change the first word of each paragraph so there is a little variety. 2. Write The CSS3 There is a pseudo element...
Disclaimer This post is not a comprehensive manual about regular expressions. It’s just a genuine attempt to provide the most to-the-point crash course for SEO experts who want to quickly get the idea of regular expressions and start using them for real life tasks. First Things First Before we go any further, let’s see what...
Video 1. Download fancyBox The very first thing we must do is download fancyBox. If you are using this for a personal, non-commercial website it’s completely free, if not, a license is inexpensive, just $19 USD. 2. Unzip + Organize Once you download the file, unzip it and find a place on your hard...
Bootstrap Basics: What is Bootstrap? For this tutorial, I’d like to walk you through the process of obtaining Bootstrap, putting everything where it needs to be, and going through a small, very basic example homepage. Where to Begin First and foremost, you’ll need somewhere to set up your project. Luckily, Bootstrap is all HTML, JavaScript,...
1. Choosing The Background Image This may go without saying, but just to be thorough you want to make sure that your background image is probably at least 2000px wide or so. Bigger is better when dealing with web background images, just take care to optimize that image as much as you can. 2. CSS...
1. Get The Theme While Dreamweaver allows us to customize every little aspect of the code we write, creating the whole look can be quite time consuming and there is a whole bunch of trial-and-error. I’ve found an amazing Dreamweaver color theme which you can download for free right here: http://www.thatwebguyblog.com/post/a_dark_code_view_theme_for_dreamweaver/ You’re looking for the...
Written Tutorial Starts: 1. The Simple Hyperlink: It All Begins Here The most basic link is a link from one page of your website to another. This can be done in Dreawmeaver CS6 by highlighting the item you want to turn into a link (we’re going to use a word in our navigation bar)...
Written Tutorial Starts: 1. Site? Local Root? What? Dreamweaver provides you with a quick and easy way to organize your files within Dreamweaver and allow you to take advantage of Dreamweaver’s powerful website organizational tools, upload your website to a web server, auto maintain links when pages are moved around, as well as...
FadeIn/FadeOut jQuery Image Fade Rollover Tutorial One of the most beautiful things about jQuery is the speed at which you can create very nice effects, effects that normally would have taken a bunch of time creating multiple image states or going all-out with Adobe Flash and creating rollover after rollover, are now easier than ever...