{"id":3625,"date":"2022-10-07T20:46:22","date_gmt":"2022-10-07T15:46:22","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3625"},"modified":"2022-10-07T21:57:28","modified_gmt":"2022-10-07T16:57:28","slug":"how-to-make-a-drawing-app-using-html5-css3-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/","title":{"rendered":"How to Make A Drawing App using HTML5, CSS3 & JavaScript"},"content":{"rendered":"\n

In this tutorial, I will teach you how to create a drawing app<\/strong> using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript drawing app<\/strong> is given below.<\/p>\n\n\n\n

You can download the full source code (including images) of this JavaScript drawing app at the end of this article.<\/p>\n\n\n\n

HTML5, CSS3, and JavaScript Drawing App<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en" dir="ltr">\n  <head>\n    <meta charset="utf-8">\n    <title>Drawing App JavaScript<\/title>\n    <link rel="stylesheet" href="style.css">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <script src="script.js" defer><\/script>\n  <\/head>\n  <body>\n    <div class="container">\n      <section class="tools-board">\n        <div class="row">\n          <label class="title">Shapes<\/label>\n          <ul class="options">\n            <li class="option tool" id="rectangle">\n              <img src="icons\/rectangle.svg" alt="">\n              <span>Rectangle<\/span>\n            <\/li>\n            <li class="option tool" id="circle">\n              <img src="icons\/circle.svg" alt="">\n              <span>Circle<\/span>\n            <\/li>\n            <li class="option tool" id="triangle">\n              <img src="icons\/triangle.svg" alt="">\n              <span>Triangle<\/span>\n            <\/li>\n            <li class="option">\n              <input type="checkbox" id="fill-color">\n              <label for="fill-color">Fill color<\/label>\n            <\/li>\n          <\/ul>\n        <\/div>\n        <div class="row">\n          <label class="title">Options<\/label>\n          <ul class="options">\n            <li class="option active tool" id="brush">\n              <img src="icons\/brush.svg" alt="">\n              <span>Brush<\/span>\n            <\/li>\n            <li class="option tool" id="eraser">\n              <img src="icons\/eraser.svg" alt="">\n              <span>Eraser<\/span>\n            <\/li>\n            <li class="option">\n              <input type="range" id="size-slider" min="1" max="30" value="5">\n            <\/li>\n          <\/ul>\n        <\/div>\n        <div class="row colors">\n          <label class="title">Colors<\/label>\n          <ul class="options">\n            <li class="option"><\/li>\n            <li class="option selected"><\/li>\n            <li class="option"><\/li>\n            <li class="option"><\/li>\n            <li class="option">\n              <input type="color" id="color-picker" value="#4A98F7">\n            <\/li>\n          <\/ul>\n        <\/div>\n        <div class="row buttons">\n          <button class="clear-canvas">Clear Canvas<\/button>\n          <button class="save-img">Save As Image<\/button>\n        <\/div>\n      <\/section>\n      <section class="drawing-board">\n        <canvas><\/canvas>\n      <\/section>\n    <\/div>\n    \n  <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
const canvas = document.querySelector("canvas"),\ntoolBtns = document.querySelectorAll(".tool"),\nfillColor = document.querySelector("#fill-color"),\nsizeSlider = document.querySelector("#size-slider"),\ncolorBtns = document.querySelectorAll(".colors .option"),\ncolorPicker = document.querySelector("#color-picker"),\nclearCanvas = document.querySelector(".clear-canvas"),\nsaveImg = document.querySelector(".save-img"),\nctx = canvas.getContext("2d");\n\n\/\/ global variables with default value\nlet prevMouseX, prevMouseY, snapshot,\nisDrawing = false,\nselectedTool = "brush",\nbrushWidth = 5,\nselectedColor = "#000";\n\nconst setCanvasBackground = () => {\n    \/\/ setting whole canvas background to white, so the downloaded img background will be white\n    ctx.fillStyle = "#fff";\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n    ctx.fillStyle = selectedColor; \/\/ setting fillstyle back to the selectedColor, it'll be the brush color\n}\n\nwindow.addEventListener("load", () => {\n    \/\/ setting canvas width\/height.. offsetwidth\/height returns viewable width\/height of an element\n    canvas.width = canvas.offsetWidth;\n    canvas.height = canvas.offsetHeight;\n    setCanvasBackground();\n});\n\nconst drawRect = (e) => {\n    \/\/ if fillColor isn't checked draw a rect with border else draw rect with background\n    if(!fillColor.checked) {\n        \/\/ creating circle according to the mouse pointer\n        return ctx.strokeRect(e.offsetX, e.offsetY, prevMouseX - e.offsetX, prevMouseY - e.offsetY);\n    }\n    ctx.fillRect(e.offsetX, e.offsetY, prevMouseX - e.offsetX, prevMouseY - e.offsetY);\n}\n\nconst drawCircle = (e) => {\n    ctx.beginPath(); \/\/ creating new path to draw circle\n    \/\/ getting radius for circle according to the mouse pointer\n    let radius = Math.sqrt(Math.pow((prevMouseX - e.offsetX), 2) + Math.pow((prevMouseY - e.offsetY), 2));\n    ctx.arc(prevMouseX, prevMouseY, radius, 0, 2 * Math.PI); \/\/ creating circle according to the mouse pointer\n    fillColor.checked ? ctx.fill() : ctx.stroke(); \/\/ if fillColor is checked fill circle else draw border circle\n}\n\nconst drawTriangle = (e) => {\n    ctx.beginPath(); \/\/ creating new path to draw circle\n    ctx.moveTo(prevMouseX, prevMouseY); \/\/ moving triangle to the mouse pointer\n    ctx.lineTo(e.offsetX, e.offsetY); \/\/ creating first line according to the mouse pointer\n    ctx.lineTo(prevMouseX * 2 - e.offsetX, e.offsetY); \/\/ creating bottom line of triangle\n    ctx.closePath(); \/\/ closing path of a triangle so the third line draw automatically\n    fillColor.checked ? ctx.fill() : ctx.stroke(); \/\/ if fillColor is checked fill triangle else draw border\n}\n\nconst startDraw = (e) => {\n    isDrawing = true;\n    prevMouseX = e.offsetX; \/\/ passing current mouseX position as prevMouseX value\n    prevMouseY = e.offsetY; \/\/ passing current mouseY position as prevMouseY value\n    ctx.beginPath(); \/\/ creating new path to draw\n    ctx.lineWidth = brushWidth; \/\/ passing brushSize as line width\n    ctx.strokeStyle = selectedColor; \/\/ passing selectedColor as stroke style\n    ctx.fillStyle = selectedColor; \/\/ passing selectedColor as fill style\n    \/\/ copying canvas data & passing as snapshot value.. this avoids dragging the image\n    snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height);\n}\n\nconst drawing = (e) => {\n    if(!isDrawing) return; \/\/ if isDrawing is false return from here\n    ctx.putImageData(snapshot, 0, 0); \/\/ adding copied canvas data on to this canvas\n\n    if(selectedTool === "brush" || selectedTool === "eraser") {\n        \/\/ if selected tool is eraser then set strokeStyle to white \n        \/\/ to paint white color on to the existing canvas content else set the stroke color to selected color\n        ctx.strokeStyle = selectedTool === "eraser" ? "#fff" : selectedColor;\n        ctx.lineTo(e.offsetX, e.offsetY); \/\/ creating line according to the mouse pointer\n        ctx.stroke(); \/\/ drawing\/filling line with color\n    } else if(selectedTool === "rectangle"){\n        drawRect(e);\n    } else if(selectedTool === "circle"){\n        drawCircle(e);\n    } else {\n        drawTriangle(e);\n    }\n}\n\ntoolBtns.forEach(btn => {\n    btn.addEventListener("click", () => { \/\/ adding click event to all tool option\n        \/\/ removing active class from the previous option and adding on current clicked option\n        document.querySelector(".options .active").classList.remove("active");\n        btn.classList.add("active");\n        selectedTool = btn.id;\n    });\n});\n\nsizeSlider.addEventListener("change", () => brushWidth = sizeSlider.value); \/\/ passing slider value as brushSize\n\ncolorBtns.forEach(btn => {\n    btn.addEventListener("click", () => { \/\/ adding click event to all color button\n        \/\/ removing selected class from the previous option and adding on current clicked option\n        document.querySelector(".options .selected").classList.remove("selected");\n        btn.classList.add("selected");\n        \/\/ passing selected btn background color as selectedColor value\n        selectedColor = window.getComputedStyle(btn).getPropertyValue("background-color");\n    });\n});\n\ncolorPicker.addEventListener("change", () => {\n    \/\/ passing picked color value from color picker to last color btn background\n    colorPicker.parentElement.style.background = colorPicker.value;\n    colorPicker.parentElement.click();\n});\n\nclearCanvas.addEventListener("click", () => {\n    ctx.clearRect(0, 0, canvas.width, canvas.height); \/\/ clearing whole canvas\n    setCanvasBackground();\n});\n\nsaveImg.addEventListener("click", () => {\n    const link = document.createElement("a"); \/\/ creating <a> element\n    link.download = `${Date.now()}.jpg`; \/\/ passing current date as link download value\n    link.href = canvas.toDataURL(); \/\/ passing canvasData as link href value\n    link.click(); \/\/ clicking link to download image\n});\n\ncanvas.addEventListener("mousedown", startDraw);\ncanvas.addEventListener("mousemove", drawing);\ncanvas.addEventListener("mouseup", () => isDrawing = false);<\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
\/* Import Google font - Poppins *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Poppins', sans-serif;\n}\nbody{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  background: #4A98F7;\n}\n.container{\n  display: flex;\n  width: 100%;\n  gap: 10px;\n  padding: 10px;\n  max-width: 1050px;\n}\nsection{\n  background: #fff;\n  border-radius: 7px;\n}\n.tools-board{\n  width: 210px;\n  padding: 15px 22px 0;\n}\n.tools-board .row{\n  margin-bottom: 20px;\n}\n.row .options{\n  list-style: none;\n  margin: 10px 0 0 5px;\n}\n.row .options .option{\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  margin-bottom: 10px;\n}\n.option:is(:hover, .active) img{\n  filter: invert(17%) sepia(90%) saturate(3000%) hue-rotate(900deg) brightness(100%) contrast(100%);\n}\n.option :where(span, label){\n  color: #5A6168;\n  cursor: pointer;\n  padding-left: 10px;\n}\n.option:is(:hover, .active) :where(span, label){\n  color: #4A98F7;\n}\n.option #fill-color{\n  cursor: pointer;\n  height: 14px;\n  width: 14px;\n}\n#fill-color:checked ~ label{\n  color: #4A98F7;\n}\n.option #size-slider{\n  width: 100%;\n  height: 5px;\n  margin-top: 10px;\n}\n.colors .options{\n  display: flex;\n  justify-content: space-between;\n}\n.colors .option{\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  margin-top: 3px;\n  position: relative;\n}\n.colors .option:nth-child(1){\n  background-color: #fff;\n  border: 1px solid #bfbfbf;\n}\n.colors .option:nth-child(2){\n  background-color: #000;\n}\n.colors .option:nth-child(3){\n  background-color: #E02020;\n}\n.colors .option:nth-child(4){\n  background-color: #6DD400;\n}\n.colors .option:nth-child(5){\n  background-color: #4A98F7;\n}\n.colors .option.selected::before{\n  position: absolute;\n  content: "";\n  top: 50%;\n  left: 50%;\n  height: 12px;\n  width: 12px;\n  background: inherit;\n  border-radius: inherit;\n  border: 2px solid #fff;\n  transform: translate(-50%, -50%);\n}\n.colors .option:first-child.selected::before{\n  border-color: #ccc;\n}\n.option #color-picker{\n  opacity: 0;\n  cursor: pointer;\n}\n.buttons button{\n  width: 100%;\n  color: #fff;\n  border: none;\n  outline: none;\n  padding: 11px 0;\n  font-size: 0.9rem;\n  margin-bottom: 13px;\n  background: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.buttons .clear-canvas{\n  color: #6C757D;\n  border: 1px solid #6C757D;\n  transition: all 0.3s ease;\n}\n.clear-canvas:hover{\n  color: #fff;\n  background: #6C757D;\n}\n.buttons .save-img{\n  background: #4A98F7;\n  border: 1px solid #4A98F7;\n}\n.drawing-board{\n  flex: 1;\n  overflow: hidden;\n}\n.drawing-board canvas{\n  width: 100%;\n  height: 100%;\n}<\/pre><\/div>\n\n\n\n
\n\n\n\n
Download Source Code (including images)<\/h2>\n\n\n
Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you how to create a drawing app using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript drawing app is given below. You can download the full source code (including images) of this JavaScript drawing app at the end of this article. HTML5, CSS3, and JavaScript Drawing … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3628,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHow to Make A Drawing App using HTML5, CSS3 & JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you how to create a drawing app using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript drawing app\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make A Drawing App using HTML5, CSS3 & JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you how to create a drawing app using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript drawing app\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T15:46:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T16:57:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Drawing-or-Paint-App-in-HTML-CSS-JavaScript-Drawing-App-in-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make A Drawing App using HTML5, CSS3 & JavaScript","description":"In this tutorial, I will teach you how to create a drawing app using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript drawing app","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Make A Drawing App using HTML5, CSS3 & JavaScript","og_description":"In this tutorial, I will teach you how to create a drawing app using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript drawing app","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T15:46:22+00:00","article_modified_time":"2022-10-07T16:57:28+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Drawing-or-Paint-App-in-HTML-CSS-JavaScript-Drawing-App-in-JavaScript.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Make A Drawing App using HTML5, CSS3 & JavaScript","datePublished":"2022-10-07T15:46:22+00:00","dateModified":"2022-10-07T16:57:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/"},"wordCount":78,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Drawing-or-Paint-App-in-HTML-CSS-JavaScript-Drawing-App-in-JavaScript.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/","name":"How to Make A Drawing App using HTML5, CSS3 & JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Drawing-or-Paint-App-in-HTML-CSS-JavaScript-Drawing-App-in-JavaScript.jpg","datePublished":"2022-10-07T15:46:22+00:00","dateModified":"2022-10-07T16:57:28+00:00","description":"In this tutorial, I will teach you how to create a drawing app using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript drawing app","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Drawing-or-Paint-App-in-HTML-CSS-JavaScript-Drawing-App-in-JavaScript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Drawing-or-Paint-App-in-HTML-CSS-JavaScript-Drawing-App-in-JavaScript.jpg","width":880,"height":495,"caption":"How to Make A Drawing App using HTML5, CSS3 & JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-drawing-app-using-html5-css3-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Make A Drawing App using HTML5, CSS3 & JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3625"}],"version-history":[{"count":3,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3625\/revisions"}],"predecessor-version":[{"id":3633,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3625\/revisions\/3633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3628"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}