Articles tagged as ‘Web Development’

Udemy Online Courses: Effective Online Training

Udemy offers the best in online education for creative professionals. Whether you want to get promoted, break into a new industry, start a company, further a passion, or just accelerate your life, Udemy helps you learn from the amazing instructors around the world, enabling you to get there faster.

Udemy’s team recruits the world’s top experts, including New York Times best-selling authors, CEOs, celebrities, and Ivy League professors. These instructors have taught over 500,000 students on Udemy, helping them learn everything from programming to photography to design to yoga and more. Founded in 2010, Udemy is funded by Insight Venture Partners, Lightbank, MHS Capital, 500 Startups and other investors who previously foresaw the internet giants YouTube, LinkedIn, Twitter, Groupon and Yelp. Udemy is headquartered in San Francisco, California.

Today for only 8 more hours our users have been offered 75% off of any single course. If you have been thinking about trying out their training now would be the perfect time to get the best deal we’ve ever seen them offer. Here are a few suggested courses for you to check out.

USE CODE: DISCOVER775

Creating Responsive Web Design

Screen Shot 2013-10-31 at 4.26.15 PM

Read More »

10 Helpful Resources for Testing Responsive Web Design

Testing is a critical part of the responsive web design process. The purpose of using a responsive layout is to make the website useful on any type of device, but without extensive testing it’s not possible to know for sure how the site is behaving in different situations. Fortunately, there are a number of different tools and resources available that can help you to test your responsive designs. In this article we’ll take a look at 10 helpful tools that you may want to try for yourself.

Respondr

Respondr is a simple, but helpful, tool. You’ll just enter the URL of the site/page that you want to test, and then select the device of your choice. You can select an iPhone, iPad, or desktop. It then previews the page at the appropriate width.

Respondr

Read More »

A Comprehensive Guide to Becoming a WordPress Developer

Since WordPress is one of the leading content management systems out there it spurs countless people to become developers themselves. Some of the best I know in the industry emerged from these “DIY developers” – people who started looking at code as a hobby.

WordPress is a good medium to start out in because its functions are clear, the coding style is extremely transparent and easy to understand and the documentation is phenomenal (not to mention the huge community). With this article I hope I can give you a quick primer on where to start your long but – hopefully – fun journey!

Note to developers: There are quite a few instances where what I explain is not the full story. This is what Terry Pratchett calls “Lies to children”. It is difficult to explain programming concepts to beginners by going into maximum detail. When you learn acceleration in school you are not told that this is actually integral calculus, the sum of the area under a graph. You simply learn the result (speed over time). The idea is the same here :)

??????????

Read More »

Popular Design Trends for Responsive Navigation

The mobile responsive website layout has become a very common apparatus for designers. Building a layout is never easy and each website generally requires a unique solution. Responsive design incorporates both desktop and mobile devices to provide a uniform browsing experience. I have seen a lot of fantastic examples showcasing responsive web design trends.

In this article I want to focus particularly on navigation menus. To build a responsive navigation you need a technique for handling the resize down to lower resolutions, or consequentially handling the expansion for wider desktop monitors. Check out these various techniques which are my choices following the most popular ideas for responsive navigation. There are obviously some other solutions out there, but this collection should give you ideas for getting started with your own responsive designs.

Block-Level Menu Links

Consider navigation menus which are using single box-style links in an orderly fashion. As you resize the window, these boxes either need to shrink or re-organize themselves. Block-level responsive menus are those which are designed to always keep the links showing in various positions on the page.

william csete portfolio website layout inspiration

Read More »

13 Resources to Design for Bootstrap

Twitter’s Bootstrap has rapidly grown into one of the most popular frameworks for web designers and developers. Bootstrap aims to make web development faster and easier, and a growing number of designers and developers are working with Bootstrap.

There are a lot of benefits to using a framework like Bootstrap, most of them focusing on the increased efficiency for building modern and responsive websites. If you’re a Bootstrap user, or if you are interested in giving it a shot, there are several resources that can help with the visual design aspect of working with Bootstrap, and we’ll look at them in this article. There are far more resources that useful for working with Bootstrap in one way or another, but in this collection we are focusing on those resources that help with creating a visual design.

Bootstrap 2.0 Photoshop Template
This free PSD file includes loads of elements that can be used to create your own Bootstrap-based designs in Photoshop. It come with things like buttons, form elements, typography, navigation elements, tables, and much more. It’s also available for Fireworks.

Bootstrap 2.0 Photoshop Template

Read More »

15 jQuery Carousel Plugins

