lunedì 16 marzo 2015

35+ Resources to Become a Kick Ass WordPress Developer

There is a low barrier to using and working with WordPress. In fact, anyone with knowledge of PHP or with design skills can start using WordPress immediately and see results.

But if you want to really succeed with WordPress, build a strong business and gain respect, you need to be an over-achiever. Why? Because there are plenty of other WordPress developers out there who are also vying for clients and trying to earn a buck.

Luckily, there is a plethora of information available so you can move beyond the basics of tweaking a site so you can start calling yourself a fully-fledged WordPress pro. It also helps to pay attention to what the actual pros – the WordPress core developers and contributors – are doing.

So if you’re ready to kick some serious ass, read on.

  • WordPress Codex

    codex

    It goes without saying that every good developer who wants to be great references the Codex. The Codex is, essentially, the WordPress bible.

    If you’ve never used the Codex before, even for the basics, like setting up a Multisite installation or for reading up on detailed information on a function, then you’ve probably been living under a rock or in a dark, dank cave, with only a generator to power your MacBook Pro.

  • Make WordPress Core

    make-wordpress-core

    Make WordPress is the official blog of the core development team for WordPress.

    The site features regular updates on new features for upcoming version of WordPress. If you want to stay on top of what’s happening in WordPress, this is the place to be.

  • WordPress TV

    wordpress-tv

    If you can’t get along to WordCamps, WordPress TV is the next best thing. WordPress TV features recorded videos from WordCamps held around the world.

    It’s easy to search through the site for videos on any topic, plus watching someone give a presentation can be a lot more engaging them simply reading a blog post.

  • WP Beginner

    wpbeginner

    Let’s start easy. If you think you’re too good to read a beginner site, think again. Syed Balkhi’s site is the largest unofficial WordPress resource on the web and is updated daily with new tutorials and how-tos.

    While many of the site’s posts may seem too easy, and even trivial for advanced users, there are often interesting tips and tricks that are helpful for any good developer.

  • Tuts+ WordPress

    wptuts-plus

    If WP Beginner is too easy for you, then Tuts+ is the place for you. Since Tom McFarlin recently took over the editing gig at Tuts+, the site has gone full throttle with advanced topics, such as object-oriented programming in WordPress and using WordPress for web application development.

  • Tom McFarlin

    tom-mcfarlin

    Speaking of Tom McFarlin, his personal blog is a thoughtful and informative extension of his work at Tuts+. The topics he writes about are heavily geared towards programmers, but these are interspersed with posts on discussions such as The Hate and Vitriol of WordPress and Developer Distractions: The Available Tools.

  • Smashing Magazine

    wp-smashing-magazine

    Smashing Magazine is one of the first web development/design blogs I remember reading. The WordPress articles are posted almost monthly, but the site contains a large back catalog of articles by some recognisable WordPress personalities, such as Siobhan McKeown and Tom McFarlin.

    The posts are usually in-depth and well-researched.

  • WP Mayor

    wp-mayor

    WP Mayor regularly publishes how-tos, just like WP Beginner. The posts are usually a mix of beginner and intermediate level stuff, with a few promotions thrown in for good measure.

  • ManageWP Blog

    ManageWP.org

    ManageWP is another regularly updated WordPress blog featuring, tips and tricks, how-tos and reviews.

    The site has a lovely mix of intermediate level articles, as well as information on third-party plugins and themes.

  • Paulund

    paulund

    Blogger and web developer Paul Underwood maintains a fantastic collection of tutorials, snippets and other resources on his personal site.

    His blog is a great place for intermediate and advanced level, including cool topics like Create A Clock In CSS and how to Programmatically Add Menu Item.

  • Pippins Plugins

    pippins-plugins

    If you haven’t heard of Pippins Plugins, you’ve probably just finished a stint serving time in solitary confinement. Pippin Williamson has coded so many plugins, his products alone could fill the WordPress Plugin Repository and Code Canyon. Well, almost.

    Pippin’s blog is a great mix of thoughtful reviews, tutorials on advanced topics and how to use features such as the WordPress heartbeat API.

  • Konstantin Kovshenin

    konstantin-kovshenin

    Konstantin Kovshenin is a developer for Automattic and in his spare time he is… a developer for WordPress core. There isn’t much about WordPress this guy doesn’t know.

    He regularly updates his blog with posts on advanced topics like Understanding _n_noop() and more reflective stuff relevant to all plugin developers like Lessons Learned from Building and Supporting a (Fairly) Popular WordPress Theme.

  • Otto on WordPress

    otto-on-wordpress

    Otto’s blog is where I go when I want to feel completely out of my depth. His blog focuses on advanced WordPress topics like Making a custom control for the Theme Customizer and Theme/Plugin Dependencies.

    While his blog is updated sporadically, it’s a great place to go if you want to get stuck into the nitty gritty of code. Otto is also a great proponent of internationalization, and some of his posts look at how to make themes and plugins translation ready.

  • Mark Jaquith

    mark-jaquith

    While Mark Jaquith doesn’t post all that much on his blog, his posts are an interesting take on WordPress development from a core developer. Hopefully we’ll see more posts from Mark soon.

  • Andrew Nacin

    andrew-nacin

    Core developer Andrew Nacin rarely posts on his blog, but when he does he’s got a lot to say. Take his latest post for example, The qualities of a great WordPress contributor, which comes in at a lazy 2869 words. It’s a great read if you’re thinking about contributing to WordPress.

  • Hongkiat

    hongkiat

    Hongkiat’s WordPress category features a regularly updated stream of how-to and list posts covering everything from how to install WordPress locally and 20 WordPress Shortcodes and Plugins You Might Want To Try.

    The site is well worth reading for tips and tricks or theme inspiration.

  • WPLift

    wplift

    Much like WP Mayor and ManageWP, WPLift offers a varied collection of tutorials, guides and WordPress round-ups.

    WPLift posts a great weekly round-up of new, tutorials and resources published on third-party sites.

  • Matt Report

    matt-report

    Matt Medeiros’s site focuses on the business of WordPress, with a mix of interviews, tips and reflections on working in the WordPress ecosystem.

    Matt is also well-known for his Matt Report podcast and in-depth interviews with WordPress personalities.

  • Chris Lema

    chris-lema

    Chris Lema’s site completely veers away from the development site of WordPress, instead focusing on the entrepreneurial aspects of using the CMS.

  • WP Kube

    wp-kube

    WP Kube is in the same vein as WP Lift and WP Mayor with its mix of list posts and how-tos.

    This site is more targeted at intermediate level developers who are looking for curated information on plugins and themes.

  • WP Explorer

    wpexplorer-blog

    WP Explorer is another how-to site, with interesting content on topics such as creating a WordPress theme and customising the admin user interface.

  • Carrie Dils

    carrie-dils

    Genesis developer Carrie Dils blogs about all things WordPress, such as How to Run a Successful Affiliate Campaign Without Being a Douche to How To: Add a Logo to a Genesis Theme.

    Carrie’s blog is a great mix of development and reflective articles with an emphasis on Genesis.

  • WPMU DEV

    wpmu-dev

    I would be remiss to dismiss this very site, WPMU DEV Blog! We post daily on everything from the best free themes available to reviews on plugins and WordPress services.

    On Saturdays and Sundays we publish Weekend WordPress Projects, an ongoing series of quick projects you can complete in under an hour to improve your WordPress site.

  • WordPress Development Stack Exchange

    stack-exchange

    Stack Overflow is a fantastic question and answer site for programmers who are stuck and need a hand with frustrating code. The site’s dedicated WordPress area, WordPress Development Stack Exchange allows you to search through questions and tags and post your own question for other developers to answer.

  • Reddit

    reddit

    Reddit features two dedicated subreddits – WordPress and ProWordPress. The ProWordPress forum is targeted at advanced users and offers a community for developers to exchange ideas. Brad Williams from WebDevStudios creates ProWordPress, which he moderates along with Travis Northcutt and Michael Beckwith.

    ProWordPress isn’t a place for beginners, so much as it is a place for developers to ask questions, seek advice and talk code.

  • Advanced WordPress

    advanced-wordpress

    With almost 5000 members, the Advanced WordPress group on Facebook is a popular place for WordPress developers to meet, share ideas and knowledge about advanced features and functionality. This is definitely not the place for beginners.

  • WP Tavern

    wp-tavern

    WordPress Co-founder Matt Mullenweg’s news site is updated daily with articles on new WordPress plugins, themes, services and events.

  • ManageWP.org

    managewp-org

    Vladimir Prevolac launched his WordPress news curation experiment, ManageWP.org last year. The site encourages WordPress users to share articles in return for up votes and community cred.

    The site offers an easy way to stay on top of the latest articles published about WordPress.

  • wpMail.me

    wpmail-me

    You’re not a member of the WordPress community if you’re not subscribed to wpMailme. This weekly newsletters it published weekly and includes a curated round-up of WordPress news and articles, themes news and releases, plugin news and tutorials.

  • Post Status

    poststatus

    Post Status is another dedicated WordPress news site. It featured curated links to announcements and articles, and sometimes posts on community topics.

  • Torque

    torque

    Web host WP Engine launched its news site, Torque, last year at WordCamp San Francisco to much fanfare. The site publishes a mix of articles on WordPress and non-WordPress topics by contributing writers.

  • Codeacademy

    codeacademy

    Codeacademy offers free coding classes in languages such as PHP and JavaScript. It’s a great site if you’re learning how to code or just need to brush up on your skills.

  • Tree House

    tree-house

    Like Codeacademy, Treehouse offers online classes. The site has been gradually adding to its collection of courses and in January announced a new beginner’s course in the WordPress track. The site has since added six other WordPress courses, including How to Build a WordPress Theme and Local WordPress Development.

  • Wprecipes

    wprecipes

    Wprecipes features quick code snippets to help developers make the most of WordPress, such as How to change the title attribute of WordPress login logo and Easily delete WordPress post revisions using your functions.php file.

  • WPSNIPP

    wpsnipp

    WPSNIPP is another great code snippet site, featuring 622 snippets and counting. The great thing about this site is the accompanying comments where developers often discuss ways to alter a piece of code or add extra functionality.

  • WP-Snippets

    WP-Snippets

    WP-Snippets offers a collection of more than 200 snippets designed to make WordPress development easier.

  • CSS-Tricks

    css-tricks

    CSS-Tricks provides a comprehensive collection of snippets, tips and tricks to help developers tweak WordPress. The site contains a dedicated WordPress category, as well as sections for PHP, Javascript and CSS.

 

