how-i-started-a-$80k/month-business-connecting-freelancers-with-companies

Hello! Who are you and what business did you start?

Hi, I am Suvansh Bansal and I am a co-founder of Flexiple. We started Flexiple in Nov’15 to build a freelancing platform that enables “quality interactions” between companies and freelancers. The goal has since then been to ensure a successful engagement such that both the client and the freelancer are happy and satisfied at the end of the engagement.

Over the years, the freelancing market had evolved such that platforms focus more on reviews and ratings as the metric to measure quality. These metrics work well when the service provided by a worker is commoditized, replicable but not when the service depends hugely upon the type of skill and expertise of the freelancer. This realization led us to start Flexiple as we only decided to have the “best” freelance developers and designers as a part of our community.

We figured that while such platforms did exist outside India, a lot of them were pretenders as building such a platform requires a very patient state of mind during execution, something that ventures capital-funded businesses finds difficult to cultivate. Thus, post our graduation we made the call to not look out for external investment till the time it is absolutely needed. The inherent positive unit economics of the business obviously helped us make this decision.

how-i-started-a-80k-month-connecting-freelance-developers-and-designers-with-companiesFlexiple’s marketing website

Flexiple’s offering is great for tech entrepreneurs, product leaders, engineering heads at scaling startups who cannot spend some weeks waiting for the right freelancer to apply on their job post as with us all they have to do is answer 5 questions. And we will have them speaking with the right freelance talent within 7 days.

Since operationalizing ~3 years ago, we have helped 85 startups identify, hire, and work with the right freelancer for over 200 engagements. All this has been made possible with the help of our 225-member strong community of self-employed developers and designers.

What’s your backstory and how did you come up with the idea?

Flexiple is my first foray into entrepreneurship. Though, being a third-generation entrepreneur, I reckon I always had the zeal to build something of own. However, at the beginning of my career, I took the traditional route and worked at 2 MNCs for ~3 years.

My zeal to learn faster, however, led me to join IIM Ahmedabad – India’s top-ranked B school in June’15 and that is where I met my partners and Flexiple’s co-founders – Karthik and Hrishikesh. During my time at IIM A too, surprisingly, I was dissatisfied with the learning opportunities available as textbooks and in-class discussions were the only media available.

Whereas what I wanted was to get my hands dirty and implement the theory we were learning in class. After a couple of false starts, I decided to join the two of them. They had already been working on defining Flexiple’s vision for almost a year by Aug’16 while juggling course-work during our first year of MBA.

how-i-started-a-80k-month-connecting-freelance-developers-and-designers-with-companiesMe (leftmost) with my partners – Karthik (middle), Hrishikesh (rightmost)

Rather than join them full-time, I started out as just a helping hand. At that time, Flexiple’s focus was on 3 categories – software development, digital product design, and content writing. And we picked a category each and started working on our plan to have a 30-member strong talent pool in each by the time we graduate. Though the chemistry the three of us had in the first 3 months was great and we ultimately decided that I should join as a co-founder rather than continue working as a helping hand.

A sustainable business can only be built with a combination of luck, timing, and hard work.

In parallel, we also began working on building a 2-sided platform where companies could post projects, review recommended freelancers, and manage them and freelancers can apply to those projects post-completion of the onboarding process, interact, and get paid. Building this platform proved to be the costliest mistake we have made to date.

Take us through the process of designing, prototyping, and manufacturing your first product.

The 8-month period from August’16 to March’17 was very important as we were laying the ground for launching the platform. The three of us researched, spoke with multiple stakeholders, to build a testing mechanism for all three categories. This process fed the product development cycle which was led by Hrishikesh, a freelance designer, and 2 freelance engineers.

how-i-started-a-80k-month-connecting-freelance-developers-and-designers-with-companies

Flexiple’s first version had an automated testing platform

Eventually, it turned out that building the platform and the assessment engine was the easy part. The more difficult part was to get freelancers to use it to go through assessments. One of the biggest blockers we faced was a lack of projects at hand as not many freelancers wanted to trust another platform for we might turn out to “pretenders” like others.

As it transpired, neither the freelancers not companies wanted to use the platform we had built-in 8 months and spent $8,000 on. However, it became clear to us that the quality problem rampant in the freelancing industry is not a tech problem but rather an execution and process problem, and that is where our approach of hitting the market with a fully developed solution failed. We changed course accordingly in June’17 and stopped using the platform for good.