A common challenge during a web design project involves finding a way to display the relevant content in an attractive and usable manner. Carousels are often used for displaying images, text, and sometimes videos. If you’d prefer to save some time during the coding of the site you can use an existing jQuery plugin to create your carousel.

There are a lot of good scripts and plugins available, and in this article we’ll highlight 15 of them. Most of them are available for free download, but some of them are premium and must be purchased. Each comes with different features and options for customization. Hopefully you will find one that will be right for your next project.

Need Premium jQuery Sliders? We suggest CodeCanyon. View their top jQuery sliders here.

iCarousel

iCarousel
iCarousel is a premium option (cost is $8 for a regular license) that supports touch gestures. It is highly flexible and customizable to allow you to create something unique. Both 2D and 3D options are available.

Read More »

Create a Sidebar that Sticks Within an Element

You’ve probably seen this trick used before with social icons or a sidebar that sticks to the top of your screen as you scroll down the page.

The problem is that often they don’t stop scrolling and up either disappearing behind another element or overlapping something they shouldn’t, which looks cheap and unprofessional.

In this tutorial we’ll create a ‘sticky element’ that only scrolls until the maximum height of it’s parent element which will prevent that unsightly overflow.

Let’s start with a very basic html structure:

Read More »

7 Awesome HTML5 Website Development Tools by Adobe

PCMag recently spoke with Danny Winokur, Adobe’s vice president and general manager of Interactive Development, who said the point of today’s releases is to “advance what’s possible with HTML5 and associated technologies that have become instrumental to the modern Web.”

Adobe’s tools for HTML5 website development have brought the power of multiple technology features to build creative website designs. It aims to revolutionize the way the web is dealt with going forward. Adobe hopes to surprise web developers with a rather convenient and simpler creative process. These comprehensive tools are smart, flexible, and highly interactive in their use, style and performance.

Let’s take a look at the latest Adobe’s HTML5 website development tools re-invented for 2013:

Edge Reflow

This is a completely new, responsive web design tool by Adobe, available only for Adobe Creative Cloud members. The tool can create layouts and visual designs with CSS and is totally free in Adobe’s creative Cloud. It has a smart and intuitive design surface which can be easily resized. This surface gives an idea as to how layouts and visuals will adapt to different screen sizes.

It allows users to preview their designs in the browser, and check their designs in real-time with Edge Inspect extension. The design CSS can be transported to Dreamweaver, Edge Code or any other code editor for further modifications.

What it has in-store for Developers?

The primary purpose of Adobe’s Edge Reflow is to simplify the multi-screen design process, making it much more efficient and time-bound. Used for creating UX prototypes and visual designs followed by quick mock-ups.

Edge Reflow works on 2 design regions – design canvas for WYSIWYG layout and the property inspector (for single element styling). Breakpoints create new media query regions that can be easily tweaked to edit visual elements such as boxes, layouts and much more.

Edge Reflow

Read More »

20 Awesome jQuery Sliders

Image and content sliders are an extremely common element in modern web design. Coding your own slider from scratch is always an option, but if you’re looking to save some time or if you’re not sure how to code your own slider there are plenty of options. In some cases, working with an existing jQuery plugin will give you the chance to observe the code that is being used, and learn things that can be used in situations where you do want to code from scratch.

Need Premium jQuery Sliders? CodeCanyon offers the best in premium sliders with great support. View Top Rated Sliders.

In this post we’ll look at 20 different options for sliders. Many of them allow you to create responsive sliders, and some are optimized for mobile users as well. Most of these options are free. The last two listed are premium, and one is free with options to pay for a WordPress plugin version.

Slider Revolution
Slider Revolution is a premium WordPress plugin ($15) that allows you to easily create and customize responsive sliders. It comes with 20 different transitions, it’s touch enabled, and you can include just about any content you want within your slider.

Slider Revolution

Read More »

How To Code Unique Avatar Photo Styles with CSS3

The popularity of social networking has converted a lot of websites to be more user-centric. This means you can find loads of new profile features and direct-connect OAuth apps through Twitter, Facebook, Tumblr, Pinterest, and others. Typically the profile photo is a common facet to each profile webpage design. Photos or avatars can be uploaded by the user, and sometimes pulled directly from their other accounts online.

In this tutorial I want to demonstrate 5 specific user avatar styles with CSS3. You may utilize any of these features on your own website or startup idea. Design trends have been advancing where new CSS properties are becoming much more widely supported. This means frontend developers can start really pushing the boundaries of how we style media in webpages. The user experience of a profile page is definitely a good place to start.

How To Code Unique Avatar Photo Styles with CSS3

Read More »
Page 2 of 812345...Last »