VIA: wpmudev

Categories: , ,

How To Become A Top WordPress Developer

First, let’s set a few things straight: becoming a top WordPress developer is hard work — very hard work. It’s going to take a lot of time, energy and determination. If you’re looking for an easy checklist or some “fast pass” to the top, you’re going to waste your time. Being one of the best is hard, and statistically speaking, the odds are stacked against you.

By the way, installing WordPress, reading a few tutorials and customizing a few themes does not make someone a top developer. They may call themselves an “Expert”, and that’s fine. They may know more than the average person. But a top developer moves far beyond the basics, and pushes the very boundaries of what is possible. They innovate, contribute to the community, and demonstrate mastery in the work they do. So I want you to be more than an “expert”, I want you to be one of the best.

Why Be A Top Developer

Why not? If you work with WordPress (or plan to start), why just settle for being average? There’s too much “average” in life already. “Normal” is highly overrated. There are other reasons, though. For instance, the top WordPress developers:

  • Make the most money
    Demand for WordPress development is high and clients are willing to pay more for developers who are the best in their field.
  • Get the best clients
    When you are at the top, you have the freedom to say “No” to the projects you don’t want, and “Yes” to the projects you do.
  • Have the most influence
    Being at the top means you have influence (and responsibility) and the capability to shape the future of WordPress as well as the ecosystem that is built around it.
One Hour of Reading a Day

If you’re going to make it to the top, then you need to spend at least one hour each workday focused on reading and learning more about WordPress — outside of any development work. There are no shortcuts, and no other ways around it. Learning and mastering WordPress is going to take time. If you watch TV, cut it out — more than 90% of it isn’t good for you anyway. If you’re a gamer, sell your games or throw them away. Reaching the top takes commitment and sacrifice and the best place to start is with the things in life that aren’t doing you any good anyway.

Start with one dedicated, distraction-free hour of reading for each workday. Shut off instant messages, put your phone on silent, and read. Take notes on what you learn along the way. You’ll find the time goes by faster than you would have expected. Keep at it, day after day, week after week, and month after month. And as you start to see success, put in more time for reading.

Alternatively, consider a three-hour block, two to three times a week. The key is to make a commitment to learning and honoring that commitment by setting aside the necessary time to see it through.

Enrolling in WordPress University

There’s never been a better time to learn and master WordPress than right now. There are so many excellent resources available to those willing to put the time and effort into using them. Before you can start gaining experience, you need some education. Sure, you could just jump in and start breaking things. But I suggest you wait, and cultivate the self-discipline it takes to learn — there will be plenty of time to break things later. As you start your education, it’s important to begin with the social aspect of your experience.

Hang Out with the Right Crowd

We become like those we associate with. If you want to be one of the top WordPress developers, start spending time with those at the top. Read their blogs, follow them on Twitter, give feedback on their thoughts and ideas, go to WordCamps to meet them and listen to their talks. Read the interviews on CodePoet. Follow their examples, ask them for advice, follow their advice, and report back.

Here is a small list of WordPress developers to get you started:

Read the Material

The amount of reading material available on WordPress is overwhelming. There are thousands of people talking about WordPress and it is becoming increasingly difficult to filter through the noise. There are authorities, however, and when you commit to mastering WordPress, then you should start your journey by finding the highest quality resources and concentrating your efforts just on those.

Here are a few resources to get you started:

  • WordPress Codex
    The WordPress codex is a community-edited repository for all things WordPress. Start with the very basics and focus on mastering the WordPress interface itself from an end-user’s perspective. Learn the WordPress semantics. Read about theme design and plugin development.
  • Books on WordPress
    There are more than a dozen books available on WordPress. Start off with the titles of greatest interest to you and then work towards the others. Think “WordPress For Dummies” is too basic? Maybe not. Your clients may read it and it’s important to have their perspectives. When you’re finished, thank the author and write a review.
  • Blogs on WordPress
    Find and follow the best blogs about WordPress. Subscribe to their feeds. Read them regularly and give feedback to the authors. A few of my favorite blogs are WordPress on Smashing Magazine, WP Tuts+, and WP Candy.