how-i-started-a-80k-month-connecting-freelance-developers-and-designers-with-companiesA screen we spent 3 weeks developing and the users <10 hours using

Describe the process of launching the business.

With a failed product launch behind us and having learned a few harsh lessons along the way, we shifted our focus to having a few successful engagements executed with the model we had in mind. We found the first set of clients from our own personal networks and by reaching out to clients trying out other “pretender” platforms. From this set, we realized that most of the market looking for quality is also looking for reliability and thus, only full-time or self-employed freelancers would be right for them.

I am a firm believer that remote is the future of work and no-code is the future of startups.

Not only did our decision to onboard only independent professionals help us differentiate ourselves in a crowded market, but we were also able to narrow down the kind of clients we were on the lookout for. We also found that most of the self-employed professionals viewed platforms such as LinkedIn or AngelList as a consistent source of projects but lose out on the good ones in the sea of proposals they receive. Thus, we focused mainly on these 2 platforms as a supply source.

And the biggest problem we have solved for the freelancers since then is of reducing the amount of time they spend talking to prospective clients. We also tweaked our onboarding process such that we require a minimum amount of investment from freelancers till the time we get a project relevant to them and only then do we finalize the onboarding. This model of onboarding freelancers has been working well for us and helped us attain high satisfaction ratings from our community members to the extent that referrals and inbounds have become two of our biggest sources.

Keeping both the clients and freelancers had been a key metric for us since the first project we worked on as our revenue model is aligned to the engagement success and it helps us increase the lifetime value of both sets. Since June’17, we have executed ~200 such engagements have achieved a satisfaction rating of 8 for more than 93% of them. This has helped us maintain long-term relationships with our clients and build partnerships with our community.

Since launch, what has worked to attract and retain customers?

Once we had exhausted our personal network, we focused on cold email outreach as ours is a niche B2B business with a big-ticket size ($2,500 ). We structured the process such that we focused primarily on leads who matched our ideal customer profile, personalized our messaging in the first email and subsequent emails to appeal to them, and regularly got new leads using platforms such as LinkedIn.

However, due to the inherent limitations attached to cold outreach processes, we started focusing on inbounds too in July 2018. We started our inbound lead generation process by using content marketing and over a period of 3 months figured that the biggest common motivator for both clients and freelancers was their inclination towards working remotely. And our conversations with this audience-led us to believe that selecting the right tool for their use-case from the plethora available in the market was their biggest challenge.

Given we had been managing a remote team for over 12 months by Sep’18, we had a list of tools split across 20 categories that the team had been using. We built a basic WordPress website and shared a curated repository of 100 remote tools across 24 categories and launched on Product Hunt and were voted as the #2 Product of the Day. The success of Remote Tools is evident from the 4 clients we converted with its launch attaining an ROI of 1000%.

how-i-started-a-80k-month-connecting-freelance-developers-and-designers-with-companies

Apart from launching such products on Product Hunt, we have focused a lot on SEO and content marketing. In 2019, we worked on ensuring that Flexiple ranks high on relevant keywords and our brand is present on platforms where startups usually search for freelancers. For the past 12 months, the revenue-split has been 50:50 from our sales and marketing efforts.

Retaining customers to have mostly been around easing the process and as most of the startups we work with a lookout for a full-time freelancer for a period of 6 months, it becomes very important for us to ensure that the engagement starts on a good note. Thus, over the course of the engagement, a Customer Success Manager from the team is consistently in touch with both the client POC and the freelancer to ensure that their goals (aligned on before kick-off) are being met. This high touch-point customer support has been an important factor in making clients stick with us as it helps bridge the trust gap that usually exists at the start of the engagement.

Apart from that, we also use a host of third-party automation tools to ease the engagement process. We also have a few internal tools to improve customer experience. One such tool is the Resume App where we showcase the capabilities of each of our community members to prospective clients in a concise yet exhaustive manner. Goes without saying that all our tools are built with the help of our community of full-time freelancers.

how-i-started-a-80k-month-connecting-freelance-developers-and-designers-with-companiesSnapshot of a freelancer’s resume

How are you doing today and what does the future look like?

