Build a simple One Page website online with Carrd

Carrd is the new website builder on the block.

What makes it different? Apart from being free, it’s focused on creating simple clean One Page websites. Yup, a delicious niche.

Carrd is lead by AJ who is well known for his generous collection of free HTML templates over at HTML5 UP (that recently clocked it’s 8 millionth download).

AJ is a mad man when it comes to shipping. Since the launch of Carrd in March he has rolled out so many awesome updates to the platform and continues to do so almost daily.

Enough small talk, let’s take a look at how we create a One Pager with Carrd.

---

How to create a simple One Pager with Carrd:

Estimated time to publish: 5 minutes

Step One: Choose a Starting Point

Once you’ve visited Carrd.co you don’t even need to signup, just click the Get Started button and you are taken to a template dashboard where you choose your base layout:

There is a lot competitors can learn here. No yuk double opt-in emails. No Credit Card payments. Straight in. Less talk, more rock.

You are then presented with an infographic of useful instructions:

Take note but don’t stress too much about them, these are easily accessible again from the menu hamburger icon.

Step Two: Start Editing

Yup, you’re already in edit mode. The elements of course vary per template but the editing is all the same. Click an element and the option panel will slide out.

Here I’ve clicked the blank profile image element, then was prompted up upload an image in the slide-out panel:

Then I edited all the text by clicking on the “dummy” placeholder text and changed the options accordingly in the slide-out panel:

I changed the font family, color, size and weights. The editing experience is really smooth and all changes reflect in real-time.

Next up was social icons. It was super easy changing to the Solid icon style (from the default circle) and good to see tons of networks to choose from:

and lastly background image:

There are neat advanced options for color overlays, gradients and animations.

Step Three: Save and Publish

Now you simply hit the save icon top-right (where the green dot is) and you are presented with a final form to enter in your name, email, carrd.co username and some SEO info. When happy, hit the Publish button:

Step Four: Verify Email Address

Simply check your email and click the link sent from Carrd and your new One Page website is live! Here is the demo I just created:

How easy was that! Don’t forget there are lots more templates to choose from and more options I haven’t covered.

---

So what are the Free account restrictions?

There are two main restrictions to a free Carrd accounts:

• (Subtle) Carrd accreditation under your social icons (as seen above)
• Only option for a Carrd username and not a custom domain

---

Sounds pretty fair! What is Carrd Pro all about?

Carrd Pro accounts are ridiculously affordable at only $19/year (yes, that’s annually) and include the following:

• Custom Domain Support – eg. hitdelete.com and not hitdelete.carrd.com
• Multiple Sites – Up to 10 One Pagers per account
• Contact Forms – Including MailChimp support
• Widget Elements – Add any of the following third party widgets to your sites: Stripe Checkout Button, Gumroad Button, Facebook Like Button
• Unbranded – Accreditation removed.
• Favicons
• Google Analytics integration – for tracking visitor stats
• Larger images – up to 5MB
• … and loads more

Best of all, you get to support AJ and Carrd to continue making radness online.

---

Hope you enjoyed the quick Carrd overview, I’ll be working on a Carrd video review soon:)

by Rob Hope via One Page Love

Logopitcher

Logopitcher is a website, where you can create your own interactive logo presentation. It is completely free and the generated logo presentation has no external dependencies. You can save, use and share it right away.

by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

The Golden State Record

Dark-schemed One Pager for the unique 'The Golden State Record' event taking place in Berkeley, California in September.

by Rob Hope via One Page Love

How to Deal with Distracting Housemates When Working from Home

After several years of working from home, I still encounter troubles from time to time. Housemates move in and move out, so every now and then boundaries have to be reestablished, and house responsibilities also shift around as our working hours change — it’s an ever-evolving system that we have to adapt to.

Now unless you share a home with other freelancers, your housemates aren’t going to empathize with your needs right off the bat. Learning how to communicate your needs is key, but you’ll also have to learn how to adapt to new surroundings, to make compromises on noise levels, responsibilities and so on.

If you find it hard to adapt to new surroundings or make compromises on living situations, don’t worry — I firmly believe that anyone can find a balance that suits them, and the folks they share a home with. Worst case scenario, you could always form a roommate agreement (which is a real thing by the way!).

BOUND-A-RIES!

You probably shouldn’t shout and/or enunciate the word (if you feel like you have to, you need new housemates), but you should definitely establish boundaries early on. A quick “heads up guys” in casual conversation is less awkward than “right, we need to have a chat” after a frustrating incident.

Distributing Responsibility

