{"id":10001,"date":"2019-11-06T16:18:41","date_gmt":"2019-11-06T21:18:41","guid":{"rendered":"https:\/\/blog.brainstation.io\/?p=10001"},"modified":"2020-11-03T15:57:31","modified_gmt":"2020-11-03T20:57:31","slug":"what-is-front-end-development","status":"publish","type":"post","link":"https:\/\/brainstation.io\/blog\/what-is-front-end-development","title":{"rendered":"What is Front-End Development?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Visit any website or blog and you\u2019ll see a combination of text, menus, buttons, and sidebars that help make it easy to navigate.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These parts of a website<\/span><span style=\"font-weight: 400;\"> \u2013 e<\/span><span style=\"font-weight: 400;\">verything you can see and interact with <\/span><span style=\"font-weight: 400;\">\u2013 <\/span><span style=\"font-weight: 400;\">are examples of what\u2019s called front-end development.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Front-end development is often called \u201cclient-side development\u201d because it refers to everything that the user (the client) can see. Let\u2019s take a closer look at the role of a Front-End Developer.&nbsp;<\/span><\/p>\n<h2><b>What Does a Front-End Developer Do?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Because front-end development is responsible for what you can see on a website, it\u2019s often confused with web design. Although Front-End Developers don\u2019t design websites, they are the link between design and technology that can turn an idea into an interactive web page.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are some of the basic tasks that a Front-End Developer may be responsible for:&nbsp;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Working with Graphic, User Experience, or Web Designers to help ensure design ideas can be made into a website that is easy to use <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Transforming design (sketches or wireframes for a website) into code that a web browser can read and display on your screen <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Structuring a website so that it is easy to find through a search engine (this is part of Search Engine Optimization or SEO)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Developing websites that work and look good on any screen, from 24-inch computer monitors to five-inch smartphone screens (this is called responsive design)<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Testing websites and fixing bugs or other issues&nbsp;<\/span><\/li>\n<\/ul>\n<h2><b>Front-End Coding Languages&nbsp;<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Writing code is the main part of a front-end developer\u2019s job. There are three coding languages commonly used in front-end development: HTML, CSS, and JavaScript.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HTML, CSS, and JavaScript are the basic building blocks of every website, and Front-End Developers spend most of their time sourcing, writing, and editing these coding languages. Since every website starts with one or more of these coding languages, Front-End Developers can often use pre-existing code to get started on a project.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s take a closer look at these languages and frameworks:&nbsp;<\/span><\/p>\n<h2><b>HTML and CSS<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are what you would call the basic building blocks of programming. Before you can start a career in web development, you will have to master both of these languages. It should be said, though, that these are independent of each other.&nbsp; HTML gives content structure by defining that content into headings, paragraphs, or images. CSS, meanwhile, is used to style the appearance of content, with, for example, fonts and colors.<\/span><\/p>\n<div class=\"lead-grid-container\">\n<div class=\"lead__card\">\n<div class=\"lead__image\"><img decoding=\"async\" class=\"hide--mobile\" src=\"https:\/\/brainstation.io\/blog\/wp-content\/uploads\/2020\/03\/Dev-2.jpg\" alt=\"Icon\"><\/div>\n<div class=\"lead__content\">\n<p id=\"lead__heading\" class=\"heading--4\">Learn web development skills to boost your career \u2013 from home!<\/p>\n<p class=\"lead__description\">BrainStation offers <a href=\"https:\/\/brainstation.io\/online-live?utm_source=Blog&amp;utm_medium=BlogPost&amp;utm_campaign=blogLead\" target=\"_blank\" rel=\"noopener noreferrer\">Online Live Certificate Courses<\/a> in web development, python programming, iOS development, and machine learning. Attend live classes and interact with peers and expert Instructors from anywhere in the world.<\/p>\n<p id=\"lead__button--margin\"><a id=\"lead__button--hover\" class=\"lead__button\" href=\"https:\/\/brainstation.io\/book-call?utm_source=Blog&amp;utm_medium=BlogPost&amp;utm_campaign=blogLead\" target=\"_blank\" rel=\"noopener noreferrer\">Speak to a Learning Advisor<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><b>JavaScript<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">JavaScript is a programming language that allows you to add functionality and complexity to a site. When you see things like real-time content updates, interactive maps, animated graphics, and video elements, JavaScript is usually involved. For this reason, JavaScript can be seen as a third layer (the icing perhaps) of a layer cake of web technology, with HTML and CSS providing the foundations.&nbsp;<\/span><\/p>\n<h2><b><\/b><b>JavaScript Frameworks<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">JS frameworks (including ReactJS, AngularJS, Backbone, and Ember, among others) provide a structure for JavaScript code. Frameworks are often used with libraries like jQuery to minimize initial programming work.<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">Want to learn more? BrainStation offers <\/span><\/i><a href=\"https:\/\/brainstation.io\/courses#development,on-campus\"><i><span style=\"font-weight: 400;\">Web Development Certificate Courses<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> taught by industry-leading professionals.&nbsp;<\/span><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Front-end development is often called \u201cclient-side development\u201d because it refers to everything that the user (the client) can see.<\/p>\n","protected":false},"author":7,"featured_media":10003,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1066,97],"tags":[771,100],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is Front-End Development? | BrainStation\u00ae Blog<\/title>\n<meta name=\"description\" content=\"Front-end development is often called \u201cclient-side development\u201d because it refers to everything that the user (the client) can see.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brainstation.io\/blog\/what-is-front-end-development\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Front-End Development? | BrainStation\u00ae Blog\" \/>\n<meta property=\"og:description\" content=\"Front-end development is often called \u201cclient-side development\u201d because it refers to everything that the user (the client) can see.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brainstation.io\/blog\/what-is-front-end-development\" \/>\n<meta property=\"og:site_name\" content=\"BrainStation\u00ae Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-06T21:18:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-03T20:57:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1163758428.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2121\" \/>\n\t<meta property=\"og:image:height\" content=\"1414\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"BrainStation\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/brainstation.io\/blog\/#website\",\"url\":\"https:\/\/brainstation.io\/blog\/\",\"name\":\"BrainStation\u00ae Blog\",\"description\":\"The Digital Learning Company\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/brainstation.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/brainstation.io\/blog\/what-is-front-end-development#primaryimage\",\"url\":\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1163758428.jpg\",\"contentUrl\":\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1163758428.jpg\",\"width\":2121,\"height\":1414,\"caption\":\"Front-end development\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brainstation.io\/blog\/what-is-front-end-development#webpage\",\"url\":\"https:\/\/brainstation.io\/blog\/what-is-front-end-development\",\"name\":\"What is Front-End Development? | BrainStation\u00ae Blog\",\"isPartOf\":{\"@id\":\"https:\/\/brainstation.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brainstation.io\/blog\/what-is-front-end-development#primaryimage\"},\"datePublished\":\"2019-11-06T21:18:41+00:00\",\"dateModified\":\"2020-11-03T20:57:31+00:00\",\"author\":{\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11\"},\"description\":\"Front-end development is often called \u201cclient-side development\u201d because it refers to everything that the user (the client) can see.\",\"breadcrumb\":{\"@id\":\"https:\/\/brainstation.io\/blog\/what-is-front-end-development#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brainstation.io\/blog\/what-is-front-end-development\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brainstation.io\/blog\/what-is-front-end-development#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/brainstation.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is Front-End Development?\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11\",\"name\":\"BrainStation\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g\",\"caption\":\"BrainStation\"},\"description\":\"BrainStation is a global leader in digital skills training, empowering businesses and brands to succeed in the digital age. Established in 2012, BrainStation has worked with over 250 instructors from the most innovative companies, developing cutting-edge, real-world digital education that has empowered more than 50,000 professionals and some of the largest corporations in the world.\",\"url\":\"https:\/\/brainstation.io\/blog\/author\/brainstation\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is Front-End Development? | BrainStation\u00ae Blog","description":"Front-end development is often called \u201cclient-side development\u201d because it refers to everything that the user (the client) can see.","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:\/\/brainstation.io\/blog\/what-is-front-end-development","og_locale":"en_US","og_type":"article","og_title":"What is Front-End Development? | BrainStation\u00ae Blog","og_description":"Front-end development is often called \u201cclient-side development\u201d because it refers to everything that the user (the client) can see.","og_url":"https:\/\/brainstation.io\/blog\/what-is-front-end-development","og_site_name":"BrainStation\u00ae Blog","article_published_time":"2019-11-06T21:18:41+00:00","article_modified_time":"2020-11-03T20:57:31+00:00","og_image":[{"width":2121,"height":1414,"url":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1163758428.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"BrainStation","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/brainstation.io\/blog\/#website","url":"https:\/\/brainstation.io\/blog\/","name":"BrainStation\u00ae Blog","description":"The Digital Learning Company","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brainstation.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brainstation.io\/blog\/what-is-front-end-development#primaryimage","url":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1163758428.jpg","contentUrl":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1163758428.jpg","width":2121,"height":1414,"caption":"Front-end development"},{"@type":"WebPage","@id":"https:\/\/brainstation.io\/blog\/what-is-front-end-development#webpage","url":"https:\/\/brainstation.io\/blog\/what-is-front-end-development","name":"What is Front-End Development? | BrainStation\u00ae Blog","isPartOf":{"@id":"https:\/\/brainstation.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brainstation.io\/blog\/what-is-front-end-development#primaryimage"},"datePublished":"2019-11-06T21:18:41+00:00","dateModified":"2020-11-03T20:57:31+00:00","author":{"@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11"},"description":"Front-end development is often called \u201cclient-side development\u201d because it refers to everything that the user (the client) can see.","breadcrumb":{"@id":"https:\/\/brainstation.io\/blog\/what-is-front-end-development#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brainstation.io\/blog\/what-is-front-end-development"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/brainstation.io\/blog\/what-is-front-end-development#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/brainstation.io\/blog"},{"@type":"ListItem","position":2,"name":"What is Front-End Development?"}]},{"@type":"Person","@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11","name":"BrainStation","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g","caption":"BrainStation"},"description":"BrainStation is a global leader in digital skills training, empowering businesses and brands to succeed in the digital age. Established in 2012, BrainStation has worked with over 250 instructors from the most innovative companies, developing cutting-edge, real-world digital education that has empowered more than 50,000 professionals and some of the largest corporations in the world.","url":"https:\/\/brainstation.io\/blog\/author\/brainstation"}]}},"_links":{"self":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/10001"}],"collection":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/comments?post=10001"}],"version-history":[{"count":6,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/10001\/revisions"}],"predecessor-version":[{"id":12167,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/10001\/revisions\/12167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/media\/10003"}],"wp:attachment":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/media?parent=10001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/categories?post=10001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/tags?post=10001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}