Today, we are a customer-funded profitable business and have been generating $60k in gross monthly revenues on an average over the last 6-months. The focus in 2019 had been on building a team, along with sales and marketing processes that would help us sustain the business and reattain the quarter on quarter growth rate (40%) we had consistently achieved in the first 2 years.

Starting with a 4-member team at the start of the year, we now have a well-knit 9 member team and are set to grow into a 13-member team in the next couple of months. This should give us enough fire-power to reach our goal of being able to predict our revenues for the subsequent quarter by the end of 2020. We intend to do this by deepening our expertise in cold outreach, paid marketing (Google Ads), and supplement those efforts with content marketing.

Having helped 80 startups identify, hire, and work with quality tech talent we have realized that startups usually continue with a full-time hiring outlook while hiring remote talent. What they miss is that the motivations of a remote contractor are completely different from that of a full-time hire. Apart from sharing this expertise we have developed around tech hiring, we also share our community’s tech expertise on our blogging platform.

Apart from the core offering of Flexiple, 2020 is also a big year for remote tools as we widen our focus and build it into a fully free content hub for remote makers and workers. These are the 2 areas that we are focusing on at the moment. Long term, our goal is to be a one-stop solution for teams looking to hire and work with all kinds of remote talent.

Through starting the business, have you learned anything particularly helpful or advantageous?

I am a firm believer that remote is the future of work and no-code is the future of startups.

Quality talent is not short of options today and long-gone are the days when compromising on personal life by moving cities, traveling a couple of hours for work was the norm. Both startups and enterprises value a productive employee over an in-front of your employee. It is this evolution that has become the backbone of Flexiple and Remote Tools. And you also see multiple such products catering to the remote working audience being launched almost on a daily basis.

On the other hand, no-code tool makers have taken confidence from the success of low-code tools such as WordPress. The ecosystem has become so powerful that a startup as successful and impactful as Lambda School runs only on no-code tools. Even we use mostly use such no-code tools as much as possible and only write custom code when absolutely necessary.

What platform/tools do you use for your business?

We use a lot of tools to run our business. A few of them are no-code tools that have been highly valuable to build MVPs and automate manual processes –

What have been the most influential books, podcasts, or other resources?

I have found myself going back to Ben Horowitz’s “The hard thing about hard things” for inspiration again and again since I first read it in 2018. It is one of the very few books that have actionable advice coming from a man who has built sustainable businesses from the ground up.

On Twitter, I really like interesting tidbits shared by Paul Graham, as well as his blogs. While they are not highly actionable, they do make me think about the problems faced by me as an entrepreneur deeper.

I also like listening to the Indiehackers podcast and have found stories of other self-funded startups inspiring and helpful to explore different strategies. Apart from this, I am always on the lookout for highly actionable advice on sales and marketing which Saleshacker, Gong, consistently provide me with.

Advice for other entrepreneurs who want to get started or are just starting out?

The two biggest pieces of advice I would give to any entrepreneur is to value their own time and to build a business for the long-term.

Time is the most valuable asset an entrepreneur has. I have seen many founders getting stuck with the most operational of tasks as they give you the satisfaction of getting things done. While it might seem rude or unprofessional to not reply to every email you receive, it is important to delegate effectively, especially as your company grows.

Thus, forward emails to your team, use your phone as minimally as you can, mute notifications on Slack, or Discord. And focus on moving your company forward and spend time on the strategy of the company, hiring and training new hires, upskilling your colleagues, and implementing new initiatives.

In the same vein, entrepreneurs sometimes focus more on short-term gains and not on potential long-term ones. A sustainable business can only be built with a combination of luck, timing, and hard work. It is the luck and timing aspect that you need to keep an eye out on. Thus, be open-minded in your conversations and always look at a conversation keeping in mind a 1-year horizon.

Are you looking to hire for certain positions right now?

We are always hiring and are currently looking for a couple of quick learners to join the team to lead new initiatives at Flexiple. We are also looking for a talented content writer to help us grow our blog (around freelancing, remote work, tech hiring) and also to write copies to promote them on social media platforms.

While we are looking for full-time hires, we are fine with exploring the chance to work with freelance/ part-time writers who have past experience working in an environment with a minimum direction and are problem-solvers at heart.

