{"id":3609,"date":"2022-10-07T19:02:00","date_gmt":"2022-10-07T14:02:00","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3609"},"modified":"2022-10-08T12:52:40","modified_gmt":"2022-10-08T07:52:40","slug":"how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/","title":{"rendered":"How to Make Google Translate Clone With Text to Speech in HTML5 CSS3 & JavaScript"},"content":{"rendered":"\n

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

Google Translate Clone HTML5, CSS3, JavaScript Source Code<\/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>Language Translator<\/title>\n    <link rel="stylesheet" href="style.css">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <!-- Font Awesome CDN Link for Icons -->\n    <link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css"\/>\n  <\/head>\n  <body>\n    <div class="container">\n      <div class="wrapper">\n        <div class="text-input">\n          <textarea spellcheck="false" class="from-text" placeholder="Enter text"><\/textarea>\n          <textarea spellcheck="false" readonly disabled class="to-text" placeholder="Translation"><\/textarea>\n        <\/div>\n        <ul class="controls">\n          <li class="row from">\n            <div class="icons">\n              <i id="from" class="fas fa-volume-up"><\/i>\n              <i id="from" class="fas fa-copy"><\/i>\n            <\/div>\n            <select><\/select>\n          <\/li>\n          <li class="exchange"><i class="fas fa-exchange-alt"><\/i><\/li>\n          <li class="row to">\n            <select><\/select>\n            <div class="icons">\n              <i id="to" class="fas fa-volume-up"><\/i>\n              <i id="to" class="fas fa-copy"><\/i>\n            <\/div>\n          <\/li>\n        <\/ul>\n      <\/div>\n      <button>Translate Text<\/button>\n    <\/div>\n\n    <script src="js\/countries.js"><\/script>\n    <script src="js\/script.js"><\/script>\n\n  <\/body>\n<\/html><\/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;700&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  padding: 0 10px;\n  min-height: 100vh;\n  background: #5372F0;\n}\n.container{\n  max-width: 690px;\n  width: 100%;\n  padding: 30px;\n  background: #fff;\n  border-radius: 7px;\n  box-shadow: 0 10px 20px rgba(0,0,0,0.01);\n}\n.wrapper{\n  border-radius: 5px;\n  border: 1px solid #ccc;\n}\n.wrapper .text-input{\n  display: flex;\n  border-bottom: 1px solid #ccc;\n}\n.text-input .to-text{\n  border-radius: 0px;\n  border-left: 1px solid #ccc;\n}\n.text-input textarea{\n  height: 250px;\n  width: 100%;\n  border: none;\n  outline: none;\n  resize: none;\n  background: none;\n  font-size: 18px;\n  padding: 10px 15px;\n  border-radius: 5px;\n}\n.text-input textarea::placeholder{\n  color: #b7b6b6;\n}\n.controls, li, .icons, .icons i{\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.controls{\n  list-style: none;\n  padding: 12px 15px;\n}\n.controls .row .icons{\n  width: 38%;\n}\n.controls .row .icons i{\n  width: 50px;\n  color: #adadad;\n  font-size: 14px;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n  justify-content: center;\n}\n.controls .row.from .icons{\n  padding-right: 15px;\n  border-right: 1px solid #ccc;\n}\n.controls .row.to .icons{\n  padding-left: 15px;\n  border-left: 1px solid #ccc;\n}\n.controls .row select{\n  color: #333;\n  border: none;\n  outline: none;\n  font-size: 18px;\n  background: none;\n  padding-left: 5px;\n}\n.text-input textarea::-webkit-scrollbar{\n  width: 4px;\n}\n.controls .row select::-webkit-scrollbar{\n  width: 8px;\n}\n.text-input textarea::-webkit-scrollbar-track,\n.controls .row select::-webkit-scrollbar-track{\n  background: #fff;\n}\n.text-input textarea::-webkit-scrollbar-thumb{\n  background: #ddd;\n  border-radius: 8px;\n}\n.controls .row select::-webkit-scrollbar-thumb{\n  background: #999;\n  border-radius: 8px;\n  border-right: 2px solid #ffffff;\n}\n.controls .exchange{\n  color: #adadad;\n  cursor: pointer;\n  font-size: 16px;\n  transition: transform 0.2s ease;\n}\n.controls i:active{\n  transform: scale(0.9);\n}\n.container button{\n  width: 100%;\n  padding: 14px;\n  outline: none;\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  margin-top: 20px;\n  font-size: 17px;\n  border-radius: 5px;\n  background: #5372F0;\n}\n\n@media (max-width: 660px){\n  .container{\n    padding: 20px;\n  }\n  .wrapper .text-input{\n    flex-direction: column;\n  }\n  .text-input .to-text{\n    border-left: 0px;\n    border-top: 1px solid #ccc;\n  }\n  .text-input textarea{\n    height: 200px;\n  }\n  .controls .row .icons{\n    display: none;\n  }\n  .container button{\n    padding: 13px;\n    font-size: 16px;\n  }\n  .controls .row select{\n    font-size: 16px;\n  }\n  .controls .exchange{\n    font-size: 14px;\n  }\n}<\/pre><\/div>\n\n\n\n
js\/countries.js<\/h3>\n\n\n\n
const countries = {\n    "am-ET": "Amharic",\n    "ar-SA": "Arabic",\n    "be-BY": "Bielarus",\n    "bem-ZM": "Bemba",\n    "bi-VU": "Bislama",\n    "bjs-BB": "Bajan",\n    "bn-IN": "Bengali",\n    "bo-CN": "Tibetan",\n    "br-FR": "Breton",\n    "bs-BA": "Bosnian",\n    "ca-ES": "Catalan",\n    "cop-EG": "Coptic",\n    "cs-CZ": "Czech",\n    "cy-GB": "Welsh",\n    "da-DK": "Danish",\n    "dz-BT": "Dzongkha",\n    "de-DE": "German",\n    "dv-MV": "Maldivian",\n    "el-GR": "Greek",\n    "en-GB": "English",\n    "es-ES": "Spanish",\n    "et-EE": "Estonian",\n    "eu-ES": "Basque",\n    "fa-IR": "Persian",\n    "fi-FI": "Finnish",\n    "fn-FNG": "Fanagalo",\n    "fo-FO": "Faroese",\n    "fr-FR": "French",\n    "gl-ES": "Galician",\n    "gu-IN": "Gujarati",\n    "ha-NE": "Hausa",\n    "he-IL": "Hebrew",\n    "hi-IN": "Hindi",\n    "hr-HR": "Croatian",\n    "hu-HU": "Hungarian",\n    "id-ID": "Indonesian",\n    "is-IS": "Icelandic",\n    "it-IT": "Italian",\n    "ja-JP": "Japanese",\n    "kk-KZ": "Kazakh",\n    "km-KM": "Khmer",\n    "kn-IN": "Kannada",\n    "ko-KR": "Korean",\n    "ku-TR": "Kurdish",\n    "ky-KG": "Kyrgyz",\n    "la-VA": "Latin",\n    "lo-LA": "Lao",\n    "lv-LV": "Latvian",\n    "men-SL": "Mende",\n    "mg-MG": "Malagasy",\n    "mi-NZ": "Maori",\n    "ms-MY": "Malay",\n    "mt-MT": "Maltese",\n    "my-MM": "Burmese",\n    "ne-NP": "Nepali",\n    "niu-NU": "Niuean",\n    "nl-NL": "Dutch",\n    "no-NO": "Norwegian",\n    "ny-MW": "Nyanja",\n    "ur-PK": "Pakistani",\n    "pau-PW": "Palauan",\n    "pa-IN": "Panjabi",\n    "ps-PK": "Pashto",\n    "pis-SB": "Pijin",\n    "pl-PL": "Polish",\n    "pt-PT": "Portuguese",\n    "rn-BI": "Kirundi",\n    "ro-RO": "Romanian",\n    "ru-RU": "Russian",\n    "sg-CF": "Sango",\n    "si-LK": "Sinhala",\n    "sk-SK": "Slovak",\n    "sm-WS": "Samoan",\n    "sn-ZW": "Shona",\n    "so-SO": "Somali",\n    "sq-AL": "Albanian",\n    "sr-RS": "Serbian",\n    "sv-SE": "Swedish",\n    "sw-SZ": "Swahili",\n    "ta-LK": "Tamil",\n    "te-IN": "Telugu",\n    "tet-TL": "Tetum",\n    "tg-TJ": "Tajik",\n    "th-TH": "Thai",\n    "ti-TI": "Tigrinya",\n    "tk-TM": "Turkmen",\n    "tl-PH": "Tagalog",\n    "tn-BW": "Tswana",\n    "to-TO": "Tongan",\n    "tr-TR": "Turkish",\n    "uk-UA": "Ukrainian",\n    "uz-UZ": "Uzbek",\n    "vi-VN": "Vietnamese",\n    "wo-SN": "Wolof",\n    "xh-ZA": "Xhosa",\n    "yi-YD": "Yiddish",\n    "zu-ZA": "Zulu"\n}<\/pre><\/div>\n\n\n\n
js\/script.js<\/h3>\n\n\n\n
const fromText = document.querySelector(".from-text"),\ntoText = document.querySelector(".to-text"),\nexchageIcon = document.querySelector(".exchange"),\nselectTag = document.querySelectorAll("select"),\nicons = document.querySelectorAll(".row i");\ntranslateBtn = document.querySelector("button"),\n\nselectTag.forEach((tag, id) => {\n    for (let country_code in countries) {\n        let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : "";\n        let option = `<option ${selected} value="${country_code}">${countries[country_code]}<\/option>`;\n        tag.insertAdjacentHTML("beforeend", option);\n    }\n});\n\nexchageIcon.addEventListener("click", () => {\n    let tempText = fromText.value,\n    tempLang = selectTag[0].value;\n    fromText.value = toText.value;\n    toText.value = tempText;\n    selectTag[0].value = selectTag[1].value;\n    selectTag[1].value = tempLang;\n});\n\nfromText.addEventListener("keyup", () => {\n    if(!fromText.value) {\n        toText.value = "";\n    }\n});\n\ntranslateBtn.addEventListener("click", () => {\n    let text = fromText.value.trim(),\n    translateFrom = selectTag[0].value,\n    translateTo = selectTag[1].value;\n    if(!text) return;\n    toText.setAttribute("placeholder", "Translating...");\n    let apiUrl = `https:\/\/api.mymemory.translated.net\/get?q=${text}&langpair=${translateFrom}|${translateTo}`;\n    fetch(apiUrl).then(res => res.json()).then(data => {\n        toText.value = data.responseData.translatedText;\n        data.matches.forEach(data => {\n            if(data.id === 0) {\n                toText.value = data.translation;\n            }\n        });\n        toText.setAttribute("placeholder", "Translation");\n    });\n});\n\nicons.forEach(icon => {\n    icon.addEventListener("click", ({target}) => {\n        if(!fromText.value || !toText.value) return;\n        if(target.classList.contains("fa-copy")) {\n            if(target.id == "from") {\n                navigator.clipboard.writeText(fromText.value);\n            } else {\n                navigator.clipboard.writeText(toText.value);\n            }\n        } else {\n            let utterance;\n            if(target.id == "from") {\n                utterance = new SpeechSynthesisUtterance(fromText.value);\n                utterance.lang = selectTag[0].value;\n            } else {\n                utterance = new SpeechSynthesisUtterance(toText.value);\n                utterance.lang = selectTag[1].value;\n            }\n            speechSynthesis.speak(utterance);\n        }\n    });\n});<\/pre><\/div>\n\n\n\n
\n\n\n\n
Project Screenshot<\/h2>\n\n\n\n
\"Language
Language Translator App in HTML CSS & JavaScript<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you how to create a Google Translate Clone App using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Language Translator App is given below. Google Translate Clone HTML5, CSS3, JavaScript Source Code index.html style.css js\/countries.js js\/script.js Project Screenshot<\/p>\n","protected":false},"author":1,"featured_media":3683,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3609","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"\nHow to Make Google Translate Clone With Text to Speech in HTML5 CSS3 & JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you how to create a Google Translate Clone App using HTML5, CSS3, and JavaScript. The complete source code of\" \/>\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-google-translate-clone-with-text-to-speech-in-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 Google Translate Clone With Text to Speech in HTML5 CSS3 & JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you how to create a Google Translate Clone App using HTML5, CSS3, and JavaScript. The complete source code of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-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-07T14:02:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-08T07:52:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Language-Translator-App-in-HTML-CSS-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=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make Google Translate Clone With Text to Speech in HTML5 CSS3 & JavaScript","description":"In this tutorial, I will teach you how to create a Google Translate Clone App using HTML5, CSS3, and JavaScript. The complete source code of","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-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Google Translate Clone With Text to Speech in HTML5 CSS3 & JavaScript","og_description":"In this tutorial, I will teach you how to create a Google Translate Clone App using HTML5, CSS3, and JavaScript. The complete source code of","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T14:02:00+00:00","article_modified_time":"2022-10-08T07:52:40+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Language-Translator-App-in-HTML-CSS-JavaScript.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Make Google Translate Clone With Text to Speech in HTML5 CSS3 & JavaScript","datePublished":"2022-10-07T14:02:00+00:00","dateModified":"2022-10-08T07:52:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/"},"wordCount":77,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Language-Translator-App-in-HTML-CSS-JavaScript.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/","name":"How to Make Google Translate Clone With Text to Speech in HTML5 CSS3 & JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Language-Translator-App-in-HTML-CSS-JavaScript.jpg","datePublished":"2022-10-07T14:02:00+00:00","dateModified":"2022-10-08T07:52:40+00:00","description":"In this tutorial, I will teach you how to create a Google Translate Clone App using HTML5, CSS3, and JavaScript. The complete source code of","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-html5-css3-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Language-Translator-App-in-HTML-CSS-JavaScript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Language-Translator-App-in-HTML-CSS-JavaScript.jpg","width":880,"height":495,"caption":"How to Make Google Translate Clone With Text to Speech in HTML5 CSS3 & JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-google-translate-clone-with-text-to-speech-in-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 Google Translate Clone With Text to Speech in 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:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","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\/3609","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=3609"}],"version-history":[{"count":6,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3609\/revisions"}],"predecessor-version":[{"id":3690,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3609\/revisions\/3690"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3683"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}