LearnI Don’t Speak Your Language: Frontend vs. Backend

Josh Long
writes on September 25, 2012

Share with your friends


“I Don’t Speak Your Language” is a series of articles designed to give you a quick overview of all of the tech terms in our industry. Knowing these terms will help you in your communications and allow you to build better products more efficiently.

There has been a lot of discussion in the blog comments lately about what constitutes design and development when it comes to the web. I’m trying as best as I can to help you, our dear readers, in your journey to becoming the best web professional you possibly can.

Our goal is to listen to you and create content that is relevant to the discussion and the challenges that you face, so I thought I would take this opportunity to highlight the differences between design and development. My goal here is to lay the foundation for further discussion and see if we can define the lines together.

Free trial on Treehouse: Do you want to learn more about backend and frontend web development? Signup for a free 14-day trial on Treehouse.

The differences between design and development actually lead to more of a discussion around frontend and backend web work. Let’s start with the frontend…

Front End

When we discuss the “frontend” of the web, what we’re really talking about is the part of the web that you can see and interact with. The frontend usually consists of two parts: the web design and front end web development.

In the past when someone discussed development it usually referred to the backend, but in recent years there has been a real need to differentiate between designers that worked strictly in Photoshop and those that could code HTML and CSS. It went even further when designers crossed the lines to working with JavaScript and jQuery.

So now when we discuss the term “web design”, we’re really talking about those that work with Photoshop and Fireworks, and those that code using HTML, CSS, JavaScript or jQuery (it might be important here to state that jQuery is a compiled library of Javascript).

Everything that you see when using the web is a combination of HTML, CSS, and JavaScript all being controlled by your computer’s browser. These include things like fonts, drop-down menus, buttons, transitions, sliders, contact forms, etc.

Now to make all of this become a reality and to store the information that you put in the frontend elements, we need technology to make it happen. Enter the backend…


The backend usually consists of three parts: a server, an application, and a database. If you book a flight or buy concert tickets, you usually open a website and interact with the frontend. Once you’ve entered that information, the application stores it in a database that was created on a server. For sake of ease, just think about a database as a giant Excel spreadsheet on your computer, but your computer (server) is stored somewhere in Arizona.

All of that information stays on the server so when you log back into the application to print your tickets, all of the information is still there in your account.

We call a person that builds all of this technology to work together a backend developer. Backend technologies usually consist of languages like PHP, Ruby, Python, etc. To make them even easier to use they’re usually enhanced by frameworks like Ruby on Rails, Cake PHP, and Code Igniter that all make development faster and easier to collaborate on.

Many web professionals that are just getting into the field may have heard a lot of people talking about WordPress.