Finally, we are looking for folks based in the US, UK, Germany who know or want to learn B2B sales to work with us on a commission basis.

If you are interested or know anyone who might be interested, am waiting to hear from you over email.

Where can we go to learn more?

Feel free to reach out to me on any of the above forums to discuss tech hiring, building a self-funded business, and B2B sales.

If you have any questions or comments, drop a comment below!

Want to start your own business?

Hey! 👋I’m Pat Walls, the founder of Starter Story.

We interview successful business owners and share the stories behind their business. By sharing these stories, we want to help others get started.

Interested in sharing your own story?
Find out how!

PROMOTED

Are you ready to boost your revenue?

Using
Klaviyo
will open up a massive, untapped sales channel and bring you closer to your customers!

We’ve interviewed many impressive businesses who swear by the results of the product, including Brumate, Beardbrand, and many more.

Level up your email marketing with Klaviyo!


Join 10,352 founders getting exclusive case studies every Tuesday and Friday.

how-to-get-started-in-product-illustration

What is product illustration and how is it best used? Today, Product designer and illustrator Frances To breaks down the use of illustration in product design and offers some practical tips for creatives looking to expand their skills into this niche art form.

You’ve seen these illustrations in your favorite digital products—floating bright-colored people greet you as you browse through the web pages of Slack. Whimsical characters rendered in fluid brushstrokes grace the landing pages of MailChimp. Vectorized cars appear on the screen as you book a ride through Uber.

What exactly are these digital illustrations and why are tech companies suddenly embracing this art form? Enter product illustration.

  1. Mobile Dialog

  2. Shop Small

  3. Slack.com redesign — Illustrations 02

Row 1:
Tanner Christensen for Atlassian,
Joe Montefusco for Mailchimp,
Alice Lee.

What is product illustration and what is it for?

In product design, product illustrations are used to add a human element to your user experience, and to communicate complex ideas in a simplified, attractive way.

A good example of how product illustrations are used in digital products is Alice Lee’s illustration work for Wealthfront, an investment service firm. Financial products are generally perceived as serious and harder to understand. Alice’s illustrations, however, changed that perception by bringing approachability and warmth to finance.

To do that, Alice used metaphors to represent financial concepts. For example, plants represent money while groups of plants represent an increase in the customers’ investment. While plants can be watered and grown, similarly, investments can be grown and managed as well.

How is product illustration different from editorial illustration?

You might be wondering—aren’t product illustrations the same type of illustrations found in magazines and newspapers such as TIME Magazine or The New York Times? Not quite.

Product illustration differs from editorial illustration in terms of intent. Product illustration aims to bring delight to the users’ experience. It is also used to explain the benefits of a product and eventually, persuade people to love the product. Editorial illustration, on the other hand, captures readers’ interest and engages readers in the content. Editorial illustration also breathes life into the stories people are reading.

When to use product illustration

As a rule of thumb, product illustration shouldn’t be used for the sake of ornamentation alone. Otherwise, users will only end up distracted, confused, and maybe even frustrated. Instead, product illustrations need to have a clear intent as to why they’re being used.

Some of the best use cases for product illustration are:

  • When the accompanying text is harder to read and understand
  • When users need to know what to do next
  • When onboarding users
  • When a user has reached a goal and you want to congratulate them
  • When a user is confused or frustrated

Tips for getting started in product illustration

1. Keep styles consistent

The smallest details — colors, line treatment, perspective, and the like — all matter here and can either make or break your illustration. For example, if you made several illustrations with rounded edges and oversized proportions and you decided to have one illustration with sharp edges and slender figures, your work ends up looking inconsistent.

Why is this a problem? One reason is that inconsistency erodes trust. Another reason is that an illustration is reflective of the product and the brand identity it’s tied to. If an illustration lacks in quality and consistency, it also speaks the same for the product.

2. Keep details minimal when illustrating for smaller screens

While detailed illustrations make a concept more convincing, they can also visually backfire when scaled down to smaller sizes. Illustrations that look great when viewed through a browser may look cluttered when viewed on a mobile phone.

When illustrating for small screen sizes, it’s best to keep details minimal You can do this by taking out details that don’t add much context to the illustration. For example, if you illustrated a cookie with twelve chocolate chips on it, you can reduce the chocolate chips to five when scaled down. After all, you’d still know it’s a cookie even if seven chocolate chips were taken out.

