How to Create an Animated Spirit Day Presentation With fullPage.js
October 18th 2018 is Spirit Day, something we recognize each year at Tuts+, and on this day we speak out against LGBTQ bullying, especially among LGBTQ youth.In this tutorial you’ll learn to build an animated Spirit Day presentation with fullPage v3.  Here’s what we’re going to build: Note: You might remember another tutorial I wrote about fullPage some time ago. That tutorial uses fullPage v2, but as many people still use v2 in their projects there’s no need to commit that tutorial to the archives.fullPage.js Vertical and Horizontal Scrolling With fullPage.js George Martsoukos
What is fullPage.js v3?
fullPage.js is a hugely popular JavaScript library created by Alvaro Trigo. It allows us to build beautiful one-page scrolling websites and applications. While it’s considered to be a dependency-free JavaScript library, it can also be used as a jQuery plugin just like its previous version (v2). alvarotrigo.com/fullPageUnlike v2, this new version is free under certain conditions. For non-commercial projects, you can use it under the terms of the GPLv3. However, commercial projects require a license. More information is available on this page.It has great browser support and comes with detailed documentation. A big list of working examples can be found on this page.Beyond the core features, it provides some extra paid features referred to as extensions. Due to its...
15+ Best WordPress Portfolio Themes for Creatives
Whether you’re a photographer, a painter, or a web designer, one thing remains a constant: You need a portfolio. After all, portfolios are the time-tested, best way to give potential clients a look into your work history and methodology.I’ll give you an example. A photographer needs a portfolio to display his best work with categories for featuring different types of photos like black and white or nature-themed. Likewise, a web designer needs a creative portfolio that can be used to show off her latest client projects and even provide space to write about the development process.Portfolios can take on many shapes and many styles. But the important commonality here is that they are, in fact, important. If you want to ensure your work resonates with its target audience, and pick up a few new clients or customers, you can use WordPress portfolio themes to build a stunning representation for your work on the web.Useful WordPress Portfolio Theme FeaturesWhile the best portfolio themes can vary widely in presentation style, they often include a similar feature set. Getting familiar with what is offered aids in the decision-making process. It let’s you know what to expect in a solid portfolio theme purchase and allows you to quickly compare creative options. A few popular features include:Dedicated portfolio page layouts. These give you the ability to customize the look of your...
Figma Object Selection Tips
Welcome to this, the second post in our series of Figma tips. In this video we’ll be covering three tips to do with object selection, so let’s get started!Watch Tips 1. Select All Objects With the Same CharacteristicsFigma lets you select a whole bunch of objects with the same characteristics. One of the most useful ways I’ve found to use this is selecting all text objects with the same font, then changing the font for all of them.For example, I’d select a heading like this:Then I’d go to the Main menu > Edit > Select all with same font. All headings with the same font settings would be selected, after which I could change those settings throughout the document in one go.This works equally well with other characteristics too. For example, to change the fill color across all kinds of objects (shapes, text etc.) I’d go to Main menu > Edit > Select all with same fill, then change the fill in the properties panel. 2. Quickly Select a Sibling LayerThis is a really quick tip: hitting TAB will select the next sibling layer (SHIFT + TAB will select the previous). 3. Enter/Exit Groups and FramesThis is another simple tip: we’ve just covered traversing within a group or layer, but to navigate down into nested groups, hit ENTER. To navigate back up, hit SHIFT + ENTER.Figma Learning ResourcesStay tuned for more tips, and to learn how to use Figma like a pro take a look at...
11 Practical Web Animation Courses
Meaningful, well-designed animation can really enhance the user experience in your websites and apps. It can tell a story, aid in navigation, and so much more.If you want to know how to use animation in your web design and development projects, look no further. We've put together a comprehensive list of 11 courses that will teach you how to create beautiful animations with CSS, JavaScript, and dedicated frameworks like GreenSock and Sequence.js.
1. Practical Web Animation This first course is a great starting point for learning about animation. In 30 videos lasting more than four hours, you'll learn lots of practical ways to create animations for buttons, pricing tables, and other useful web elements, using concise CSS and jQuery.  2. 6 Handy CSS3 Animation Projects Sometimes, the best way to learn a new skill is by rolling up your sleeves and completing real-life projects. In this short course, you’ll build six small but useful projects that use CSS animations.  3. A Visual Guide to CSS Animation While JavaScript and jQuery are useful for building animations, it's also possible to create awesome animation effects using pure CSS. In this course, you’ll learn how to create CSS animations powered by the transition and transform properties. And by using Webflow’s popular visual web design tool (via a free account), you’ll be able to see your animations play out in real time,...
How to Use Responsive Resize and Constraints in Adobe XD
In this tutorial we’re going to explore some new features in Adobe XD, namely “responsive resize and constraints”. These features, added in September 2018, allow real scaling of designs within Adobe XD, giving us genuinely responsive web design capabilities. To demonstrate these new features I’ll be using the Bones iOS wireframe kit available on Envato Elements:Bones IOS Wireframe KitWatch the Video Resizing Before the XD UpdateBefore Adobe XD introduced its new resize features, resizing a design meant manually repositioning all the required elements. For example, you’d make your artboard bigger, then reposition, realign, and resize the top bar elements and all other objects accordingly. Not ideal.Responsive Resize NowResponsive resize takes all of that manual labor and fixes things for you automatically. Open a document in Adobe XD and you’ll notice a Responsive Resize toggle in the properties pane:Now when I resize the same artboard, you’ll see that centrally-aligned object remain in the center, right-aligned objects stick to the right, and left-aligned objects remain on the left. Equally, when I stretch the artboard vertically, the positioning of the UI elements is retained perfectly.Original and resized UI in Adobe XDTailoring AlignmentThe alignment and spacing of objects can be tailored to your needs. For example, if you look at the four elements at the bottom of our...
Figma Layers Panel Tips
Figma is fast becoming the web industry’s design and prototyping tool of choice, arguably even more so than Adobe XD and Sketch. This is the first in a series of thirteen posts, each one a small collection of Figma tips and tricks to help you learn something specific. So let’s begin with some tips to speed up working with the layers panel.Watch Tips 1. Layer Groups Auto-Delete When EmptyIn many design applications, by deleting sublayers (or child layers) the main parent layer will still remain intact. In Figma, however, by selecting and deleting all the child layers the parent is also deleted, which helps keep things nice and neat.Selecting and deleting child layers 2. Unlock or Unhide All ObjectsYou can unlock or unhide all objects at once by typing CMD + / or CTRL + / (depending on your platform). Enter (for example) “unlock” in the box which pops up and select which command you’d like to perform.Unlock objects 3. Super-Fast Layer RenamingWhen renaming layers you can hit TAB to skip quickly to the next one. Hitting SHIFT + TAB will take you back up the list, renaming as you go.Fast layer renaming 4. Collapse and Expand Multiple LayersTo expand multiple layers at once, start by selecting the layers you want in the layers panel to the left. Hold down CMD or CTRL depending on your platform, then hit any one of the little expand arrows you see to the left of the layer names...
18+ Best HTML Resume Templates for Awesome Personal Websites (2018)
A personal website is one of the greatest assets you can have in 2018. Not only does it put you in complete control over your name and your personal brand, it also increases your visibility and makes it easier for employers, or even clients, to find you online when they're looking to hire for a particular talent or skill.Whether you’re fresh out of college and looking for employment, trying to break into the freelancing world, or you're a seasoned pro wanting to attract more clients, you should have a personal resume website that represents your skills best.Example of professional resume (CV) website design from MotiCV site template.What Are The Key Features of Great HTML Resume Templates?When trying to create an awesome personal site, you should focus on choosing an HTML template that has all the features needed to translate a traditional resume onto a different medium—the internet. The best resume websites have a number of important ingredients in common. Here are a few key site template features to keep an eye out for: Well Designed Resume Sections -The right sections form the backbone of a good html resume, so use a site template that has sections for skills, education, and to showcase your experience. Make sure you can enter the information where needed without having to code it yourself.  Working Contact Form - Ensure the resume contact form is working and doesn’t...
Hands-on With ARIA: Accessibility Recipes for Web Apps
In the confusing world of web applications, ARIA can help improve accessibility and ease of use for your creations. HTML isn't able to handle many types of relationship between elements on the page, but ARIA is ideal for almost any kind of setup you can come up with. Let’s take a look at what ARIA is, how it can apply to your web app, and some quick recipes you can use for your own sites.Basics of ARIAARIA, also called WAI-ARIA, stands for the Web Accessibility Initiative–Accessible Rich Internet Applications. This initiative, updated by the W3C, aims to give developers a new set of schemas and attributes for making their creations more accessible. It specifically aims to cover the inherent gaps left by HTML. If you’re not familiar with what it does already, you should take a look at our primer on ARIA. You might also be interested in our pieces on ARIA for the Homepage, and ARIA for eCommerce.Briefly though, ARIA has three main features that we'll be focusing on: Creating relationships outside of the parent-child association: HTML only allows for relationships between parent and child elements, but the associations we want to define aren't always nested within each other. ARIA let's us define element relationships outside of this constraint. Defining advanced controls and interactivity: HTML covers many basic UI elements, but there are many more advanced controls that are...
How to Quickly Build Layouts With Bootstrap 4’s Responsive Flexbox Utilities
In this tutorial I’ll show you how to quickly build layouts with Bootstraps 4’s responsive flexbox utilities. To gain a better understanding of these utilities, we’ll examine four different examples.Note: this tutorial assumes you’re familiar with Bootstrap 4 as well as flexbox. Take a look at these courses to get you going in the right direction. Bootstrap 4 This Is Bootstrap 4 Adi Purdila Flexbox A Comprehensive Guide to Flexbox Alignment Anna Monus Flexbox A Comprehensive Guide to Flexbox Ordering & Reordering Anna Monus
Introducing Bootstrap 4’s Responsive BreakpointsBefore we go through our examples, let’s first have a look at Bootstrap's media queries. The framework defines five pixel-based breakpoints for grid columns, which are shown in the following table: Screen Viewport Size Class prefix Extra small < 576px
.col-*
Small ≥ 576px
.col-sm-*
Medium ≥ 768px
.col-md-* Large ≥ 992px
.col-lg-* Extra large ≥ 1200px
.col-xl-*
Example #1
Down to business! In the first example, our goal is to horizontally and vertically center the contents inside a section, like this:
1. The MarkupHere’s our HTML:<section class="d-flex text-center"> <div class="container d-flex justify-content-center"> <div class="row align-items-center justify-content-center"> <div class="col-10">......