DEV Community: Michael Myers

How to add Header and Footer in Nuxt 3

Michael Myers — Fri, 05 Jan 2024 13:04:27 +0000

Headers and footers are like the bookends of a webpage — they frame everything nicely and keep it all together. In Nuxt 3, these header and footer parts can be made easily using its special way of building things called “components.”

Also, we will fix a bug when you may see that after navigating between pages the footer is “jumping”.

Understanding Nuxt 3's Component Architecture

Nuxt 3 is all about breaking things into smaller pieces called "components." It's a bit like building with Lego — you create different parts and snap them together to make something cool. Headers and footers are like those special Lego blocks that you can use over and over.

Using the Header and Footer

Once the header and footer are ready, we'll make them show up on all pages using layout. Or, if you want, you can pick where it shows up — like on some pages and not on others. In that case, you will need to create different layouts.

Create a default layout

In my application I don't need different layouts. I will have just one called default.vue. So, create a folder layouts in a root directory of your project and create a default.vue file. In that file we will have that piece of code:

<template>
  <div>
    <slot />
  </div>
</template>

Once we done with layout we need to make it visible on the page - add the layout to the app.vue file like so:

<template>
  <NuxtLayout>
    <Header />
    <NuxtPage />
    <Footer />
  </NuxtLayout>
</template>

I'm assuming that you already have Header and Footer in your project.

Troubleshooting

If you paste the code above in your project and footer "jumps" to the top of the page when you navigate between pages, that's because we need to make our page as a unique node. To make that we need to put our <NuxtPage /> into div.

<template>
  <NuxtLayout>
    <Header />
    + <div>
        <NuxtPage />
    + </div>
    <Footer />
  </NuxtLayout>
</template>

Now that glitch effect should be gone.

Conclusion

Headers and footers might seem like small things, but they're super important in making a website look and feel just right. With Nuxt 3, it's easy to make these parts and use them again and again.

How To Use Shopify Cart API and Add Multiple Products To The Cart

Michael Myers — Fri, 29 Sep 2023 11:18:05 +0000

Adding multiple products to the Shopify cart from one button might be helpful in different scenarios, for example when you want to add a configurator.

Recently I said I’m working on a configurator in Shopify without any apps. And here’s an update. I’m attaching the screencast of how it works so far. It’s not 100% done and I found a couple of bugs recently. Anyway, the pre-build version is ready and I’m happy to share it with you.

The issues before starting

The first issue was to properly design it. The design I got from the client was… not in good shape. There was nothing about the different conditions of the products. For example, out-of-stock, discounts, adding products to the cart error, etc. The design didn’t have it and I started to make it myself.

And the second one is to build it. In the process of making it live, if properly say when I started to debug it. I tested the prices, and the main question was “Are the prices shown correctly?”. On the fifth screen, I added the prices of the products that the user chose. In the design, prices aren’t included. I found it helpful to show the prices to the user again.

The working process

Firstly, was made an HTML version. Secondly, I converted it to Liquid code. The problem with HTML is that the products and prices were hard-coded. And with Liquid code all the data is dynamic and customizable through the theme editor which is super cool!

The issue after starting

The main issue was to add multiple products to the cart. I thought about how to make it properly read the documentation (a lot). I read on Shopify discussions, and asked different developers about “how to add multiple products to the cart from one click?” — No luck at all. I tried it on my test Shopify store because thought maybe the problem was in a theme I worked on. But no, the problem was in me :) Later I got an idea and implemented this into the configurator.

The users can add multiple products to the cart now (not sure of the limit of how many products they can add, but 10 it’s 100%).

The solution

To add multiple products to the cart you need to send to the Cart API an items object with the product ID and the quantity.

But be sure to send a variant ID of the product instead of product ID, if your product has variants.

items: [
  {
   id: 36110175633573,
   quantity: 2
  }
]

Here’s how I made a fetch request:

document.querySelectorAll("form.configurator-form").forEach((form) => {
  form.addEventListener("submit", async (e) => {
    e.preventDefault();

    // Show loading spinner
    const loadingOverlays = document.querySelectorAll(".loading-overlay");
    loadingOverlays.forEach((overlay) => overlay.classList.remove("hidden"));

    // Collect product data
    const productData = selectedProducts.map((product) => ({
      id: product.id,
      quantity: 1,
      variantId:
        product.variantId && product.variantId !== product.id
          ? parseInt(product.variantId)
          : undefined,
    }));

    const requestBody = {
      items: productData,
    };

    // Add products to cart
    await fetch(`${window.Shopify.routes.root}cart/add.js`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(requestBody),
    });

    // Get updated cart data
    const res = await fetch("/cart.json");
    const cart = await res.json();

    // Update cart count
    document.querySelectorAll(".cart-count-bubble").forEach((el) => {
      el.textContent = cart.item_count;
    });

    // Navigate to cart page
    window.location.href = "/cart";
  });
});