Everybody has to do their fair share of the housework, but between 9am and 5pm (or whatever your working hours are) you’re at work and others need to understand that. The same goes for other responsibilities such as babysitting (for those with a family) or even looking after house pets. Puppies especially need constant (almost 24/7) care, and the novelty of having one will soon wear off as the bank starts to run dry.

Make it clear that you’re happy to chip in with whatever needs to be done, but housemates need to understand that you do in fact have working hours like anybody else, that you’re not just “sitting around the house all day”. I wrote that in quotes because I’ve actually had this said to me several times!

So to summarize, working from home does not mean that:

1. You’re a stay-at-home wife/husband
2. You have more time, henceforth you can have a dog/cat
3. You’re able to do the majority of the housework
4. You’re available because “you can work whenever, right?”

No, no, no and no!

Balancing Responsibilities and Flexible Hours

A common reason for working from home is “I’ll have more time to [insert fun activity here]”, but that’s rarely ever the case. In fact, you should be actively trying to reduce the amount of responsibilities that you have to ensure that your work comes first. When forming new work contracts you should fight for flexible hours — these will be a Godsend during an unexpected turn of events (things happen). Let’s say that your child needs a doctor but your partner is unable to drive today. Flexible hours means you can expect the unexpected.

If all else fails, you could always distribute responsibility via a quick game of Rock, Paper, Scissors, Lizard, Spock!

Having a Private Space

Whether your household has a child/dog/cat/lizard or not, your own office or room is always a useful thing to have. If you live in a particularly noisy household (or at least one that’s not dead silent), remember that it’s their space too, and a private room for yourself means your housemates can feel free (to an extent of course) in their own home — it benefits everyone.

Continue reading %How to Deal with Distracting Housemates When Working from Home%

by Daniel Schwarz via SitePoint

Adobe XD Tutorial: A Pain-free Way to Import Assets

Ever since Adobe decided to take on Sketch by finally building a dedicated user interface design tool, many have wondered how long it would take before both apps were fighting in the same weight division.

Let's take a look at Adobe XD's new drag and drop asset import feature, and then you can decide for yourself. Adobe XD is only available for Mac at the moment, but it'll be available for Windows very soon. Here's how we typically import assets today:

• Save As → File → Import or
• Ctrl/Command+C → Ctrl/Command+V

"Drag and drop" has also been a feature in most design applications for as long as I can remember, but there's no way to automate this action with various reusable components at once, essentially offering unique content to a set of components that are otherwise identical in terms of visuals – until now that is.

Designing a Grid of Article Cards with Repeat Grids

Start by opening a new "Web" document from the splash screen - it doesn't matter which size you choose, as long as there's a lovely white canvas to work on. Press R to create and draw a rectangle, and ensure that the dimensions are 400x300px.

Now create another rectangle (400x100px), remove its border, and then use black (#000000) with 80% opacity for the "Fill" color – make sure to select Color Sliders → RGB Sliders first.

Let's create a series of text layers to lay over this rectangle; in a moment it'll be clear that we're designing article cards consisting of the article's category, title, and date. Press T to select the "Text" tool and use the following optional styles:

• Fill: #F39C12
• Text: Helvetica Neue, 15, Bold
• Height: 18 (same as Line Spacing)

And again:

• Text: Helvetica Neue, 21, Condensed Bold
• Fill: #FFFFFF
• Height: 26

Final time:

• Text: Helvetica Neue, 14, Regular
• Fill: #FFFFFF
• Height: 16
• Align: Right

Reusing Components with the Repeat Grid Tool

Drag the mouse cursor to select all of the layers at once, then select the "Repeat Grid" tool from the sidebar. You'll notice that the component now has tug-able side handles – you can tug these handles to tile the component as many times as needed. What happens to one tile will happen to all of them (in terms of styling, but not necessarily in content, which is very handy).

Tip: you can easily adjust the width of the gutter by dragging the spaces in-between each row or column of the grid.

Continue reading %Adobe XD Tutorial: A Pain-free Way to Import Assets%

by Daniel Schwarz via SitePoint

Unbundling Bundler: A Thorough Look at Bundler’s Utilities

In my previous article, I went into great detail about Bundler’s Gemfile and all the magic it contains. The Gemfile, however, is only a part of the Bundler ecosystem, so I went back to the docs to dig in other areas and landed on another part of Bundler that I didn’t know as well as […]

Continue reading %Unbundling Bundler: A Thorough Look at Bundler’s Utilities%

by Glenn Goodrich via SitePoint

Pop-Up Magazine

One Pager for 'Pop-Up Magazine' - a unique "live magazine" series of events. Illustrations by Wendy Macnaughton.

by Rob Hope via One Page Love