32 Responses to “I Don’t Speak Your Language: Frontend vs. Backend”

  1. Totally agree with you Michael..! PHP should be considered front-end..!

  2. Great article Brother! But what am I? I write the html and css using the psd file from my AD, i set up the database and make the site work in both wordpress and umbraco. So Im a front back end developer?? :)

    Thanks for sharing!

  3. David Warner on May 2, 2013 at 4:59 am said:

    Hey Josh this helped to understand these terms.

  4. Warren Spence on May 15, 2013 at 8:46 am said:

    Your blog is really informative gathered with valuable information..thanks for
    sharing these information
    WRS Builder

  5. Tim Morris on June 3, 2013 at 5:57 am said:

    This is an excellent article. Thanks!

  6. Julian on June 11, 2013 at 8:04 am said:

    separation of front end and back end isn’t always black and white – even if conceptually it may be – it may be just easier for every developer on the project to work on their own modules front through back. here is an example of one of our apps youtube.com/webrenovators – the front end and back end both run in the browser as they should and the back end can call optional webservices developed in your preferred language if you need them.

  7. Hi Josh. Thanks for such a structured way of defining Front-end and Back-end roles. Since many are discussing about the thin line of difference between front-end and back-end when it comes to Javascript Frameworks. I am also in confusion to understand whether MVC based JS frameworks like Backbonejs, Angularjs or knockout js should be added in front-end skill set or in back-end? Considering the business logic and MVC architecture, its not that easy for a front-end Dev. to learn it and grasp it quickly as we can do with jQuery(Javascript for showing effects and DOM manipulation). Would you be able to explain me further. As being a front-end Dev., do i need to learn such JS frameworks since it is more related to what we see on Website? (Well then in php development , back-end guys also use a bit of JS for logic and data manipulation.)

  8. Hello Josh, thanks for the great content I found it very helpful. Just a quick question please, I’ve hired a web developer to create my Ecommerce website. He wants me to pay 40% of the total sum for the frontend and 60% once he’s done with the backend. Is this fair?


  9. Which one bring more customers and money ? :)

    • Front end. HTML and CSS are a absolute priority for most business/corporate websites. Most users will rate a site based on design and layout rather than some back-end features. Back end features are just additions to add more functionality.

  10. Ravishankar on August 24, 2015 at 8:50 am said:

    Html5,CSS3,Java script all these languages are enough to become front end developer

  11. hi Josh,

    Which guidelines and steps follows when connecting front-end(with user see and interact ). and back-end asp.net 13 c#(coding), in IT industry?

  12. What’s going on? The article just suddenly ends at “Many web professionals that are just getting into the field may have heard a lot of people talking about WordPress”. Where is the rest?

  13. Cross-browser support doesn’t pose a big challenge to front end coders unless they have to deal with old versions of Internet Explorer. Technology is developing rapidly, while the outdated editions of IE are lagging behind. As a client you sure have the right to demand cross-browser support of your product, but you also need to realize that IE 9, 8 support will take up much more time and as a result money. Read more here: http://lezgro.com/blog/what-can-go-wrong-with-web-front-end/

  14. スーパーコピーブランド格安販売店はこちらへ!品々の激安価格に持ったスーパーコピーブランド 代引きの新作はお客様に提供されます。安心、迅速、確実、お客様の手元にお届け致します。★弊社は9年の豊富な経験と実績を持っております。★一流の素材を選択し、精巧な作り方でまるで本物のようなな製品を造ります。★品質を重視、納期も厳守、お客様第一主義を貫きは当社の方針です。★驚きの低価格で商品をお客様に提供致します!★早速に購入へようこそ!
    ロレックスコピー販売、代引きロレックス時計コピー通販、全て新品、高い品質、激安、送料無料。ロレックス時計コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは 業界で最高な品質に挑戦しますロレックコピー,ロレックコピー代引き,ロレック激安,ロレックス偽物 ,最高級ロレックコピーロレックス時計コピー,フェラーリコピー時計,パネライコピー時計,パテックフィリップコピー時計,ヴァシュロン.コンスタンタンコピー時計,エルメスコピー時計,カルティエコピー時計ルイヴィトンコピー、 ロレックスコピー、シャネルコピー、グッチコピー、エルメスコピー、 ボッテガヴェネタコピー、 バーバリーコピー、ミュウミュウコピー、トリーバーチコピー、バレンシアガコピー、ディオールコピー、ブルガリコピー、ブラダコピー、 ドルチェ&ガッバーナコピー、オメガコピー、フランク ミュラーコピー、gagaコピー。古驰拷贝, 靴/サンダル,サングラスコピー欧米O級品オーダー服各種のブランドの服、靴、、財布、腕時計の複製品をかばん一番ブランドliveブランドコピー服,ブランドバッグコピー,ブランド時計,ブランド靴シリーズ欧米O級品コーナーラッピング用品 http://www.bagkakaku.com/vuitton_belt.html

  15. BVLGARI(バッグ?財布?小物)CHLOE(バッグ?財布、小物)偽物ブランド,激安,コピー?ルイヴィトンバッグ,偽物?ルイヴィトン財布,コピーバッグ,ブランドバッグ,偽物バッグ,偽物シャネルバッグ,偽物エルメスバッグ,偽物グッチバッグ,偽物財布,コピー財布,時計の專門店
    2015ブランド財布コピールイヴィトン財布コピー,シャネル財布コピー,グッチ財布コピー,エルメス財布コピークロエ財布コピー,ブラダ財布コピー,ブルガリ財布コピー,ドルチェ&ガッバ―ナ財布コピーバレンシアガ財布コピー,ボッテガ.ヴェネタ財布コピーロレックス時計コピー,ブルガリ時計コピー,フランク ミュラー時計コピーシャネル時計コピー,カルティエ時計コピー_オメガ時計コピー,IWC時計コピールイヴィトン時計コピー,オーデマ ピゲ時計コピー,ブライトリング時計コピーコピーブランド、ブランド激安、人気ブランドの販売、通販、オークション、新作のスーパーコピーブランドコピー、韓国スーパーコピー、ブランド激安、偽物ブランド、ブランドバッグ、激安かばん、ルイヴィトン偽物、財布激安.商品は全く写真の通りです。 http://www.msnbrand.com/brand-copy-IP-33.html

  16. 日本ロレックス時計コピー品ロレックスレプリカ、日本ロレックス時計のロレックスコピー品ロレックス時計,ロレックスレプリカ,ロレックスコピー,日本ロレックス,ROLEX,ロレックスオーバーホール,ロレックスレプリカ ,ロレックス修理,ロレックスミルガウス,ロレックス中古,ロレックスサブマリーナ,ロレックスデイトナ,ロレックス中古,ロレックスアンティーク,ロレックス買取”弊社はROLEXの商品特に大人気のロレックスデイトナシリーズのロレックス時計の種類を豊富に取り揃えます。日本ロレックス時計とロレックスレプリカのロレックスコピー品の品質よくて、激安税込み価格でご提供します。
    BVLGARI(バッグ?財布?小物)CHLOE(バッグ?財布、小物)偽物ブランド,激安,コピー?ルイヴィトンバッグ,偽物?ルイヴィトン財布,コピーバッグ,ブランドバッグ,偽物バッグ,偽物シャネルバッグ,偽物エルメスバッグ,偽物グッチバッグ,偽物財布,コピー財布,時計の專門店 http://www.brandiwc.com/brand-4-copy-0.html

  17. Ck Kennedy on November 26, 2015 at 9:55 pm said:

    I am to learn web designing so that I can expand my boundaries in graphic design. If I am to be a Front End developer should I start with knowing mastering the Back End developing or which one first?

    • Madam craiz on December 19, 2015 at 9:49 am said:

      Graphic design? just focus on front end theres alooot there trust me

      • Mada craiz on December 19, 2015 at 9:51 am said:

        Ouch… name is Mada Craiz not Madam

      • Alena on May 3, 2016 at 4:16 pm said:

        It is a thing of past that graphic designer knows programming. There is too much to cover in building websites now that GD would come before front end developer. Otherwise you are the developer not graphic designer. Or GD will make a design in photoshop and Developer takes it from there. But in most cases developers are pretty good even in designing.

  18. Audrey Hardou on December 16, 2015 at 8:27 am said:

    Thank you very much for this very much clear picture of the situation!

  19. Hi
    Thanks for the article.
    I’ve a question with no answer for it.
    As I read front-end job ads none of them mentioned the design skills, like Photoshop or Illustrator. I wonder does a front-end web developer just do the code part or he/she needs to do the design part too?

  20. does web hosting is mentioned here as back end??

  21. The real question is how would you classify Neo?

Leave a Reply

Want to learn more about HTML?

HTML is what the Internet is built on. Learn how to build your first website from scratch.

Learn more