Overall

I like the project. It will be great for users to get the unique experience and build the box they want. That was a real challenge and I gained a lot of experience from this project.

Be careful when you are faced with this task, there are quite a few pitfalls. For example, if a product has no options, then the ID in value should be passed like this:

{{ product.selected_or_first_available_variant.id }}

The full code of the transmitted input will look like this:

<input class="visually-hidden" type="radio" name="product" value={{ product.selected_or_first_available_variant.id }}>

But if there are options, then this is it: {{ product.id }}

The complete code is similar to the previous input, just the value is different:

<input class="visually-hidden" type="radio" name="product" value={{ product.id }}">

Here's a little trick that you now know. And now you can add multiple items to your cart. Happy development!

Tabs In Vanilla JavaScript

Michael Myers — Tue, 16 May 2023 18:33:12 +0000

This is just the tabs using vanilla js nothing crazy

Shopify Theme Developer Roadmap

Michael Myers — Fri, 28 Apr 2023 06:58:53 +0000

Is Shopify a well-equipped platform for development? What do you need to know to create Shopify Themes? Let’s check it out!

Hello everybody! In this article, I’ll tell you my story about Shopify Development, how I started, how it goes, and my plans for it. Also, you will learn the Shopify developer roadmap based on my experience.

I’m a Shopify Developer

I’ve 4 years of experience in front-end development. I had a job in a digital agency where worked as a Shopify developer for one year. I made a lot of Shopify stores and customizations, and now I’ve enough experience with it.

If you want to be a Shopify developer you have to create a Shopify partner account. What is that?

Shopify partner account

To work with themes you need to create a partner account to open a development store and use Shopify for free. Also, you can use beta features and try new content.

What is Shopify?

I wrote about Shopify in one of my Medium articles. If you don't read it yet, I kindly recommend to do so:

Shopify Full Guide. In this article, I’ve tried to look at… | by Michael Myers | Medium

Michael Myers ・ Dec 14, 2022 ・
myersdev.Medium

How I met Shopify

I learned some CMS like WordPress, Drupal, Joomla, Magento, etc. I saw that Shopify is so popular and I wanted to check what is it. I saw a lot of videos and read some articles about Dropshipping, Liquid, the Shopify platform, and other. And my interest in a lot of CMS during those days helped me to find a full-time job.

How I started working on Shopify as a developer

One IT company made me an offer on the Shopify Developer position and I get it. I worked on a third-party themes and did a lot of code customizations. Sometimes it took a lot of time because something just broke, I mean was broken in a theme. And I fixed it.

After that, I started to read Shopify documentation to understand how to make lightweight functional themes. I saw that Shopify websites can be nice, I thought the Shopify stores can be heavy only and not so cool for users because the page loading speed is nah. So, what about Shopify development? I checked Shopify Theme Development only because I’m interested in websites first.

Shopify Developer Roadmap

Shopify Basics

In this grade, you need a minimum knowledge of Web Development. One thing you need to know is computer basics. You will edit websites in the admin panel called customizer. You can edit the theme code if you wish to. For code editing you’ll need to know:

HTML
CSS
Basic JavaScript
jQuery
JSON
Liquid
Shopify platform.

Shopify Theme Developer

HTML
CSS
JavaScript
JS Framework (React.js or Vue.js)
Shopify Platform
Shopify APIs
Liquid
GraphQL. So it can be kind of complex to learn all of these shortly, but it will take some time as everything is when you are learning new technologies. You can read more on official Shopify development documentation.

Shopify Plus Developer

Shopify Platform
Liquid
Shopify Plus Apps
Script Editor (Ruby)
Shopify Headless CMS (Storefront API)
Framework (Hydrogen or Next JS)
GraphQL.

jQuery is used in old themes, if you have a fresh theme no needs to know it.

Overall

In this article, you understood what you need to know to work as a Shopify developer.