Understand the Technology

If you’re going to master WordPress as a developer you need to understand the technology. If you’re already a programmer and PHP/MySQL aren’t new to you, great. Make sure your skills are up-to-date. If you’re new to programming, start learning.

Here are some ways to begin:

  • Learn PHP and MySQL
    It’s really important that you know PHP and MySQL and that you learn the best practices. A few out-dated tutorials aren’t going to do it. And if you learned it a few years ago, a lot of the practices you picked up are probably out-of-date. Not sure where to begin? Start with Lynda.com or Learnable.com. Learn about MySQL performance.
  • Explore the Codebase
    Take time to explore the WordPress codebase on Trac and on Xref. Read through the documentation to understand how things work. Look up what doesn’t make sense to you and ask questions. Familiarize yourself with how WordPress is structured.
  • Run The Nightly
    Setup a local development environment and run the nightly build as a way to stay up-to-date on WordPress as it’s being developed.
  • Read “Make WordPress”
    A good way to understand the technology is to follow the development discussions taking place on make.wordpress.org. You can follow discussions about the Core, Plugins, and Themes for starters.
Do the Homework

Put what you’re learning into practice. Start with your own WordPress websites. After you read a tutorial, follow it on your own. Experiment. Break things down. Track what you’ve learned and record your insights and breakthroughs for future reference. Spend as much time as you can taking what you’ve learned and applying it to your own projects and experiments.

Here are a few areas to explore:

  • WordPress APIs
    Start by familiarizing yourself with the list of available APIs on the Codex. Read through the information available for each API and experiment with each (some will be easier than others). Search for tutorials for each of the APIs to give you some real-world perspective and experience on what can be done with each.
  • Ajax in WordPress
    Even if you’re already familiar with Ajax, learn about the use of Ajax in WordPress. Then, move on to tackle using Ajax in plugin development. Search for tutorials to develop your experience further.
  • WordPress PHP Classes
    Familiarize yourself with the list of classes created by WordPress developers. Experiment with them on your own projects and master them. In particular, pay special attention to WP_Query, WP_Theme, and wpdb. Search for tutorials on each of the classes, as well as non-core, community contributed classes like WPAlchemy.
Gaining Experience With WordPress

With your education well underway, it’s time to gain real-world experience — and lots of it. Your path to the top is lined with trials and difficulties and gaining experience outside the safe playgrounds of your own projects is a critical step in the right direction. One of the best ways to get started is doing work for others.

Take On Clients

Working for clients, paid or free, is one of the best ways to gain experience. Clients introduce challenges you would never have to deal with working on your own. If you’re just getting started, learn how to get your first client. While the market focus (large clients vs. small clients) will vary, the heart of the matter is get a lot of experience. The goal is to not just get a few hundred hours working on WordPress, but a few thousand. You need to put the time in with real-world experience and taking on clients is one of the best ways to do this.

Develop a Public Theme

Build a theme you’d actually use. Release it, paid or free. Listen to the feedback you get from developers and end-users who use your theme. Ask for a peer review from theme designers you respect. Update your theme as you get feedback and as your abilities improve. Work hard to make a theme that you can be proud of.

Develop a Plugin

As you learn and work with WordPress you’ll eventually find a need that hasn’t been met. When you do, meet it yourself. Take what you’ve learned about plugin development and put it into practice. Write a plugin that’s secure and that solves a real need, without being another “me too” contribution to the already massive plugin community. Release it, paid or free, and get feedback from the people who put your plugin to use.

Contribute a Patch

Read the Core Contributor handbook and learn how to submit a patch. It can be a daunting process your first time around, but look for a challenge that you can tackle, and stick to it. Contributing a patch is an invaluable experience and an important part of being able to consider yourself a top WordPress developer.

Master Debugging

Learning how to write bug-free code is a critical step in becoming a great developer. Start with the Codex and learn about debugging in WordPress. Read Andrew Nacin’s post on 5 Ways To Debug WordPress. Familiarize yourself with some of the developer oriented plugins, like Core Control, Debug Bar and Log Deprecated Notices.

Joining The WordPress Community

As you continue your education and put what you’ve learned into practice, the next step is to become an active member of the community. You may be a fantastic developer, but it doesn’t count for much if no one knows you exist. Spend time investing in the community. One of the best ways to do so is sharing what you know.

Write Tutorials

I got my start back in 2006 with a simple tutorial I wrote (be warned, it is a little dated). I took what I had just figured out and poured it into a tutorial to help others and save them the time (and headache) I had just experienced. A lot of people read it, a few wrote back and said thank you, and some people even asked me to do some work for them. So write tutorials that take the best of what you’ve just learned and present it to others so they may reap the benefits of your efforts. It’s worth it.

Contribute to the Codex

As you spend time reading through the Codex you will notice areas that need improvement. Learn about becoming a volunteer in the Codex. Dedicate time to improving the quality of the documentation. While documentation in the Codex is continually improving, there are still functions and features in the WordPress core that go undocumented. If an area is beyond your current capabilities, bring it to the attention of others and embrace the opportunity to learn more in the process.

Participate in Forums

Most WordPress beginners start out asking questions on the official support forums. Start there by answering questions (even the silly, basic ones — we all start somewhere). From there, become an active member of the WordPress Stack Exchange community. Answer questions and learn from the answers that other developers are giving.

Present at WordCamps

Attend upcoming WordCamps and look for opportunities to present and give value to the WordPress community. A true sign of your expertise is your ability to take what you know and teach it to someone else. Read the Diary Of A WordCamp. Want even more of a challenge? Become an organizer and start a WordCamp near you.

Reward And Responsibility

The reward at the top is worth the effort. If you’re building a business around WordPress (read 7 reasons why you should), a mastery of WordPress is a critical step to your success. In 2011, according to the official WordPress Survey results, “6,800 self-employed respondents were responsible for over 170,000 websites, personally”. Of those, the average median hourly rate was $50/hour. Based on the Pareto principle, the top 20% of those developers (less than 1,400) are responsible for 80% of the work done (and they make more than $50/hour).

Now, being in that top 20% carries with it a high-level of responsibility. Staying at the top requires a commitment to ongoing education and continual experience. Never stop learning and improving. Being at the top also puts a level of responsibility on your shoulders for the health and future of the WordPress ecosystem. Get involved. Weigh in on important matters. Contribute. Put a percentage of your success back into building up WordPress and ensuring its future.

Conclusion

Becoming a top WordPress developer requires a mindset of continual improvement and a willingness to do the hard work. It starts with an intentional focus on education and then moves to extensive real-world experience. Finally, the title of a “top developer” demands dedication to the WordPress community, as well as recognition of the responsibilities by those who mold and shape the future of WordPress.

 

VIA: Smashing Magazine

Categories: , ,

domenica 15 marzo 2015

