Essential JS Libraries for Web Design

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

If you’re a web designer then you’ll almost certainly be using a JavaScript library in your projects. In this course Adi Purdilla will teach you about some of the most useful libraries as well as a very easy and effective way of loading them into your projects. From plugins that enhance your workflow, to libraries that allow you to create awesome layouts.

What You’ll Learn

• Learn the ins and outs of JavaScript libraries for enhancement, such as Modernizr, Retina.js, Echo.js, and more.
• Learn about JavaScript libraries related to UI elements, such as Cycle2, Fresco, Superfish, and more.
• Master layout-related JavaScript libraries, such as Waypoints.js, Masonry, Stellar.js, and more.

About the Instructor

Adi Purdila is an expert web designer and developer based in Romania. He’s created more than 30 courses for Envato Tuts+ on every conceivable web design topic, from Bootstrap, WordPress, and Foundation, to Sass and Sketch. You can check out his portfolio, follow him on Twitter, and see his ThemeForest portfolio.

Download NowDownload Preview

Building Static Websites With Jekyll

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

In this course you’ll learn all about the Jekyll static site generator and build a whole website from scratch in less than two hours. Join Guy Routledge as he walks through the process of building a design portfolio website using Jekyll, Markdown, Liquid templating, Sass, git and hosting with GitHub pages.

Whether you’re a seasoned blogger or just getting started, this course will give you everything you need to create your site and show off your skills in style.

What You’ll Learn

• Use Jekyll to create a web designer’s portfolio theme, featuring blog posts and various pages.
• Understand the Jekyll folder structure and how to plan each aspect of the website.
• Build the website from scratch, and finally deploy it to the web using git and GitHub pages.

About the Instructor

Guy Routledge is a consultant front-end developer specialising in front-end architecture and Sass-flavoured CSS. When not working on client projects, he teaches in person and online. Find out more on his website.

Download NowDownload Preview

Understanding Responsive Images

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

We all want our images to display at the best possible quality, with optimal file size, on different devices, but achieving that is easier said than done. There are many different techniques for making images responsive, but some of them have serious downsides, such as limited browser support. In this course you’ll learn everything you need to know to get started with responsive images. We’ll cover what they are and how they relate to responsive web design, and we’ll also discuss best practices.

What You’ll Learn

• Different approaches to creating responsive images, and their respective pros and cons.
• Using CSS to selectively show images.
• How to use the srcset and sizes attributes.
• Using the picture element with multiple image formats.
• How to use Picturefill, a plugin you can use to support the picture element in non-supporting browsers.
• Performance optimisation when working with responsive images.

About the Instructor

Adi Purdila is an expert web designer and developer based in Romania. He’s created more than 30 courses for Envato Tuts+ on every conceivable web design topic, from Bootstrap, WordPress, and Foundation, to Sass and Sketch. You can check out his portfolio, follow him on Twitter, and see his ThemeForest portfolio.

Download NowDownload Preview

10 CSS3 Projects: Branding and Presentation

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

In this course you’ll be using CSS3 to complete ten branding and presentation projects, from a personal business card to a PowerPoint-style presentation. These projects will help you understand some of the newest design techniques that CSS3 brings to the table. We’ll be using CodePen to build each one.

What You’ll Learn

• How to make a fully scalable and responsive logo using SVG and CSS3.
• Use CSS3 to make background patterns, business cards, an animated spotlight effect, and more.
• Create a walking animation sprite, learn to recolor SVG images, and make a moving background that runs on infinite loop.
• Create a “PowerPoint”-like presentation and a polaroid-style image gallery using CSS3.
• Learn how to make motion typography with CSS, and how to create a smooth-scrolling, horizontally paged picture book.
• Create a cover section for a site using CSS3 vertical parallax scrolling.

About the Instructor

Kezz Bracey is a designer and coder who specializes in web design and development. Her two focus areas are on theme development for WordPress, Ghost, and many other themeable platforms, and on finding the latest, most efficient, user-focused design and development techniques. You can follow her on Twitter.

Download NowDownload Preview

Animating With Snap.svg

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

SVG is a powerful way to create vector-based graphics that resize flawlessly. In this course, you will learn how to use the Snap.svg JavaScript framework to create, control, and animate your SVGs with ease.

What You’ll Learn

• How to create shapes with Snap.svg, starting with basic squares and circles and moving on to more complex shapes.
• Some of the attributes you can use to style your graphics.
• How to group shapes and apply transformations.
• Create basic animations, with callbacks and easing.
• Add some interactivity to your animations.
• Get detailed instructions on completing a project with Snap.svg: an animated clock.

About the Instructor

Craig Campbell is a web designer who has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.

Download NowDownload Preview

Introduction to Brackets

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