If you want to get a Shopify store for your start-up or business you can hire me as a professional Shopify developer.

How To Start npm Project?

Michael Myers — Fri, 28 Jan 2022 04:49:26 +0000

Maybe not everyone but a lot of developers use npm for projects. Npm is so useful feature for programmers. So how to install npm on your machine? How to create package.json file? How to install packages and so much more.

Install Node.js
Create a project folder
Launch npm
Install npm packages
Terminal command keys
npm i events
Overall

Step 1. Install Node.js

If you don’t have Node.js on you computer install Node.js from the official website. Why we need Node.js? It’s simple. We need Node.js because npm is a separate project from Node.js. Simply, without Node.js you can’t get npm in your project.

If you already have a Node.js on your computer check the version:



node -v

So check the npm version to verify you have the latest version:



npm -v

Step 2. Create a project folder

If you don’t have a project folder at this step it’s time to create it. In the next steps you will work with your project folder. You can use terminal to create a folder. All you need to do is enter this command in your terminal:



mkdir folder-name

To verify that you created a folder run this:

ls

Also, you can use the basic way to create a folder. Maybe in the future I’ll write an article about terminal and how it can save your time just ‘running’ in computer directories.

Step 3. Launch npm

If you start you project from scratch and don’t have a package.json file run this command in your project:



npm init --yes

It will create a basic package.json file in your project folder:

Step 4. Install npm packages

After we installed npm let’s install some packages. All dependencies install by command npm install or in a short way npm i.



npm i eslint --save-dev --save-exact

We installed eslint in our project. But what the weird words with dashes?

Step 5. Terminal command keys

What is --save-dev and --save-exact ?
The most terminal commands have additional settings. This settings called command keys.
--save-dev and --save-exact are the specifying commands. The are need it to clarify how to install the package.

--save-dev key will install the package in devDependencies section in a package.json file. If you will forget this key your package will be installed in dependencies section. It’s no problem but there is a logical split:

devDependencies packages is need it for development, dependencies packages is need it for app working.

--save-exact key is saying to install exact version of the package (usually more newer). If you will forget this key your package will be install with ^ sign. That means “every version from and higher”. It’s okay, but if several developer will be working on your project, they in 90% will have a different version of packages. That will be the issue.

Some keys have a short way, one hyphen and initial letter. For example, -D is the same that --save-dev or -E the same that --save-exact



npm i eslint -D -E

The pros of short way is combining them and -D -Ewill be -DE



npm i eslint -DE

So the order is not important. You can type -ED too.

Step 6. npm i events

After we installed a first package in our project we can see some events:

package-lock.json will be formatted in your project directory. This file contains version history of our dependencies. If you already have dependencies in your project the package-lock.json file will be updated. You have to commit it in your GitHub repository.

There will be created a new block in your package.json file called devDependencies(or updated).

And you can see a new folder in your project called node_modules. You don’t have to commit it. Why? Because all packages are stored in package.json file and after you open your project in a new computer or if you pull the repository from GitHub all you will need to do is install your packages by run npm i in terminal. All your packages will be installed instantly. That’s AWESOME!

Package.json have a special section called scripts. In this section you can set different scripts for launching.



{
  "scripts": {
    "lint": "eslint"
  }
}

In this example we have lint script that will launch eslint in our project:



npm run lint

What this command do? It will launch eslint package in Node.js workspace. The ESLint is the program that analyzes your JavaScript code to find a problems.

Overall

In this article we learned how to start npm from scratch in our future projects. And we are understood how to install packages, how to setting them up, what we need to commit and what is better to add in .gitignore file. Thank you for reading this article.

My Experience on Fiverr

Michael Myers — Sat, 13 Nov 2021 06:57:43 +0000

Hey! It's Mike. Welcome to my new article. I posted an article about Fiverr on Medium. This is a retake, I want to tell you about my experience on it, what I love and what I hate.

Table of contents

My experience
Why Fiverr
I told my friend to start freelancing
The highest paying jobs on Fiverr
Referral link
Pros of Fiverr
Cons of Fiverr
Tips for new sellers
Overall

My freelancing experience

I'm a freelancer since 2020. I make websites using CMS, website builders, and sometimes I develop websites from scratch. I have a full-time job and create websites from scratch on freelance is really hard for me at this moment, that's why I take orders on CMS like WordPress, Shopify. Sometimes people want a website on website builder like Webflow, Squarespace, Tilda, and I take it. I had a lot of questions when just started my freelancing journey like how to create a competitive profile, or another one, how to create a gig customers will buy.

