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