Understanding Bootstrap’s Grid System

Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap’s CSS, I explained how Bootstrap functions as a responsive framework. In this article, we will discuss a related topic: The Grid System, one of the most important concepts in Bootstrap.

What is the Bootstrap Grid System?

Like any grid system, the Bootstrap grid is a library of HTML/CSS components that allow you to structure a website and place a website’s content in desired locations easily.

Think of graph paper, where every page has a set of vertical and horizontal lines. When these lines intersect, we get squares or rectangular spaces.

Graph paper

By Sfoerster (Own work) CC-BY-SA-3.0, via Wikimedia Commons

Well, this is also true for Bootstrap’s Grid System. It allows you to create rows and columns and then place content in the “intersected” areas.

Now the question is, how many rows and columns you can create using Bootstrap’s Grid System? Bootstrap allows you to create up to 12 columns and unlimited rows — hence the name 12-Grid System. So, let’s see how we can utilize this grid system to create various types of layouts.

Getting started with Bootstrap’s Grid System

To get started, naturally, you’ll need to have the necessary assets in your page to get Bootstrap working. If you’re new to Bootstrap, you can refer to our previous article Getting started with Bootstrap or my book Jump Start Bootstrap, to dig deeper.

Bootstrap’s Grid System is made up of 3 things:

  1. A container
  2. Rows
  3. Columns

Let’s explore each of the above in detail.

Creating a Container

Bootstrap’s grid system needs a container to hold rows and columns. A container is a simple <div> element with a class of .container. The container is used to provide a proper width for the layout, acting as a wrapper for the content.

Take a look at the following CodePen demo:

Here the container element wraps the content and sets left and right margins. It also has different fixed widths in different sized devices. Have a look at the following table:

Device Width Container Width
1200px or higher 1170px
992px to 1199px 970px
768px to 991px 750px
Less than 768px auto

You can choose a fluid container if you are not fond of a fixed layout. To do this, you use the class .container-fluid. A fluid container has no fixed width; its width will always be the width of the device.

Just note that both fixed and fluid containers have padding of 15px on the left and right sides.

Creating a Row

A row acts like a wrapper around the columns. The row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides.

A row spans from the left edge to the right edge of the container element. It is created by adding the class .row to a block level element inside the container.

Have a look at the following CodePen:

In this demo, you can see the text touching the left edge of the container element. This is because the container’s padding has been removed by the row due to the negative margins on the row.

Finally, there’s no limit on the number of rows you can create.

Creating Columns

Bootstrap uses different column class prefixes for different sized devices. These prefixes are shown in the table below:

Class Prefix Device Size
.col-xs- <768px
.col-sm- 768px to 991px
.col-md- 992px to 1199px
.col-lg- ≥ 1200px

So, let’s create our first Bootstrap column:

In the above demo, I used the class .col-xs-12 to create a single column that spans across 12 virtual Bootstrap columns. Hence, this column’s width will be the width of the row.

In the above demo, you will also see the 15px padding reappear to push the element away from the container. This is because every column in Bootstrap has a padding of 15px.

You must be wondering why I used the class prefix that belonged to extra smaller devices, which is .col-xs-. In Bootstrap, if a column is defined for a particular type of device then it is guaranteed to behave similarly in larger devices as well. Therefore, a column defined for extra smaller devices will work in all types of devices.

Let’s now create a 2-column layout for smaller devices and check out its behaviour in larger devices and extra-small devices. We will use the class prefix .col-sm- here. To create 2 columns of equal widths, we should assign 6 virtual Bootstrap columns to each one of them. This way, we maintain the limit of 12 virtual Bootstrap columns for a single row.

Here’s the demo:

Nesting with the Grid System

Nesting is one of the ways to create complex designs using Bootstrap’s grid system. It is also the one section where many first-timers have trouble.

We understand that to use Bootstrap’s grid system, we need 3 things: A container, rows, and columns. So to nest a grid system within a column we will need the same three things. But the only difference is that the container is already defined. In this case, the columns will behave as the containers for the nested grid system.

Here’s the logic: The containers provide 15px of padding, which is nullified by the row. Then we define columns that again have 15px of padding on the left and right side. So, to nest a grid system within a column, we simply need rows and columns. No .container or .container-fluid elements are necessary for a nested grid system.

Here’s an example of a nested grid system:

What About More than 12 Columns?

This is one of the root causes for disordered Bootstrap layouts. A wrong calculation in deciding the number of virtual Bootstrap columns can lead to an improper layout.

In such a case, a virtual row will be created and unfitted columns will shift to the next row. For example, if you have defined 2 columns with the classes .col-md-8 and .col-md-5, the second column will shift to a new row because it requires 5 virtual Bootstrap columns whereas only 4 are left.

Helper Classes

Bootstrap provides various helper classes that can be useful in certain situations in dealing with grids. These classes are:

  • .clearfix: Normally used to clear floats, adding this class to any column will make it shift to a new row automatically, to help you correct problems that occur with uneven column heights.
  • Offsetting columns: You don’t have to occupy all 12 of the virtual columns. You can use offset classes like .col-xs-offset-* or .col-md-offset-* to leave a particular number of virtual Bootstrap columns to the left of any column (kind of like invisible place holders).
  • Reordering: Use classes like .col-md-push-* and .col-md-pull-* to shift a column to the right or left, respectively.

Complimentary Code Snippet

To conclude, here is a complimentary code snippet for a 3-column layout with a responsive Bootstrap navigation bar. Have fun and let me know in the comments if there’s anything in Bootstrap’s grid system that I haven’t discussed here that you find interesting, problematic, etc.

(Just note that the 3-column layout won’t appear in the CodePen embed above, but you can view it at full screen).

 

VIA: SitePoint

Understanding CSS Grid Systems from the Ground Up

Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying to garner favor.

If you’re the curious type, such as myself, than you may be asking yourself what exactly grid systems bring to the table? How do they work? And how might you go about creating your own? These are just some of the questions I will be trying to answer as I explore the various concepts at play while stitching together a basic grid system from the ground up.

What is a Grid System?

In case you’re new to CSS grid systems, we’ll start with a quick definition. In basic terms, a grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Additionally, grid system code is project-agnostic giving it a high degree of portability so that it may be adopted on new projects.

The Benefits

  • They increase productivity by providing simple and predictable layout scaffolding to HTML design. The structure of a page can be formulated quickly without second guessing its precision or cross-browser compatibility.
  • They are versatile in how layouts can be constructed, being adaptable in varying combinations of rows and columns. They even support nested grids for more complex use cases. No matter your layout requirements, a grid system is almost certainly well suited.
  • They are ideal for responsive layouts. This is where grid systems reign supreme. They make it incredibly easy to create mobile friendly interfaces that are adaptable to different sized viewports.

The Primary Components

Grid systems include two key components: rows and columns. Rows are used to accommodate the columns. Columns make up the final structure and contain the actual content. Some grid systems will additionally include containers, which serve as wrappers for the layout.

Resetting the Box Model

First and foremost, it is important for any grid system to reset the box model. By default, the browser does not include the padding and border within the declared width and height of an element. This does not bode well for responsiveness. Thankfully, this can be fixed by setting the box-sizing property to border-box for both rows and columns:

.row, 
.column {
box-sizing: border-box;
}

Now we can leverage percentages for the widths of the columns. This allows the columns to scale upwards and downwards within different viewports while maintaining the structure.


Clearing Floats


In order to align the columns horizontally, grid systems will float the columns. This means you need to clear the floating elements on the row to maintain the structure of the layout. This is where a clearfix comes in:

.row:before,
.row:after {
content: " ";
display: table;
}

.row:after {
clear: both;
}

By applying the clearfix to the row in your CSS, it will cause the row to stretch to accommodate the columns it contains without adding to the markup.


Defining Columns


For columns, the styles need to be defined in 2 parts: the common styles and the widths. First the common:

.column {
position: relative;
float: left;
}

Here, the column is given a relative position to allow any absolutely position content within the column to be positioned relative to that column. The column is then floated left for horizontal alignment, which will cause the element to become display: block even if it did not start out that way.


Creating Gutters


Gutters help to create separation between columns for greater legibility and aesthetics. There are 2 schools of thought when approaching gutters; defining paddings within each column or using a percentage-based left margin for each column.


I prefer the latter approach because it facilitates responsive gutters that will remain relative to the columns and the viewport as a whole with different screen sizes. It also lets you define additional paddings for columns for further flexibility. The biggest advantage of padding-based gutters is in how they simplify calculations for column widths, which will become evident in the next section.


Using the percentage-based margin approach, we can target columns that are an adjacent sibling to a preceding column. This will create a left margin for every column except the first one, which we’ll define at 1.6% using the margin-left property:

.column + .column {
margin-left: 1.6%;
}

Calculating Column Widths


Before we can begin making calculations, we need to determine the maximum amount of columns per row. A popular choice is 12 as it boasts flexibility given that it is divisible by 1, 2, 3, 4, and 6. This permits a variety of different combinations that still allow for evenly distributed columns of the same size.


It’s important to understand that by going with a maximum of 12 columns per row, you need to fulfill that amount for every row regardless of how many columns you want. For example, if you wanted only a row of 3 equal columns, you would use 3 elements that each span 4 columns (4×3=12). Exceeding the sum of 12 will result in the extra column(s) wrapping to a new line.


Now that we know the maximum number of columns, next we need to determine the width of a single (1/12) column using the following formula:


scw = (100 – (m * (mc – 1))) / mc


Where:



  • scw = single column width
  • m = margin (1.6%)
  • mc = maximum columns (12)

When we plug in the numbers, we get a single column width of 6.86666666667%. From here we can use this number to calculate the rest of the column widths. The formula for this is:


cw = (scw * cs) + (m * (cs – 1))


Where:



  • cw = column width
  • scw = single column width (6.86666666667%)
  • cs = column span (1-12)
  • m = margin (1.6%)

Applying this formula for each of the 12 columns results in the following CSS.

.column-1 {
width: 6.86666666667%;
}

.column-2 {
width: 15.3333333333%;
}

.column-3 {
width: 23.8%;
}

.column-4 {
width: 32.2666666667%;
}

.column-5 {
width: 40.7333333333%;
}

.column-6 {
width: 49.2%;
}

.column-7 {
width: 57.6666666667%;
}

.column-8 {
width: 66.1333333333%;
}

.column-9 {
width: 74.6%;
}

.column-10 {
width: 83.0666666667%;
}

.column-11 {
width: 91.5333333333%;
}

.column-12 {
width: 100%;
}

Optimizing for Mobile Devices


Despite the fact that the grid system is responsive, it can only go so far. For devices with small viewports, such as smartphones, the width of the columns need to be adjusted to allow the content they contain to still appear legible and visually appealing. Media queries help with this:

@media only screen and (max-width: 550px) {
.column-1,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
width: auto;
float: none;
}

.column + .column {
margin-left: 0;
}
}

Here, we are telling the grid to allow every column to take up the full width of its container for devices with a viewport smaller than 550px pixels wide. Since gutters are no longer necessary here, we remove those too.


Alternatively, you could opt for a mobile first strategy that takes the opposite approach, scaling upwards to a 12-column layout. In such a case, columns start as full-width, then we establish the column widths and floats to allow them to align horizontally as the screen resolution reaches a specified threshold. This is the preferred approach for Bootstrap’s grid system, which doesn’t institute the column widths until the viewport reaches a minimum width of 992 pixels. This may be a more favorable approach for your use case, and should be something to look out for when evaluating a grid system.


Pulling it all Together


When we combine all the concepts and CSS, we can write HTML layout scaffolding like so:


<div class="row">
<div class="column column-4"></div>
<div class="column column-4"></div>
<div class="column column-4"></div>
</div>

<div class="row">
<div class="column column-2"></div>
<div class="column column-4"></div>
<div class="column column-4"></div>
<div class="column column-2"></div>
</div>

Check out the CodePen demo below to see the entire grid system in action, including nested grids:




You can also try the full screen demo for a better impression. Don’t forget to play around with the screen dimensions to see how the grid handles different viewports.Conclusion


As you can see, it doesn’t take much to put together a basic grid system. The math is probably the most complex part. Despite its simplicity, the grid continues to be a powerful


and flexible tool for layout scaffolding. With the various concepts I’ve discussed here, hopefully you have a better understanding of how grid systems work. This should help you evaluate different grid systems moving forward, and choose the right one for your next project, or even create your own.


VIA: SitePoint

sabato 14 marzo 2015

Your First Steps to a Profitable, Freelance Side Business

What difference would $500 a month make to you? How about $1,000 a month? Would you save for the vacation of a lifetime? Invest in a college fund for your children's education? Stop worrying about how you're going to pay the bills?

We'd all like a little extra money. And thanks to the Internet, earning on the side is easier than ever before. You can advertise your business for free using social media, and with many businesses you can serve clients anywhere in the world. All from the comfort of your home office.

So, what's holding you back?

Many would-be freelancers fall at the first hurdle: "What should I do to earn money?" They struggle to settle on a business idea.

There are several reasons this stage of setting up a freelance business proves to be a stumbling block.

Why It's So Easy to Get Stuck at the Idea Stage

Let's look at the reasons that coming up with ideas proves to be a black hole for many people who could be successful business owners.

  • Ideas are way too easy to find. Ideas are everywhere. Want proof of this? Just Google "ideas for freelance businesses". In just a few minutes, you'll have more ideas than you could ever execute in a lifetime. And that's the problem. Having too many ideas leads to analysis paralysis. You don't know where to start. So you don't get started at all.
  • You don't know whether your ideas are good. Starting an online business takes time and money. Is it really worth launching a website to promote your services when you don't even know if people will buy them?
  • You doubt your own abilities. You've got some design skills, and you think you're pretty good at what you do. But will clients think the same? No one likes to be judged negatively, so this fear makes a lot of sense.
  • You've been given bad advice to just 'follow your passion'. Living passionately is a wonderful way to be. It's also good to bring passion to your job. But not all interests and passions can be turned into a career; there's simply not a market for them. It's vital to find out what the market is willing to pay for. Then choose your own place in the marketplace based on your skills and interests.
  • Dreams are easy but action is difficult. The idea stage is a lot of fun. It's a playground of dreams. Of course, you should have as much fun as possible while coming up with ideas. The problem arises when you get stuck dreaming instead of taking action on your best idea. A similar problem is waiting for the "perfect" idea to come. No business idea is perfect. Whatever idea you settle on will have flaws. What matters is choosing the idea that's best for you.