Brackets is an open source code editor specifically for web designers and front-end developers. It has very handy features including CSS code hinting and live HTML development, which allow you to code and see the changes take place instantly without having to save or reload the page. In this course, instructor Craig Campbell will teach you how to use Brackets in your web design projects, starting with the basics.

What You’ll Learn

• A guide to the main features of Brackets, including live code editing and the Quick Edit feature for CSS and JavaScript.
• The best Brackets extensions and how to use them.
• Create a sample project using Brackets to get some hands-on practice.
• Complete a range of styling and coding tasks while completing the project, so that you learn all the different features of Brackets.

About the Instructor

Craig Campbell is a web designer who has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.

Download NowDownload Preview

10 CSS3 Projects: UI and Layout

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

In this course you’ll be creating ten UI and layout projects that will help you learn some of the awesome new design techniques that CSS3 brings to the table. We’re going to be using CodePen–each time I’ll ask you to make a copy of the base “pen”, after which you can follow along as I build the final product. Let’s start with a little preview of the ten projects you’ll make.

What You’ll Learn

• Use pure CSS3 to make some smooth animated loaders.
• Create a responsive multi-column layout where each column has an equal height background.
• Use CSS3 to give a fresh style to links, buttons, animated tabs, and menus.
• Create things that used to rely on JavaScript, such as tooltips, modals, notification bars, and a flexible slider.
• Create a rotatable 3D cube and use it to present content.

About the Instructor

Kezz Bracey is a designer and coder who specializes in web design and development. Her two focus areas are on theme development for WordPress, Ghost, and many other themeable platforms, and on finding the latest, most efficient, user-focused design and development techniques. You can follow her on Twitter.

Download NowDownload Preview

Landing Page Design Principles

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

As a web designer, I’m sure you’ve had to design a landing page at some point. If you haven’t, you will. So why not get a head start and learn the essentials of landing page design? This course will teach you what a landing page is, what structure it might typically have, and how you should design it for best results.

What You’ll Learn

• What a landing page is, and the difference between a landing page and what we typically call a homepage.
• How to create an effective landing page structure.
• How to increase your conversion rate with message matching, freebies, an effective call to action, A/B testing, and other techniques.
• A detailed guide to designing each element of the landing page.

About the Instructor

Adi Purdila is an expert web designer and developer based in Romania. He’s created more than 30 courses for Envato Tuts+ on every conceivable web design topic, from Bootstrap, WordPress, and Foundation, to Sass and Sketch. You can check out his ThemeForest portfolio.

Download NowDownload Preview

Getting Started With Foundation 6

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

In this course you’ll learn how to get started with Foundation 6, the newest version of ZURB’s popular framework. You’ll learn what’s new and what has improved, and you’ll also get a comprehensive overview of the components. In the later chapters you’ll learn how to use the new accompanying app, Yeti Launch, and also how to customize Foundation and work with some of its most important elements.

What You’ll Learn

• What’s new, what’s changed from previous versions, and how to get started with Foundation 6.
• Use Yeti Launch to create Foundation-based projects right from your desktop, without needing to use the command line.
• How to use the grid and flex-grid components in Foundation.
• The basics of navigation and containers in Foundation.
• How to use the Orbit slider, a carousel-type control.
• Working with the Equalizer plugin and the Motion UI and Panini libraries.

About the Instructor

Adi Purdila is an expert web designer and developer based in Romania. He’s created more than 30 courses for Envato Tuts+ on every conceivable web design topic, from Bootstrap, WordPress, and Foundation, to Sass and Sketch. You can check out his ThemeForest portfolio.

Download NowDownload Preview

Go Further With WooCommerce Themes

Download NowDownload Preview

Envato Tuts+ Courses

• Video courses taught by expert instructors.
• Learn new skills from start to finish.
• Downloadable Source Files also available on GitHub.

Course Description

WooCommerce provides a lot of power and flexibility for simple storefronts out of the box, but to build truly outstanding sites, we have to dig a little deeper. In this course, Envato Tuts+ instructor Rachel McCollin will teach you how to enhance your WooCommerce site with features such as embedded video, mega menus and filter menus. These will create a polished and compelling sales experience for your visitors and let them connect most readily with the products they’re interested in.

What You’ll Learn

• How product videos can help you sell products, and how to add them in WooCommerce.
• How to add CSS to style the embedded video in your site’s front end.
• How to make your product video work with a responsive layout.
• How to add a mega menu and make it work with your site design.
• How to create and style a filter menu in WooCommerce.

About the Instructor

Rachel McCollin is a WordPress developer who writes books, articles and tutorials about web design and development, with a focus on WordPress and on responsive and mobile development. She runs a web design agency in Birmingham, UK and has published three books on WordPress. Find out more on her website, on Twitter, or on LinkedIn.

Download NowDownload Preview