3. Use metaphors to communicate abstract ideas

People use products because of the things they can achieve through them. For instance, people use Shopify because they want to start and grow their online business. People use Asana because they want to be more productive with their work. People use Google Drive because they want to access their files anytime and anywhere.

These ideas tend to be abstract in nature and are harder to convey through illustration. Using metaphors solves this problem because they relate an intangible concept, like being productive, to something tangible, such as having several items ticked off a to-do list.

One of the most effective ways of coming up with metaphors is to relate the abstract to the concrete. Say you’re asked to illustrate the idea of designing your own website from scratch. You can come up with metaphors by completing this sentence: “Customizing my own website is like _____.” One answer to this is the idea of “painting” the screen of a desktop with real paint and paintbrushes. Paint buckets of varying colors can also be drawn to further highlight the concept of customization.

Conclusion

Product illustration is a powerful way to highlight the benefits of a digital product and convince others to use that product. While product illustration shouldn’t be the go-to solution to improve a product, when used appropriately, it can attract users and make a product stand out from the competition.

3a14d7471dd009262e1777476ce708f1

About the author: Frances To is a Product Designer at First Circle by day and a freelance illustrator by night. With a love for technology, lifestyle, and travel, she aims to humanize digital products and inspire people to travel more often. Find her on Instagram or follow her on Medium to stay updated on her articles.

Find more product illustration inspiration by searching the #productillustration tag on Dribbble.


Find more Process stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

get-started-with-sound-design-in-just-3-steps

Understanding how audio serves to further amplify your motion design

I am a motion designer, not a sound engineer so why do I need to understand sound design?

This is a fair point.

Having at least a surface-level knowledge of sound design will help you

  • Gain a deeper appreciation for sound design
  • Have a better idea how long to allocate for sound design in a motion design project
  • Collaborate more effectively with sound designers and engineers
  • Have fun experimenting with adding sound to your motion designs

The latter the main reason why I am exploring this area.

I have never thought of myself as an audio expert yet have always been drawn to the power of aural stimuli and how it can enhance the visual.

Here are three steps to get started.


When starting something new I like to remind myself of a quote by Arthur Ashe

Start where you are. Use what you have. Do what you can.

There will always be an obstacles in your way when trying to do something.

Yet there will also be a path around the obstacle.

You can choose to focus on the obstacle or focus your energy on find the path.

The choice is yours.


Ok, there are four basic items we need to get started.

(i) Laptop

First up is, of course, a laptop.

It doesn’t need to be a laptop specifically but can be a desktop or some kind of workstation where you can access audio files and your motion design files.


(ii) Sound card

Ok, I will admit that when I first heard this one that I had no clue what it was.

So I had t consult Mr. Google for further clarification.

Without getting too technical, a sound card is an expansion card or IC for producing sound on a computer so that the audio can be heard through speakers or headphones.

Most often they are included on every machine in one form or the other, either in an expansion slot or built into the motherboard.

If you can hear sound through your headphones or speakers when they are connected to your computer then you don’t need to worry.

You have everything you need to begin.


(iii) Headphones

When it comes to headphones you can go high end and splurge for a pair of Beats by Dr. Dre or go budget and use the same earphones you use with your phone.

As long as you can hear the audio clearly enough to mix and balance the sound you are good to go.


(iii) Recorder

Similar to headphones, you can go high end and acquire an Akai Professional MPC X, or you can take Arthur Ashe’s advice and simply

Use what you have.

Generally, most smartphones have a recording function or there are free apps you can download and use such as the following

And also ones you can buy such as

Please note that I am in no way affiliated with any of the above links. I am just sharing the knowledge and mainly use my phone to record audio from my surroundings.

Having a recorder in your pocket can make life more interesting.

As a creative, you may be used to capturing the world around you through sketches or photography.

Capturing the sounds that surround us each day, creates an additional dimension to add a richness to the everyday. Yet documenting the sounds that fill our world can add another dimension to your daily life and make it an interesting adventure.


In my previous article about the five basic elements of sound design, I recommended Adobe Audition CC as a starting point. Most motion designers will probably use Adobe After Effects and therefore also have a Creative Cloud subscription.