Fortunately, there's a simple process you can follow that allows you to overcome these hurdles and settle on a business idea that you'll know has potential.

Ready to get started? Then let's begin...

Step 1: Find Your Freelancing Sweetspot

Your freelancing sweetspot lies at the intersection of three areas:

  • the skills you have
  • the things you enjoy doing
  • the services people are willing to pay for

Find the overlap between these three, and you've hit on the freelancing business that's right for you. In this step, we'll look for an overlap between the first two.

Begin by listing your skills. This means writing down everything you're good at, whether you enjoy it or not. At this stage, don't block yourself with the question "could I sell this skill?" Just write it down. We'll get to that in a later step.

Here are some ways you can uncover your skills:

  • Think back to high school and college. Did you always get good grades in tests? Write that down, it's one of your skills. Were you the person your friends turned to when they needed a shoulder to cry on? Add that to your list. Did you excel in sports or music? Again, note it down.
  • What skills do you practice in your spare time? Do you play the guitar? Are you a photographer? Do you spend a lot of time working in your garden? Do you come up with interesting activities to keep your kids entertained? Do you enjoy knitting? Do you keep up to date with the latest productivity blogs and software? Include all your hobbies, but also think about the life skills that you "practice" with your friends and family.
  • What skills do you use in your workplace? Are you good at interacting with customers? Do you stand out as the lead sales person on your team? Are you the one with a clean desk who is always on time to every meeting? Do you give presentations to big groups of people? Think about your past jobs too.
  • What training have you done? This can be as part of your work, your college degree, or in your own time. Are you a skilled programmer or web designer? Have you taken a part-time course in flower arranging? Do you spend a lot of time learning about how to improve your writing?
  • What do your friends say you're good at? If you're unsure, ask them. You may be surprised at what they say.

Spend at least 20 minutes working through these questions. Jot down every idea that comes to mind, no matter how small it seems to you. It's worth leaving the list for a day or two, then come back to it for another 20 minutes. In the time you spent away from the list, your subconscious will have been ticking over and coming up with new ideas.

The next part of this step is to consider the things you enjoy doing. Chances are, you've already listed many of the things you enjoy doing as skills. Even so, I'd recommend sitting down and listing everything you enjoy doing, as you may come up with new ideas that you missed when listing your skills. For example, you may enjoy cooking and inventing new dishes, but you forgot about this when you were coming up with your list of skills—even though it's also a skill.

When you've got both lists, look for the overlap between them. That means:

  • Go through you list of skills, and circle every skill that you enjoy practicing.
  • Go through your list of things you enjoy, and circle everything that's also a skill.
  • Make a new list of everything you've circled.

After compiling these lists, you'll likely feel really inspired and raring to go. That's a great feeling. Hold on to it, and allow it to push you through the rest of the process.

In the next step, we'll look at how you can find out whether there's a market for your skills.

Step 2: Discover What the Market Will Pay For

What's one of the biggest mistakes business owners make? Believing they have to be different from every other business out there. Your business doesn't have to be unique to be successful. Think of all the plumbers, taxi drivers, and doctors in the world. Many of them are self employed, running their own business. But they're in the same business as thousands—if not millions—of other people. How do so many people maintain a similar business? Because there's a big demand for the service they offer.

Note: Just because you're offering a similar service to other businesses doesn't mean you have to be the same as them. A simple way to stand out is to be better, or to service a particular type of client. We'll come to this in the next step.

Finding out the types of services there's a market for is a simple process. Go to the websites where freelancers promote their services, and see what's selling. Websites where you can do this include:

On these sites, you can check out the gigs that freelancers are offering, or that clients need help with.

On most of these sites, you can check out your potential competitors by looking at their profiles. Pay particular attention to the busy freelancers with lots of feedback and high feedback scores. That demonstrates they're working in a rich market with lots of work available.

Craigslist is a bit different. Unlike the other sites, it doesn't include user feedback. What it does offer, however, is an overview of the local services you could provide, such as teaching piano or tutoring math.

This research will give you a good overview of the biggest markets for freelancers.

Another way of checking the market is to reach out to freelancers and see how they make their money. A quick way to find freelancers is to check out co-working spaces in your city. You could turn up undercover, pay for a desk for the day, and see who you meet. Alternatively, let the manager of the co-working space know you're researching business ideas, and ask if it's okay for you to come in and talk to the people using their service.

You've now found the types of services the market will pay for. Look for the overlap between these, and your skills and interests, and you'll find which business ideas have the most potential.

Step 3: How to Make Your Business Stand Out from the Crowd

In your market research, you will likely have discovered that a lot of the gigs on the sites you looked at had low pay. Don't be disheartened! Entrepreneur Seth Godin explains why this is:

The market for freelancers who are average is horrible. I can [always] find an average freelancer cheaper than you.

In other words, the secret to making money as a freelancer is to be better than average. In this step, you make sure your freelance business stands out from the crowd.

Seth Godin again:

The market for exceptional freelancers has never been better. Because if you are the very best in the world at designing websites for chiropractors, the chiropractors are going to find you, because you're the best in the world at it. So if you're a freelancer, you'd better be extraordinary at your speciality.

To stand out from the crowd, you need a clear niche, and you must be the absolute best in your niche.

How do you choose a niche? Your skills and interests that you outlined earlier will help here. Let's say one of your interests is health foods, and you've identified a market for nutritionists who need websites.

How do you become the best in your niche? The good news is you don't need to have a better skillset compared to other freelancers. Instead, you need to be better at listening to what your clients need.

Continuing our example, let's say you've decided to set up a website design service for nutritionists. Now you need to reach out to nutritionists, and ask about the challenges they have with marketing their services online. You can do this by calling them. It's time consuming but will lead to excellent insights. Or ask them to complete an online survey.

Once you've listened and found out what your target market needs, do your utmost to deliver it. That's how you become exceptional.

Step 4: Validate Your Idea

You're nearly at a stage where you're ready to go live with your business. Before you do, there's one final step. This is where you find out whether your idea really has potential.

Don't launch a website yet or print off business cards. For now, your job is to find three clients who are willing to pay for your services. Just three. You can do this through:

  • Networking. In Step 3, you will have come across lots of potential clients during your research, and identified their needs. Why not put together a package that meets their needs, and see if it interests them? You can also ask your friends and family if they know anyone who'd be interested in your services.
  • Free advertising. Craigslist is great for this. List your service, and see if anyone expresses an interest.
  • Reaching out. Look up businesses who could use your services, and drop them a line.

Once you've found three paying clients, you know your business idea has potential. Now you're ready to run with it. Otherwise, test another idea.

This process takes time, but it's worth it. That's because when you hit on an idea that pulls in clients, you'll know it has the potential to become a successful business.

 

VIA: Tuts+ Business

venerdì 13 marzo 2015

Is your portfolio a little empty?