Why I chose Fiverr?

Today Fiverr is one of the largest freelance website. Fiverr offers a lot of jobs for people who try to find a project or post one. And I need to take small projects to complete them in 1-5 days. I spend 1-3 hours every day on a project, it's pretty comfortable for me. Fiverr it's like a side hustle for me. It's only 10% of my income. I think I can do more money on it. I'll tell you how it goes in the next articles.

Fiverr Data section

All you need is to take your niche. There are a lot of jobs you can pick. If you don't know what you like, take all and try. Be attention, you can create only 7 gigs when your level is a new seller.

Fiverr Lifestyle section

Are you creating games? You’ll find your customers.
Are you creating websites? Okay, fine.
Maybe are you just playing games? Awesome! You can coach someone or play together for $5 or more.

What do you think about it? I think it's awesome!

I told my friend to create a profile on Fiverr

I told my friend to create a profile on Fiverr to make music. He's a beatmaker and I love his beats so much. It was 1 year ago, he said like his music is a piece of shit and nobody will like it. I told him like he's not right. And couple days ago he texted me and said like can you help me, I want to create Fiverr profile and sell my beats after a full-time job. I was shocked and happy. It's all about your wish and DO NOT think that people will hate your product. You need to try to say that. By the way there are people who hate Apple (yes I know Apple and beatmaking it's a little bit different but still).

The highest-paying side hustles on Fiverr

The most paying jobs on Fiverr right now are online assistant, website design, CV, Cover Letter and Resume Writing, etc. You can read more here.

What are you waiting for?