This is a good place to start especially if you have a small scale project or are just beginning to dabble in sound design.

However, if you are a bit more advanced and will be working on largescale projects or ina studio setting something like Cubase may be more suitable.

Again it depends on your budget, what kind of project you are working on and what kind of investment you wish to make into sound design. But Cubase can be used as a free trial but as with most software does have potential restrictions compared with the full version.


There are many sound libraries to choose from such as

These are just a few, but there are many others.

The right choice for you depends on what kind of set up you have — Mac or PC or what kind of sound you are trying to create.

Alternatively, you could acquire a synthesizer and just go nuts, like this guy.

Awesome synthesizer GIF courtesy of GIPHY

Ok, I am going to out it out in the universe.

I have always had a not so secret obsession with synths.

If anyone can recommend a good go-to place to source one I shall make it my mission to create one of kind music to a piece of motion design.


As always thank you for taking the time to read.

getting-started-with-google-tag-manager

Ever put in a development ticket for what you thought would be a simple tracking code update? And then waited weeks for the task to be completed?

Google Tag Manager (GTM) saves marketers and developers alike by allowing you to set up tracking codes for analytics and ad platforms through one simple interface. In this article, I’ll walk through setting up a GTM account, creating your first tags and triggers, and using the platform to streamline your tracking setup process.

Understanding Google Tag Manager hierarchy

The account is the top level of GTM hierarchy. If you’re managing GTM from an agency login, you’d generally want to create one account per each brand you work with, and a container for each website that brand uses. You can access multiple accounts via the same Google login.

A container includes a unique GTM code, which you should add across the site you want to track.

Within each container, you’ll then set up tags that fire tracking codes on your site. Triggers define when tags will fire. Variables are functions you can use on a more granular level indicate when tags will fire.

Setting up your account

To start setting up your account, go here and click “Start for Free.”

Google Tag Manager for WordPress plugin.

Setting up tags

GTM includes several built-in tag templates for major analytics and ad platforms. These include Google products, such as Analytics, Ads, Optimize, and Surveys, as well as several third-party platforms, such as AdRoll, Microsoft Advertising, LinkedIn and Quora. If a tracking tag doesn’t have an existing template, you can also use a Custom HTML or Custom Image tag.

To create your first tag, click “Add a new tag” from the Overview screen. 

Install the Chrome extension and navigate to the site. Click the Tag Assistant icon, and select “Enable” for your site.

You should now be able to see what tags are firing on your site, as well as if there are any errors. Click on an individual tag to see more details about errors and any recommendations to fix your implementation.

Start streamlining your tracking

Once you’ve set up your GTM account, take the time to play with setting up tags. A global Google Analytics tag, a Google Ads remarketing tag and a Google Ads conversion tag are good ones to start.

Once all your ad platforms’ tags are represented, you can now make simple adjustments if changes are made to the site (for instance, if Thank You page URLs change) directly through GTM versus having to change hard-coded tags on the site.

When you’re ready to move beyond the basics, you can learn about additional actions you can track. On Nov. 13 at SMX East, I’ll be talking about how to amp up your user engagement with Google Tag Manager, through tracking actions like scroll activity, video views and PDF downloads.


Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.



About The Author

get-started-with-material-design-for-bootstrap

Andrian Valeanu is a web designer and project creator at Designmodo.

10 Useful Steps to Get Started with Material Design for Bootstrap

Material Design for Bootstrap (MDB) is an overlay built for Bootstrap that provides results that are consistent with the standards set by Google’s Material Design. It’s also known as Material Design Bootstrap and can be described as a theme that provides access to Google’s Material Design so as to achieve consistent results.


MDB uses HTML, JavaScript, and CSS to provide developers and designers with unique design patterns, Bootstrap templates, and a grid system they can use. With so many free and paid features, MDB is one of the most popular options for web development and design.