Do you remember in math class, when your teacher insisted that you "Show your work!!"?
These days our society is ALL about proof. And it makes sense. We want to make informed decisions.
The same is true in tech. Clients and employers don't want to take a gamble on a new employee or freelancer – they want proof that the techie they hire can get the job done.
But if you're new to code – and you need a job or freelance client, stat – all this focus on evidence might be a little disheartening. If you JUST started coding, what projects can you put in your portfolio?
I've been there, and I remember feeling less than impressive.

It felt like a catch-22. I couldn't get a client until I had beautiful, fancy projects to prove my worth, but I couldn't do any big, impressive projects until I landed a client. Agh!!!
But that trap was really just an illusion. Proof that you'll do a great job doesn't have to come in the form of 3-month-long, massive projects, and that's good news if you don't have a ton of projects to showcase (yet!).
Have you ever taken an online class, volunteered in the tech community, or customized a theme on a platform like Squarespace? Those are all totally relevant projects to feature in your tech portfolio.
On the blog, Randle Browning is sharing 14 Strategies for Building an Impressive Portfolio When You're New to Tech. Spoiler alert: you can probably check off half of these in an afternoon.
So what are you waiting for? Head on over and find out EXACTLY what you need to know to build an impressive portfolio, so you can stop worrying and start doing the work you're dreaming of.

VIA: Skillcrush

Categories: , , , ,

How to Build an Impressive Portfolio When You’re New to Tech

As I scrolled through portfolio after portfolio, looking for inspiration for my very first single-page personal site, I felt something drop to the pit of my stomach.

Sure, I could mock up my site, create a moodboard, site map, and user persona, and I could even get smooth scroll and learn to build a jQuery image slider. But I couldn’t make my single project multiply into 10.

As a brand new web designer eager to get work, I needed projects to put in my portfolio. That was a little tricky considering the only web design project I had ever worked on was…my portfolio.

Luckily, I ended up getting clients right away, through word of mouth, but I didn’t have to settle for leaving my portfolio site looking so slim. I just needed to broaden my definition of “portfolio.”

I was hanging onto an idea of the portfolio from those bygone days when you actually printed out work samples and tied them up in a leather case to carry around to potential employers.

These days, a portfolio isn’t just a collection of work samples. Instead, it’s an opportunity for you to showcase:

  • Who you are
  • What kind of work you do
  • How you do that work
  • Where you want to go next
  • And who YOU really want to work with.

A portfolio is really an opportunity to create a personal brand for yourself. When a future client lands on your portfolio, they don’t just see a slideshow of former projects – they form an opinion of YOU.

Sure, a beautiful, eye-catching, client-snagging portfolio will include work samples, but if you’re short on projects, there’s still a LOT you can do to create a dynamic portfolio that showcases your best qualities.

1. Customize a site theme or template.

Even if you know how to build websites from scratch, sometimes it makes more sense to use a robust platform or content management system (CMS) with complex tools built right in.

And in addition to an accelerated timeline for launching a site, you can include your customized site theme or template in your portfolio! Being able to say “I used my coding skills on this site” is a great selling tool when you’ve got a beautiful site to show for it.

Plus, customizing the code on a theme or template has some other great benefits for newbie coders or freelancers:

      • You can fill up your portfolio fast.

Building sites from scratch is a SUPER valuable skill, but if you just started learning to code, a brand new site could take a few weeks to finish. If you want to put more projects in your portfolio (and stat), customizing an existing site could be just the ticket.

      • You can get freelance work customizing websites

There are plenty of clients out there who aren’t interested in paying for a completely custom site. Either because they love the functionality of content management systems or because they don’t have a large budget, some people will want to hire you to take a standard theme and personalize it. And since it won’t take you weeks and weeks, you can turn these projects over quickly and fatten your portfolio in a hurry.

Skillcrush Web Design Blueprint alum Rashida Balogun did just that. Rashida launched a site using Squarespace, a website publishing platform with pre-designed templates for portfolios, blogs, and more, for her new branding business geared towards beauty entrepreneurs and businesses, I Heart Fame. When she paid a developer $30 to write a few lines of code to tweak her site, she decided she had to learn how to do this herself! After learning to code, she customized her site (take a look at it now! it’s beautiful!) and uses her portfolio to snag clients for her freelance branding business. Now she builds and customizes Squarespace sites for other entrepreneurs as part of her business, and her own site is some of the best advertisement out there.

i-heart-fame

2. Google Yourself.

Don’t look at me like that – I know you’ve typed your name into Google before, just to see.

If you haven’t done it yet, now’s the time.

When you’re just starting out in the tech scene, you might not have a ton of social proof – like blog features and testimonials – to show how awesome you are at coding. But you can broaden the scope of what you include in your portfolio.

Google yourself and see what comes up. Chances are, you’ve been and featured more than you realize. And you don’t just have to stick to what’s relevant to your new coding career. If you appeared online in a positive light, you can feature it in your portfolio, whether it’s related to tech or not.

google-randle

3. Get testimonials.

And while we’re on testimonials – do you ever wonder how people get such glowing reviews to feature on their portfolios?

I know, I know, they do awesome work! But I’m going to let you in on a secret: most freelancers request those glowing reviews.

So when you finish a product you’re proud of, ask the client (and anyone you collaborated with) to shoot you a testimonial. Just make sure you get permission to feature it on your site.

And you can get testimonials about other work you’ve done. If you’re changing careers, ask your former coworker to write a few sentences on what working with you was like. And don’t forget to return the favor!

Pro tip: For some people (especially people who don’t consider themselves writers) the thought of composing a testimonial might be daunting. If your former client, supervisor, or coworker balks at the idea of coming up with a testimonial, offer to draft one up for them for approval. It happens more often than you realize!

On her digital communications consultancy, Logic & Grace, Courtney features a beautiful slider of testimonials from current and former clients:

testimonials

4. Earn badges

If you think about it, what is the point of showcasing awesome projects in your portfolio? I think it’s two-fold. You want to prove to potential clients that you are competent and skilled, and you want to showcase your style.

But you don’t have to rely on former projects to prove that you can get the job done. Try earning skill badges through programs like Open Badges. You can rate your levels of mastery in different skillsets and feature badges on your own site.

open-badges

5. Showcase your education

For that matter, don’t be afraid to feature your education in your portfolio. Explaining what you learned in a training program like Skillcrush can go a long way. It shows what you learned and how dedicated you are to your new career.

And don’t shy away from featuring other courses you’ve taken online (even free ones!) or in-person workshops through meetups like Girl Develop It.

Maren Vernon lists all the Skillcrush courses she has taken, and the digital chops she learned in each one:

education

6. Include ALL your online projects

Since you’ve already mentioned your education, why not include the work you did learning your skills? And don’t limit yourself to just final projects for major courses. Include any exercises, “mini-projects”, or even steps of larger projects as separate pieces in your portfolio.

If you built an app using JavaScript and jQuery, go beyond just including an screenshot and link to the app itself. Put in screenshots of the mock-up you did when you were planning the app, how the app looked before you made it interactive, and even different shots showing off certain features of the app, like maybe the slick drop-down menus you created or the fun onboarding instructions screen.

