Hire The Top 1% Freelance Web Developers

Web Development is the designing, creating and maintaining web applications or web pages for the internet, or an intranet. It has a vast scope ranging from web designing, web programming to database management. There are a wide variety of tools used by developers to carry out different tasks in the world of web development.

If you’re looking for a freelance web developer, this guide will come in handy. We’ve included everything you need to know about hiring a freelance Web developer.

We have broken the sections into the following parts:
1. Let's introduce Web development to you.
2. Why is Web development widespread?
3. What are the tools used by Web developers?
4. Writing the Job Description to hire a freelance Web developer
5. Interview Questions for hiring a Web developer
- Basic Questions
- Advanced Questions
- Data Structures/Algo Questions

1. Let's introduce Web development to you

• The World Wide Web (WWW) was invented by a British Scientist Tim Berners-Lee while working at the European Council for Nuclear Research (CERN) back in 1989.


• Berners-Lee along with his colleague Robert Cailliau created the first web pages, developed the first web client (browser), wrote the first web server.


• On 30th April 1993, CERN released the Web to the world as open source software and by late 1993, new websites for the mainstream public began opening up on the web.


• Through the 1990s and well into the 2000s the internet started getting popular with the public and tools such as JavaScript, Flash, CSS (cascading style sheets) emerged for web development.


• With the rise of smartphones, a new avenue emerged in web development through mobile browsers. We now see a rise in hybrid technology combining mobile and native web applications where languages such as JavaScript, HTML, CSS are still used.



2. Why is Web development widespread?

• Over the past couple of decades, the rapid rise of technology and the internet all over the world has made it an omnipresent factor in our everyday lives. Behind all of this technology there is some form of web development.
• In today's tech-centric world, web development serves as a backbone for all businesses- big and small. With the massive popularity of the web as a platform, its importance is not confined to any geography or size of operation.



3. What are the tools used by Web developers?

The following are some of the tools used by Web developers at various stages of development:

1. Chrome DevTools
Chrome DevTools is a set of web authoring and debugging tools built directly into the Google Chrome browser. It allows a developer to create, test and debug software.

2. Lighthouse
Google Lighthouse is an open-source, automated tool for measuring and improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO, and more.

3. Sketch
The sketch is the all-in-one platform for digital design. Its main usage is UI and UX Design for mobile, web, desktop, and wearables. It is vector-based, thanks to this, all graphics are easily scalable.

4. Adobe Experience Manager
Adobe Experience Manager (AEM) is a content management solution for building websites. It makes it easy to manage the developer's marketing content and assets.

5. Sublime Text
Sublime is a cross-platform text editor for code, markup, and prose with tons of plugins. It supports many programming and markup languages.

6. Figma
Figma is a cloud-based vector graphics editor tool that helps developers to create anything: websites, applications, logos, and much more.




4. Writing the Job Description to hire a freelance Web developer

Below are some key points that we at Flexiple have learned through trial and error - a process of filtering through over 15,000 developers.

• Years of Web development experience: Be specific about the technology you’re looking for and the number of years of experience needed. A proxy to years of experience can be the number of production-level apps worked on.


• Type of products built in the past: Based on the type of product you are trying to build and your requirements for the job, you can prioritize certain developers over others- Full stack, Front-End, Back-End, etc


• Exposure to specific industries: Developers who have built products in certain industries will already know key aspects of laying the foundation for a great product and will be able to predict possible problems.


• Experience working remotely: A developer with past remote work experience is an added advantage as they would have first-hand experience of everything - right from how contracts work to streamlined communication, as well as timelines and deliverables.


• Strong communication: An essential thing to look at when hiring a freelancer is excellent communication skills. Since all the interaction happens online, a freelancer should be able to effectively communicate to ensure a streamlined execution of all work.



5. Interview Questions for hiring a Web developer

Now that you have made a quality JD, it can still be tricky to evaluate the skills of your applicants. To help you with that, we have created a pool of questions that a good Web developer should be comfortable with. You can check out some interview questions related to web development here.
It is important to note that the ability to answer these questions doesn't imply that you have a top quality candidate. But it definitely is a big step in that direction.

To help you navigate through these questions, we’ve categorized the interview questions in 3 parts:


A. Basic concepts: Includes all basic concepts used across languages.This will give you an understanding of how strong their programming foundation is.

B. Advanced concepts: Includes all concepts that someone with higher expertise should know.