Below is a step-by-step guide that will get you started with Material Design for Bootstrap.

  1. Download the zipped folder


    The first step is to visit the official Material Design for Bootstrap website and download the overlay. There are two versions of MDB available: the free and the pro version. Pick your preferred choice and click the “Direct Download” link to get the zipped folder. Unzip the folder and save it to your preferred location. The folder now contains essential documents, files, and libraries. We will go through each of these in the next steps.

  2. CSS


    The CSS document determines the lookup and style of what developers and web designers choose to build. Files contained in this document include bootstrap.css which contains predefined Bootstrap classes, bootstrap.min.css – a smaller version of bootstrap.css, mdb.css which contains design patterns and predefined classes of MDB, mdb.min.css – the minified version of mdb.css, and style.css which helps with customized styling code as per the project.

  3. js


    The js document contains JavaScript files that help with achieving functionality for various components. You can use it to cut your code short. Files within the js document include bootstrap.js which introduces bootstrap related js into your project, bootstrap.mi.js which is the minified bootstrap.js version, jquery-2.3.3.js which introduces the jquery code that’s compatible to your code, its minified version jquery-2.3.3.min.js, mdb.js which combines all the jquery code and javascript you’ll need, its minified version mdb.min.js, tether.js which allows you to position elements next to each other on a page, and its minified version tether.min.js.

  4. font


    As the name suggests, the font document contains all the fonts that web designers and developers need for their projects. A default font called Roboto is provided with your download. Other basic formats included within the file are .ttf(True Type Font) which is developed by Microsoft and Apple, .otf(Open Type Font) which was built jointly by Microsoft and Adobe, .woff(Web Open Font Format) which resulted from a collaboration by Microsoft, Opera Software, and Mozilla Foundation, .woff2 – a second version of .woff, and .eot(Embedded Open Type) which was built by Microsoft for the web.

  5. img


    The img folder provides a place where developers and web designers can keep the images that they need for their project. They are kept in a well-arranged manner for easy location. The path to this folder that you see in your index file shows the images that you want to appear on the pages you’ve built. The img file is the default folder but, can be changed according to the type of project.

  6. sass


    The sass file contains maintainable and modular versions of CSS that are adaptive and can be shared easily. It improves output by enhancing productivity. Components can be shared in all environments. Web developers can opt for sass if they wish to add more style to their work and carry it out in an advanced manner.

  7. License.pdf


    The License.pdf file contains all the details pertaining to licensing of Material Design for Bootstrap and its usage. The information contained within the document shows all features that users get under the free and pro versions of MDB. The free MDB version comes with 500 basic components; detailed documentation; SASS, CSS, JS, and HTML files; tutorials, 8 basic modules, enhanced Bootstrap modals, and BrandFlow-Bootstrap automation software. The Pro version includes all these plus 5,000 pro components, 9 pro plugins, 50 premium sections, 22 pro modules, JavaScript modularity, 10 pro page templates, professional premium support, and MDB Pro repository as well as GitLab account access.

  8. README.txt


    The README.txt file contains all the important links that may be helpful to developers and web designers. They cover support, templates, FAQs, tutorials, and many more links that may be of importance. Users get access to information that can help them learn, practice, ask questions, and access relevant material from the MDB community.

  9. Start working using MDB


    Once you familiarize yourself with all the folders and files, it’s time to use them in your project. You can start by making a new folder on your workstation. Give it a name like DemoMDB. Cut all the files from the original MDB folder and paste them inside the new folder. The index.html file provides a demo page that you can start with. The most important thing is to maintain the order in which the files are provided. A file that is placed higher means that it has components needed by the files below it. If this order is changed, the console in use may show errors and warnings that might block major functionalities.

  10. Stay updated


    Material Design for Bootstrap comes with a host of features that make it easy for developers to build interactive web pages. To learn more, consider visiting the official MDB website for examples and tutorials. Subscribe to the MDB newsletter to stay updated with the latest updates and news. You can also create a free account that will give you access to technical support, CLI, free project hosting, and prototyping tools.

Material Design for Bootstrap is used by some of the largest organizations and companies to develop and design the best outlays for front-end frameworks. The information provided above is only but a drop in the ocean when it comes to what MDB contains. Developers who are passionate about design are encouraged to explore more as they work on their projects.

Enjoy this post? Give Andrian a like if it’s helpful.

Share

Andrian Valeanu is a web designer and project creator at Designmodo.

Andrian Valeanu is an enthusiast web designer and project creator at Designmodo, who literally live for creating the best tools for web designers and developers. He is focused on websites building systems, bootstrap templates, an…

Discover and read more posts from Andrian

Enjoy this post?

Leave a like and comment for Andrian