Web designers can also put in color palettes, assets, or wireframes. And developers can particularly clever bits of coding. Anything that serves as proof of your skills and knowledge is more than worthy of a place in your portfolio.

Just take a look at Amanda Conrad’s gorgeous portfolio (she was one of our very early Skillcrush students!). She features process, not just final product. In a design for a gelato company, she created a user experience flow and featured it on her site:

amanda-conrad

7. Describe “what” and tell “how.”

Although a picture can be worth a thousand words, now’s not the time to stop at a screenshot! Telling more about the work you include in your portfolio can be what makes the difference between you landing your dream job or not.

First, tell what each item in your portfolio is. This is especially important for potential employers who get links to dozens, if not hundreds, of portfolios every day. If they can immediately see what a screenshot or graphic is they might be intrigued enough to click through to read more about it.

Just be sure to have more for them to read! Tell how you created your work. Describe the specs or goals for the projects, how you came up with the solution, the tools or methods you used, the obstacles you overcame, the lessons you learned, the skills you gained, the benefits of the end result, etc. This helps companies and clients both understand what you can offer them and what they can expect working with you – which is invaluable when you don’t have much experience under your belt but are dying to be chosen as their next designer or developer.

Skillcrush Web Design Blueprint alum Stacey Baldini does a great job of describing the stages she moves through while working on a project:

process

8. Expand your definition of “portfolio.”

There’s no need to limit yourself to just featuring your web design or web development work in your online portfolio. Anything that you can use to prove you have valuable skills is fair game — and finding a way to show it off can be yet more proof of your passions, experience, and skills.

So, if you’re an amazing painter or a fantastic writer, you should have some photos of your paintings or samples of your writing in your portfolio. Any work you do speaks to the aesthetics, work ethic, and enthusiasm that you’ll bring to your work in tech.

And you who knows if a client might also want to buy one of your watercolors or a company might also be looking for a content contributor for their blog. One portfolio, two sources of income – Double the funds!

Web designer (and alum of the Skillcrush Freelance WordPress Developer Blueprint) Emily Wiegand doesn’t just feature her tech projects on her portfolio – she also shares her architectural projects, like the bookshelf desk she designed (and built!) and a bridge she designed for a competition in Amsterdam.

emily-wiegand

9. Feature community involvement.

Another non-digital aspect to point out in your portfolio is your participation in any groups or organizations. If you attend tech meet-ups or are part of professional organizations, it’s pretty much a no-brainer to list them. But don’t leave out your other activities just because they’re not “techy”.

There might be a techy aspect of the group or your role in it – like you create HTML newsletters for your local entrepreneurs’ club or you maintain the WordPress site for an annual music festival in the area. Those are both terrific examples of you using your skills “in real life” as well as working in a team and on projects – which can add up to real experience in the eyes of people looking to hire you.

Check out the way Skillcrush alum Paola Maldonado (who just landed a job as a Mobile Developer at Buzzfeed! Go Paola!) features her role in co-founding NYC Tech Latinas, front and center:

paola-maldonado

10. Be a pirate.

And not just so you can say “Yarr”! (Although that’s really fun, isn’t it? Go ahead. Say it one more time. Yarr!) Being a pirate here means looking around at the work other people are doing and using it as inspiration for your own portfolio.

Of course that NEVER means copying. But it does mean taking an idea that you love and turning it into your own. You could take a cool logo re-do that you saw on Dribbble and re-do it yet again in your own style. Or you could use a beautiful font combination as a jumping off point to find a similarly stunning pair for your own site.

A little pirating is also involved when it comes to the “classics” of portfolios. But just because EVERY developer makes a fizzbuzz game or every designer does a wireframe of their personal site doesn’t mean you shouldn’t do it too. There’s a reason they’re classics – they are timeless ways to highlight what you can do. So, do it!

Jen Best includes Skillcrush Web Developer Blueprint challenges and exercises, like her First Rails App and a Weather App to demonstrate that she understands the ins and outs of web development:

jen-best

11. Redesign an existing site or app

Taking the pirate fun in step 10 to the next level could be a total makeover of a well-known site or app. You know that there’s more than a few famous ones out there that you’d just love to get your hands on. Well, now’s your chance. Give it a fresh look or new code from top to bottom – and remember to describe, describe, describe like in step 7.

You can tackle one of the big players like Facebook or Twitter – or what if you reimagined the landing page of Google? Their iconic homepage is simple enough to take on as a starter project yet full of lots of juicy challenges (which is why we include it as one of the student projects in Skillcrush 101). Or, choose one of your favorites – or how about least favorites. (Craigslist – Love the info. The design? Not so much…)

And you never know where this could take you. It’s not unheard of for a company to see a redesign done for a portfolio and decide to give the creator a job working for the company itself. In fact, that’s just what happened to UX Designer Ximena Vengoechea. Check out some of her redesigns for Quibb and Sharitive, plus a combination weather and alarm app for iOS.

ximena

12. Tell your story.

If you can’t show someone your latest work (yet!), you can help them get to know you by explaining who you are and where you’re coming from.

Try building an infographic that maps out how you got here. This tip might seem like it’s just for graphic designers, but it’s perfect for developers too. (Hint: how about making an infographic app? Now you’re making some portfolio magic!)

Or find a quirky way to describe your personality and work history, like Skillcrush’s very own Aisha Souto-Maior.

aisha

13. Demonstrate what you do – don’t just say it.

Sometimes this idea gets lost in the excitement and occasional stress of portfolio building. It’s not 1987 and you’re not using a TRS-80 and a dot matrix to print your resume. The sky’s the pretty much the limit now that your “resume” (i.e. portfolio) is online.

You’ll still want to have some text and descriptions (see step 7) but the whole point of your portfolio is to show you can do the work. And your portfolio is where you’ll be showing it.

A perfect example of this is copywriter Laura Belgray’s site, Talking Shrimp. Laura says that she writes text “that sounds like you talk and makes people want what you sell,” so she better darn well have text on her own site that sounds like she talks and makes people want what she sells – and she definitely does!

laura-belgray

So, as a web designer or a web developer, you’ll want to use the cleanest and most organized code to create your portfolio and the most refined design and UI you can whip up. Don’t stress yourself out about it, but do your very best. Your portfolio might be the only thing an employer looks at when making a decision about you so make sure it’s a clear and genuine demonstration of all the amazing things you can do.

Check out how Jamie Raymond demonstrates her killer front-end web development skills on her own site:

jamie-raymond

14. Create resources for others.

If you’re new to the game and short on projects, build up your name by sharing with others. Try creating a resource list (like Ximena’s product designer toolkit!), going public with your coding journey like Laurence Bradford does on her site Learn to Code with Me, or teaching an online class or webinar, like our very own class manager, Caroline Syrup.

caroline-syrup

Still overwhelmed? Don’t be. The most important thing you can do is share what you’re proud of and do your best to showcase (and explain) everything that makes you you, AND makes you hireable.

 

VIA: Skillcrush

Categories: , , , ,

Copyright © Niente Canzoni d'Amore | Powered by Blogger

Design by Anders Noren | Blogger Theme by NewBloggerThemes.com | BTheme.net        Up ↑