C. DS/Algorithm questions: To test the logical capability of the candidate.




A. Basic concepts

-g Flag

nodemon : The term 'nodemon' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the 
spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ nodemon node app.js
+ ~~~~~~~
    + CategoryInfo          : ObjectNotFound: (nodemon:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

[nodemon] 2.0.5
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node node app.js`
server is up
[nodemon] clean exit - waiting for changes before restart

--save-dev Flag

  "dependencies": {
    "jest": "^26.5.3"
  },
  "devDependencies": {}

 "dependencies": {},
  "devDependencies": {
    "jest": "^26.5.3"
  }

ESLint

• After setting up your project (that is running ‘npm init’), run ‘npm install eslint --save-dev’.
• After that we run ‘npx eslint --init’ this is used to generate the ‘.eslintrc.json’ file which is the config file for eslint.
• When we are generating a the config file, it asks a bunch of questions to generate it, these are what I’ve chosen:

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · node
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JSON 

• It might have some peer dependencies that it wants you to install - install them too.
• Now we come to using the linter. We run ‘npx eslint app.js’ (here app.js is the source js file).

const obj = {
    "prop1": {
        "ex": "ex",
        "prop2": {
            "ex": "ex"
        }
    }
}

const objCopy = JSON.parse(JSON.stringify(obj))
  
console.log(objCopy)

2:1   error  Expected indentation of 2 spaces but found 4   indent
   2:5   error  Strings must use singlequote                   quotes
   2:5   error  Unnecessarily quoted property 'prop1' found    quote-props
   3:1   error  Expected indentation of 4 spaces but found 8   indent
   3:9   error  Unnecessarily quoted property 'ex' found       quote-props
   3:9   error  Strings must use singlequote                   quotes
   3:15  error  Strings must use singlequote                   quotes
   4:1   error  Expected indentation of 4 spaces but found 8   indent
   4:9   error  Strings must use singlequote                   quotes
   4:9   error  Unnecessarily quoted property 'prop2' found    quote-props
   5:1   error  Expected indentation of 6 spaces but found 12  indent
   5:13  error  Strings must use singlequote                   quotes
   5:13  error  Unnecessarily quoted property 'ex' found       quote-props
   5:19  error  Strings must use singlequote                   quotes
   6:1   error  Expected indentation of 4 spaces but found 8   indent
   7:1   error  Expected indentation of 2 spaces but found 4   indent
  11:1   error  Trailing spaces not allowed                    no-trailing-spaces
  12:21  error  Newline required at end of file but not found  eol-last

✖ 18 problems (18 errors, 0 warnings)
  18 errors and 0 warnings potentially fixable with the `--fix` option.

const obj = {
  prop1: {
    ex: 'ex',
    prop2: {
      ex: 'ex'
    }
  }
}

const objCopy = JSON.parse(JSON.stringify(obj))

console.log(objCopy)

For example, let’s assume that the front end is hosted on https://a-domain.com and the backend on https://b-domain.com. In such a case, if the front end makes a GET request to https://b-domain.com/posts, it will receive the following error in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://b-domain.com 

• Access-Control-Allow-Origin : [origin] An example of this would be ‘Access-Control-Allow-Origin: https://a-domain.com. This allows requests only from the specified origin to be able to access resources provided.
• Access-Control-Allow-Origin : * Using the wildcard character (*) means that any site can access the resources provided by your application.

// declaring app to use express framework
let app = express()
 
// this is using wildcard character
app.use(cors()) 

// this is specifying origin
app.use(cors({
  origin: 'https://a-domain.com' 
}))

// this is specifying cors for specific route
app.get('/', cors(), (req, res) => {
    
});

Difference between Cookie and Local Storage 

• Local storage does not have the concept of expiration time. So, the developer dealing with it needs to handle the expiration of tokens stored in it. Whereas, the expiration time for cookies can be set while storing the cookie and the browser handles the rest.
• Local storage is not sent with every HTTP request, like a cookie is sent. This reduces load on especially those HTTP requests which are public and do not require to use the token stored.
• The server can directly interact with cookies, whereas only the client side script can interact with local storage.
• Local storage has a much larger storage capacity of 5mb compared to 4kb of cookie. This is primarily because cookies are meant to be read by the server, whereas local storage is meant for the client side to be able to persistently store data.

Vulnerabilities

C. Data Structure/ Algorithm