If you are interested, sign up on Fiverr and get 10% off your first purchase (it's referral link, I will appreciate if you will sign up using my link).

Pros of $5 services

Another pros of Fiverr is that all services started from $5. When Fiverr just started, all services cost $5, it was their Terms of Service.

For example, you offer a logo. For $5 you create one logo sketch. For $15 you create several sketches. And for $30 logo colors variations + source file. Time going, this Terms of Service go on the background and many new sellers don’t know about it, just put $30 for one logo sketch. Of course, if you are a professional and have many customers it’s pretty reasonable.

Cons of $5 services

On the other hand, $5 services have cons. You should compete with more experienced freelancers. It sucks when you just started. BUT you don’t understand this freelancer put $5 because he is a new seller or just a professional who has original Terms of Service. It’s hard to understand who is a new seller and who is a professional. However, it’ll be a plus for someone.

Tips for new sellers

What about new sellers? If you just started your way on Fiverr, put low cost and offer more than other freelancers. It’ll help you to find your first customer. However, it will takes time to get you first customer. I put $5 on all my gigs and still don’t have a customer. I have projects in my portfolio, catch eye cover image, video about each gig but still. All you need is to be patient. Don’ think about money when you just start you way. Your money is customers because they bring it to you. Your focus will be on how to get a customer, not how to get money. It’s the same thing as well but sounds different. You can check my profile.

After all, when you sign up, the first step will be to look at other freelancers. What do they offer for this price? Attach a photo of your smiling face. Write a seller description. Create gigs, more is better. gig — your offer for a customer.

When you creating gigs, use a correct cover image, write a description, attach some portfolio examples of this service, choose a price.

On your first steps, it seems complex. But don’t give up. There are a lot of people out there. Just take your time. Upgrade your expertise every day and you’ll do it! If you understand what you do and what it gives you, success will come. Just wait.

Analyze your profile

Analyze your profile several times in a month. What gigs have the most impressions? What gigs have the most clicks? If people clicking, why don’t make an order? Maybe you should rewrite your gig’s description, decrease or raise the price. Yes, sometimes low prices make an effect on a potential customer. Change the cover image, maybe it doesn’t hook. Change your portfolio, perhaps you created better works for it.

If you read this post from start to finish I’m so happy. Let me know in the comments or message me on social media I’ll say thanks.

Take your time

Just wait, time is your best friend.

Give a value

You can sell a piece of crap and people will buy it, but how many times you will sell before taking a lot of bad reviews? It's a question.

Provide a value. Your first customer is so much important when you start your business, yes I think freelance is a business. You need to be so much pleasure with your customers and it will give you a nice back shot. People will recommend you, Fiverr will recommend you, all will recommend you. It's a nice feeling when a customer accept the revision and left a 5 star review.

Ask your friends to help you

You have a friends right? Ask them to help you. Give them $5 and they will create an order for you. After that they will left a 5 star review and you're all in.

First orders / first money

I had my first review. It was a customer from Canada. After the first order the customer repeated the business. It was a good customer and I'm so happy I worked with him.

You can check more on my Instagram.

Take orders you can deliver in time

A lot of people will text you and ask something you can't do or don't know how to do. If you think that a customer wants a task you can't do, tell that. Because people are do not understand how it works and it's okay.

Overall

Fiverr is a nice freelance website. It's free to starting, all you need is a wish. For my opinion everyone can create a profile on Fiverr and start freelancing, it's super fun (exclude when you got a lot of orders, it's a hell lol).

Thank you for your attention. I appreciate that. Stay safe!

My Journey From ZERO To GOT AN OFFER In Tech Company

Michael Myers — Mon, 18 Oct 2021 13:52:42 +0000

Hello, I'm Michael Myers, called devmoek. I've been learning programming since 2020. It's almost 2 years from my first line of code. I understood that coding is what I want to do in my life and I started to learn a lot of new things. First things first was HTML. I learned the basics in college with professor. She taught me how to write code better. In parallel with HTML I learned CSS. I like CSS so much. I don't understand how people coded websites without CSS like 10 years ago.

I wanted to code a website from layout. My first project was a website about movies and TV-shows. Yes, it was kind of dumb idea to take the website with sign in, sign up, rating, movies sorting and other JS and PHP functions. By the way, I took a course that help me to code it. I got a lot of practices with that. In the website I used HTML with Bootstrap 4, CSS, JS, PHP.

After that course I started to learn programming on a lot of websites such as Udemy, Coursera, Udacity, Codecademy, etc. I just wanted to try all of them to choose the most handy for me. I chose freeCodeCamp. For my opinion, it's one of the best resource to learn programming. At this time I learning basic JS, I'm on 70%.

With freeCodeCamp I coded a portfolio website for myself. Check how it looks.

After 1 year and 6 months I thought that I'm ready for freelancing. I created a profile on Fiverr and Upwork. I feel hard to write a description, but after time I did it. It's been a while after taking first message, yes, first message, not an order.

Last month I didn't search a freelance projects, I was focused on finding a job. Some people text me, but I don't know. They are strange. They like hey can you create a WordPress website and I like yes I can, what's your preferences? And they just ignore me 🙃. Can somebody explain this?

In parallel with freelance, I coded a "big boy". That was a website using HTML, CSS, JS, a lot of PHP, without frameworks. A website for dental clinic. That was a contract / a project for my college graduation exam. It took 6 months to code it. And it's not 100% ready at this moment. In the project I think it will be good if I create an admin panel with PHP functions like edit, add, delete rows from table. That was my idea. And sign up / sign in form was too as well. I thought a lot about how to realize this more conveniently for clients. You can check the code on GitHub.

If you have some advices, I'll be happy to hear it.

After my graduation from college I decided to move forward. But first I took a one month break. I edited my profile on Fiverr and Upwork after holidays. I rewrite description in each gigs / projects, change profile picture, change the prices. Ever since, I created [tech Instagram profile (https://www.instagram.com/devmoek), if more precisely I change my old profile to new. In this profile I'm posting about Freelance, Web Development, Blogging, some information about me.

That was a really good time, I started writing, continue to shoot a videos on my YouTube channel, and so on.

Following this, I started to think about joining in some team. I had one try to find a job 8 months ago. I shot a video about this. I made English subtitles, so you can watch it.

By the way I need your advice, what is better, to create English subtitles on my Russian videos or to shoot a videos in English. Please, let me know.

Check my YouTube video how I tried to got a junior developer position.

I uploaded a resume on headhunter, it's a job board like indeed, linkedin, etc. After some days I've got first offers such as HTML developer, Shopify Developer, JavaScript Developer, Front-end Developer. What about the last one, I don't know what they mean about front-end developer, all of these positions are front-end. The last one I declined, because they are located in another city, and took the exercises from the other companies.

Junior Web Developer. On the interview we talked about HTML, JS, JSON, a little bit of backend. And I said that I'm not a backend guy, I prefer frontend more :) (sorry backend guys).

CEO asked me some questions

What is BEM;
What's the difference between span and div;
About my previous projects, what I used in projects;
About my English level (maybe you doesn't know, I'm a Russian).

After several days the HR Manager said that I need to complete an exercise to take another step. I did it in 6 days. After exercise review they are said that...

I GOT THIS JOB🥳🎉🎊. I am a Junior Web Developer.

Follow me to read new articles ASAP.

Let me know in the comments what do you think about my new position.

Junior Front-end Developer Roadmap

Michael Myers — Fri, 01 Oct 2021 02:05:30 +0000

Junior Frontend Developer — Freshman in web development with over one year of experience. He has to know the internet basics, HTML, CSS, JavaScript, Git, Web Security Knowledge, package managers, CSS preprocessors, frameworks. It will be great if he knows react.js, vue.js, angular. Simply it’s a middle developer working on a junior position. It’s a joke, but sometimes people want all of these from junior.

Table of Contents:

Who is Junior Frontend Developer
About PHP
How to start in Web Dev?
Conclusion

Who is Junior Frontend Developer?

It’s a developer with basic knowledge of Web Development and the Internet as well. He knows HTML, CSS, the basics of JS, and understands how a browser works. And that’s it. He knows how to build a simple web page from scratch. Maybe he knows CSS frameworks and preprocessors such as Bootstrap, SCSS. It’s a basic that might take up to 1 year if you learn smoothly and don’t rush. In some cases, you can learn PHP as I did.

My story about PHP

I’ve learned PHP for my school project. I needed a database, working form, and administrator panel to change/delete/add rows in a database. That was kind of hard, changing and deleting the script is not working. But still, I don’t learn PHP before this project. This project took 7 months. It was a dental clinic website with 7 pages, without design layout, logo file, text, pictures. I made and found it all by myself. I have developed it by HTML, CSS, JS, PHP without frameworks or preprocessors. That was a nice experience to work with. I’ve never done something like that.

How to start?

To start your journey in frontend development you need to understand, do you like it? Try to build a website in HTML and CSS. Just a simple static page. Of course, it’s not a frontend development for 100%, it’s basics. If you like basics you going to like to go deep. You can take courses to provide smooth learning. I have had to learn on freeСodeСamp. It’s a free course that contains a lot of useful information with a certificate at the end of each course. Also, freeСodeСamp has a big learners base in Facebook, Reddit, Twitter, freeСodeСamp’s blog. You can ask a question if you don’t understand how to pass a challenge or answer if you know a solution.

A non-profit organization that consists of an interactive learning web platform.

After you understand it’s yours. You need to go deep. If you are already know HTML, CSS, basics of JS and Git. Your next stage is npm packages or yarn. You can pick both as well. Then learn Webpack technology. After that pick a Framework such as React.js (Redux, MobX), Vue.js (VueX), Angular.js (RxJS, NgRx). You can check the roadmap here. If you would like to see more than I did, you can visit this website.

Frontend Roadmap

Conclusion

Thank you for reading. Those were my thoughts about the junior frontend developer roadmap. What do you think about the roadmap? If you are a junior, what do you learn right now? If you just want to start it’s a great time to do it! Do not forget that programming means forever studying. Don’t stop at what you have learned right now, keep moving.

I hope you being well guys. As for me, I have a pretty hard time in my life. I don’t know what will be in 1 month. I live in Russia and the army here is mandatory. I can’t move or do something because I’m broke. Find a job I can’t too, they just bring me to the army if I’ll try to find a job. I will post articles here for long as I can. I like writing and sharing thoughts helps me to forget about the army.

UPD 10/1/2021: I got a job :) And the doctor found a diagnosis that maybe I will not go to the army.

// Detect dark theme var iframe = document.getElementById('tweet-1443215906407071744-228'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1443215906407071744&theme=dark" }

Which Website is The Best For Freelancers

Michael Myers — Wed, 22 Sep 2021 02:42:35 +0000

Freelance websites for Beginners

Hello everybody, hope you being well. In this article I will talk about freelance websites for beginners. If you don't know what platform for freelance to choose, read the article.

There are a lot of websites for freelancers. First things first, you need to try all of them to make a decision. Before signing up, action all links and check the main page on a website. Thus sign up on website you liked.

Before you make a decision
How many freelance websites to choose?
What website to choose for freelancing?
Conclusion

Before you make a decision

Answer on these questions:

Does the design of a website is handy for you?
Do you understand the links?
Where do you need to click to find a customer shortly?
Are you ready to use it every day?

Freelance is a work, don’t forget about it. Freelance website will be for you as an office. And that’s why you need to feel free yourself to use it. There are websites, which design looks old and not understandable. Craigslist and Wikipedia, as an example. That’s are great websites, but their design knows mammoths.

Craigslist

Wikipedia

How many freelance websites to choose?

It will be better if you choose several websites for freelancing. If you just started your freelance way, you don’t have offline customers. When you start on two websites or more together, you boost your work several times.

I chose Fiverr and Upwork).

The cons of working on several freelance websites

It has underlying potential problems. I mean, you can receive several orders from each website you have signed up. It’s kind of rare but still.

What website to choose for freelancing?

Fiverr
Upwork
Freelancer
Peopleperhour
Dribbble
Behance

Let's go deep in each website.

Fiverr

If you want fast-freelance, Fiverr is made for you.

On Fiverr you can start from $5 for service. Then, after receiving some good reviews, increase your price. If you have offline customers, you can put a higher prices for your services as well.

Upwork

Upwork is a great way to start working from home if you are a professional and want to "fight" with another experienced specialists from all over the world. On Upwork you can earn more than on Fiverr. That means you can put $15 from start and increase a price after receiving a few good reviews.

Upwork has two ways for taking an order. You can search a job in a feed or publish a project and wait a customer.

Freelancer

Freelancer is a large freelance website. A lot of people / company are working on this website. I like the notification feature on Freelancer. It sends you an updates of a recent projects. It means you can find a project ASAP.

Fun fact about Freelance, it has 50 million users. That's impressive.

Peopleperhour

If you prefer paid for hour, it's a nice website for you. There are not so many freelancers if compare with other websites, it's another plus of peopleperhour.

Dribbble

Dribbble it's a portfolio-inspiration website. You can put your portfolio or find an inspiration of design or something. By the way you can be hired by a customer.

Behance

Behance is like a Dribbble, but on Behance you can show full height of project. If you are a front-end developer as me, and you need to show you website, Behance is better than Dribbble. On Dribbble you can show a fix width and height image, I use it as a teaser of a project.

If I forgot about a cool websites for freelancing, use comment to share it.

Conclusion

In the end, I want to tell you that freelance — it’s super exciting. Take your time and don't give up! Fill your profile, create a gig / a project for your future customers, reply to the messages ASAP and just wait.

If you like it or dislike it, let me know in the comments. Don’t forget to subscribe as well.

the article has a referral link

DEV Community: Michael Myers

How to add Header and Footer in Nuxt 3

Understanding Nuxt 3's Component Architecture

Using the Header and Footer

Create a default layout

Troubleshooting

Conclusion

How To Use Shopify Cart API and Add Multiple Products To The Cart

The issues before starting

The working process

The issue after starting

The solution

Overall

Tabs In Vanilla JavaScript

Shopify Theme Developer Roadmap

I’m a Shopify Developer

Shopify partner account

What is Shopify?

Shopify Full Guide. In this article, I’ve tried to look at… | by Michael Myers | Medium

Michael Myers ・ Dec 14, 2022 ・ myersdev.Medium

How I met Shopify

How I started working on Shopify as a developer

Shopify Developer Roadmap

Shopify Basics

Shopify Theme Developer

Shopify Plus Developer

Overall

How To Start npm Project?

Table of contents

Step 1. Install Node.js

Step 2. Create a project folder

Step 3. Launch npm

Step 4. Install npm packages

Step 5. Terminal command keys

Step 6. npm i events

Overall

My Experience on Fiverr

My freelancing experience

Why I chose Fiverr?

I told my friend to create a profile on Fiverr

The highest-paying side hustles on Fiverr

What are you waiting for?

Pros of $5 services

Cons of $5 services

Tips for new sellers

Analyze your profile

Take your time

Give a value

Ask your friends to help you

First orders / first money

Take orders you can deliver in time

Overall

My Journey From ZERO To GOT AN OFFER In Tech Company

Junior Front-end Developer Roadmap

Who is Junior Frontend Developer?

My story about PHP

How to start?

Conclusion

Which Website is The Best For Freelancers

Freelance websites for Beginners

Table of contents

Before you make a decision

How many freelance websites to choose?

The cons of working on several freelance websites

What website to choose for freelancing?

Fiverr

Upwork

Freelancer

Peopleperhour

Dribbble

Behance

Conclusion

Michael Myers ・ Dec 14, 2022 ・
myersdev.Medium