<p>Students need at least a cursory understanding of how web pages are built before moving to the back end. </p>

<p>Last year we did a project where there were groups split into front end design, front end JS, and backend PHP. The JS and PHP groups weren't able to get started without going back and learning the very basics of HTML. </p>

<p>If it were me, I'd probably start with basic HTML and CSS and then go to JS to make something interactive and shiny. </p>

CC BY-SA 3.0
2017-05-23T19:40:45.257Z
What about an API?
thesecretmaster
CC BY-SA 3.0
2017-05-23T19:49:47.023Z
@thesecretmaster That'd be cool, but I think they might struggle with the purpose without some understanding on front end stuff. Although I have been trying to come up with a project to use https://deckofcardsapi.com/ . There's got to be something there.
Ryan Nutt
CC BY-SA 3.0
2017-05-23T19:40:00.267Z
2017-05-23T19:40:00.267Z
Ryan Nutt
<p>There are already answers here. I will add a contrary one, as this point of view is missing.</p>

<p>When designing a program, the best ones are the ones where the business logic was designed first. Therefore it is better to design the back-end first. That is get all the processing done. Then output the data, possibly in json. Then think about how it will be displayed to the user; How the back-end will output html.</p>

<p>However as other answers have pointed out, it will probably be better to learn the front-end stuff first. </p>

<p>Therefore, one possible approach could be:</p>

<ul>
<li>Learn front-end: html, css, js</li>
<li>Learn json, back-back-end</li>
<li>Create back-end that emits json</li>
<li>Learn json → html transformation</li>
<li>Add transformations to project</li>
<li>Add some css to project</li>
<li>Add some js to project</li>
</ul>

<p>These last 3 steps also allow you to revisit front-end development, and see how this fits into back-end.</p>

CC BY-SA 3.0
2017-09-04T10:06:44.113Z
2017-09-04T10:06:44.113Z
ctrl-alt-delor
<p>I'll probably elaborate more on this in a blog post at some point but I usually do the following:</p>

<ul>
<li>Simple HTML (load from file, no styling)</li>
<li>Simple baclend - I usually use Flask</li>
<li>More backend

<ul>
<li>templates</li>
<li>programatically making a web page</li>
<li>simple forms (GET/POST)</li>
<li>Sessions</li>
</ul></li>
<li>Styling on the front end</li>
<li>Using Web APIS</li>
<li>Databases</li>
<li>Simple JS</li>
<li>A whole lot more front end combined with functional JS</li>
</ul>

CC BY-SA 3.0
2017-06-23T19:35:16.773Z
2017-06-23T19:35:16.773Z
Mike Zamansky
<p>True full stack from the base install of an OS with an IP address up to the next StackExchange?  Multiple classes.. HTML+CSS is always first, then Linux Admin, Back End Coding, and Pure SQL. Only order requirement with the last 3 is that Pure SQL has to be done before Back End Coding, but some of the Linux admin stuff could help with solving issues OR using neat new and exciting stuff when it comes to the back end....</p>

<ul>
<li>HTML+CSS+Javascript+ styling stuff like jquery and bootstrap and such</li>
<li>Pure SQL class - mysql-workbench+mysql server or similar, nothing but
queries from simple selects up to complex joins, how data relates,
good db design, etc.  If possible, some info on basic server
management - managing rights and users on the sql-server level (not
host OS level), backups, restoring backups, exporting/importing
databases, etc.</li>
<li>Linux Administration for LAMP stack, ROR stack, whatever platform you are teaching to.  Installing the system and services, configuring them, backing them up, mail, dns, webserver, etc.  Use freely available materials and have the students spend their "book money" on a \$5 per month linode and a \$12/year domain.</li>
<li>The back end programming - PHP+SQL, ROR, etc.</li>
</ul>

CC BY-SA 3.0
2017-06-24T00:47:15.170Z
2017-06-24T00:47:15.170Z
ivanivan
<p>Client side first allows students to get simple stuff running using a smaller number of required concepts and steps.  So it's probably a lower cognitive load to getting most people started.</p>

CC BY-SA 3.0
2017-05-23T16:19:14.620Z
2017-05-23T16:19:14.620Z
hotpaw2
<p>I would definitely start with front-end.  It's possible to avoid many of the warts of javascript by using ECMA6 or only teaching small pieces of the language.  For example, loops and if statements are sane in JS--you don't have to show them the weirdness with == vs. ===.</p>

<p>Another reason to start with front-end is that modifying pages by editing the DOM is significantly easier than spitting out html with mark-up in it.</p>

CC BY-SA 3.0
2017-07-01T04:40:49.623Z
One rarely spits out HTML directly with modern frameworks. More frequently, the html is stored in resource files (jsp, asp, xml, etc) and the framework merges the parameters with the resources to produce HTML. It is poor practice to embed HTML in your application code.
pojo-guy
CC BY-SA 3.0
2017-05-23T16:04:50.637Z
2017-05-23T16:04:50.637Z
adamblan
<p>The title here almost feels like a trick question to me. Not that it's intentionally trying to mess with people, but "which one first" is a bit of a false dichotomy.</p>

<p>This is a somewhat unfortunate example, but it's the one I was reminded of. Long, long ago, in the ancient history of Stack Overflow, there was a... kinda rude and presumptuous question about a web developer who didn't understand that the web involves separate server and client machines. If you have 10k rep on Meta Stack Exchange, you can still see it: <a href="https://meta.stackexchange.com/questions/41660/convincing-a-stack-overflow-user-to-switch-careers">MSE post 41660</a>.</p>

<p>Granted, to be ultra-pedantic, you can't physically teach two concepts simultaneously, so <em>technically</em> either front-end or back-end will have to be first lesson. But as a practical matter, for all intents and purposes, the two topics go hand-in-hand. Teaching only one and not the other for any significant length of time may have some use, but I wouldn't call it web development.</p>

<p>More recently, I have seen front-end vs. back-end start to be replaced by top-down vs. bottom-up, which I have to say I prefer. In short, "bottom-up" would be "here's what the OSI stack is, these are the protocols the Internet uses, you can set up off-the-shelf software like Ruby on Rails to handle a lot of the underlying stuff for you and then write your logic in Ruby and presentation in HTML/CSS." Top-down is just the reverse of that. It's like when you start someone with "Hello, world!" in Java, and tell them to blindly copy <code>System.out.println("Hello, world!");</code> but not to worry about what <code>System</code> or <code>out</code> mean for the first few lessons.</p>

<p>To be fair, my more recent experiences have been with more advanced students, not intro high school or college students without any prior experience. But I still believe in my fundamental point: you can't show people only half of a picture (even if you add the other half in later) and expect them to absorb its full value.</p>

<p>As for your JavaScript comment, it's been a few years since the last time I cracked it open, but I'd recommend giving <em>JavaScript: The Good Parts</em> a read. It's by Douglas Crockford himself, and under 150 pages long.</p>

CC BY-SA 3.0
2017-06-23T19:07:56.143Z
2017-06-23T19:07:56.143Z
Piyush Parikh
<h1>Front end</h1>
<p>First teach HTML along with inline styles(it is a bad practice though).</p>
<p>Because it is very less strict in syntax. You can skip the <code>&lt;head&gt;</code> tag or anything even if you didn't closed the <code>&lt;body&gt;</code> at bottom it show the desired output.(It is a bad practise though)</p>
<p>So, when you introduce such a language to students, they will wonder because even if they did some mistake, they got output. So they have much more interest to learn HTML.</p>
<p>Then introduce them CSS and ask to stop using inline styles.</p>
<p>in HTML itself, we are using some styles like <code>height=</code> and so on. Introduce them CSS and ask to change such styles to CSS (for example <code>height:</code>).</p>
<p>Also introduce some good tricks like transforms.</p>
<h3>Then show them some templates / themes</h3>
<p>I suggest show some themes from themeforest or some site and say they all build using HTML and CSS. So, they are much more interested in learning this.</p>
<p>Then give a them an intro to JavaScript</p>
<p>Saying JavaScript is an essential part of Web Designing. Many Libraries like jQuery and packages like Node JS are using JavaScript.</p>
<h2>I would like to quote a good word from my tutor</h2>
<p>Before that, I know only PHP, HTML and CSS. I didn't knew JS much. In my college, my tutor once told in class that the structure of JS function names are</p>
<blockquote>
<p>If the function name consist of more than one words, then the first word should start with lower case and remaining words should start with upper case.</p>
</blockquote>
<p>Example</p>
<pre><code>getElementById
   ^      ^ ^
querySelectorAll
     ^       ^
</code></pre>
<p>That give me a clear idea on JavaScript and at present, I am working on a Front End Developer.</p>
<p>So the order comes from Easy HTML -&gt; Medium CSS -&gt; Little tough JS</p>
<h1>Then Server side</h1>
<p>PHP is a very easy server side scripting language to learn when comparing with JSP, ASP and NodeJS.</p>
<p>Teach PHP first (the basic arithmetic, logical, string and such operations).</p>
<p>Then teach PHP mysql interaction(Don't use the deprecated <code>mysqli</code> function).</p>
<p>Then teach them the language you are supposed to teach(ASP or JSP or NodeJS or Ruby or Python or whatever it is) as suggested by the Institution.</p>
<p>Finally, introduce them plugins in front end and frameworks in back end by saying that <strong>Now you have a base on everything. There are plugins which help you to do all the tasks</strong>.</p>
<h3>Note:</h3>
<p>Don't introduce plugins first. It may destroy their skills.</p>
<p>If a plugin is deprecated and if they didn't have enough experience or knowledge in it's base language, they will suffer a lot to migrate.</p>

CC BY-SA 3.0
2017-06-24T05:50:50.460Z
@Aurora0001 I think I did. Please point out if I missed something.
i--
CC BY-SA 3.0
2017-06-24T08:49:34.390Z
This is a fantastic answer now, thanks. Great edit!
Aurora0001
CC BY-SA 3.0
2017-09-04T10:10:21.717Z
Values should be a noun, except booleans that should be an adjective. `get` is a verb. (Would you ever ask someone “What is your get height?”?)
ctrl-alt-delor
CC BY-SA 3.0
2017-06-23T18:12:50.570Z
2017-06-24T05:50:25.377Z
2020-06-18T08:36:57.023Z
i--
<p>I'd like to summarize a few of the answers already given by suggesting a general framework for such "chicken and egg" problems. You have two things to teach that are closely related but different. You can't <em>really</em> learn one without the other. The solution to such kinds of problems is to use a <em>spiral</em> approach. This is already used to take students through a set of topics deepening their understanding on each loop, rather than trying to teach everything about one topic before moving on to the next. </p>

<p>If I do only the back end development for a long while I'm going to get bored since nothing exciting seems to happen. If I do only front end development for a long while I'm going to get frustrated since there is no support for the things I'm building. </p>

<p>So, teach a little of this and a little of that and then cycle around. </p>

<p>Teach enough backend, say, to support something, and then enough frontend to make use of that, then go back for more - again and again. </p>

<p>In fact, some sophisticated sites get built in just exactly this way. Make your teaching as <em>agile</em> as your development process. </p>

<p>And note that this process isn't limited to just the current question. Spiral teaching is a <em>big idea</em>. There is even a <a href="https://smile.amazon.com/Pedagogical-Patterns-Educators-Joseph-Bergin/dp/1479171824/" rel="nofollow noreferrer">Pedagogical Pattern</a> by that name. </p>

<hr>

<p>For those who haven't heard it before, there is an old puzzle: Which came first, the chicken or the egg. </p>

CC BY-SA 3.0
2017-09-04T13:11:44.947Z
2017-09-04T13:11:44.947Z
Buffy
<p>I teach full stack web development because the purpose of the course is to give an overview of how a complete website is created, from SQL for database management to HTML/CSS/JS for front-end to ruby on rails as a backend. Would it be better to teach the front-end (HTML/CSS/JS) first or the back-end (Rails/SQL)?</p>

<p>My instincts would suggest front end because the students can type something and immediately see results which can be much more engaging, but teaching JS as the first "real" programming language also bothers me because of the many confusing and missing language features.</p>

CC BY-SA 3.0
2017-05-23T15:38:03.943Z
better to teach client side first because more interactive, easier and much less chance to accidentally screw up.
Abhinav Gauniyal
<curriculum-design><web-development><front-end><back-end>
When teaching Web Development, should server or client side come first?
# When teaching Web Development, should server or client side come first?

(Asked by: username_0 on 2017-05-23)

I teach full stack web development because the purpose of the course is to give an overview of how a complete website is created, from SQL for database management to HTML/CSS/JS for front-end to ruby on rails as a backend. Would it be better to teach the front-end (HTML/CSS/JS) first or the back-end (Rails/SQL)?

My instincts would suggest front end because the students can type something and immediately see results which can be much more engaging, but teaching JS as the first "real" programming language also bothers me because of the many confusing and missing language features.

**Tags:** curriculum-design, web-development, front-end, back-end

> **Comments:**
> **username_1**: better to teach client side first because more interactive, easier and much less chance to accidentally screw up.  

---

## 9 answers

### Answer by username_7 on 2017-05-23. Score: 2 | Accepted answer

I would definitely start with front-end. It's possible to avoid many of the warts of javascript by using ECMA6 or only teaching small pieces of the language. For example, loops and if statements are sane in JS--you don't have to show them the weirdness with == vs. ===.

Another reason to start with front-end is that modifying pages by editing the DOM is significantly easier than spitting out html with mark-up in it.

> **Comments:**
> **username_8**: One rarely spits out HTML directly with modern frameworks. More frequently, the html is stored in resource files (jsp, asp, xml, etc) and the framework merges the parameters with the resources to produce HTML. It is poor practice to embed HTML in your application code.  

---

### Answer by username_9 on 2017-06-23. Score: 3

The title here almost feels like a trick question to me. Not that it's intentionally trying to mess with people, but "which one first" is a bit of a false dichotomy.

This is a somewhat unfortunate example, but it's the one I was reminded of. Long, long ago, in the ancient history of Stack Overflow, there was a... kinda rude and presumptuous question about a web developer who didn't understand that the web involves separate server and client machines. If you have 10k rep on Meta Stack Exchange, you can still see it: [MSE post 41660](https://meta.stackexchange.com/questions/41660/convincing-a-stack-overflow-user-to-switch-careers).

Granted, to be ultra-pedantic, you can't physically teach two concepts simultaneously, so *technically* either front-end or back-end will have to be first lesson. But as a practical matter, for all intents and purposes, the two topics go hand-in-hand. Teaching only one and not the other for any significant length of time may have some use, but I wouldn't call it web development.

More recently, I have seen front-end vs. back-end start to be replaced by top-down vs. bottom-up, which I have to say I prefer. In short, "bottom-up" would be "here's what the OSI stack is, these are the protocols the Internet uses, you can set up off-the-shelf software like Ruby on Rails to handle a lot of the underlying stuff for you and then write your logic in Ruby and presentation in HTML/CSS." Top-down is just the reverse of that. It's like when you start someone with "Hello, world!" in Java, and tell them to blindly copy `System.out.println("Hello, world!");` but not to worry about what `System` or `out` mean for the first few lessons.

To be fair, my more recent experiences have been with more advanced students, not intro high school or college students without any prior experience. But I still believe in my fundamental point: you can't show people only half of a picture (even if you add the other half in later) and expect them to absorb its full value.

As for your JavaScript comment, it's been a few years since the last time I cracked it open, but I'd recommend giving *JavaScript: The Good Parts* a read. It's by Douglas Crockford himself, and under 150 pages long.


---

### Answer by username_10 on 2017-06-23. Score: 2

Front end
First teach HTML along with inline styles(it is a bad practice though).
Because it is very less strict in syntax. You can skip the  tag or anything even if you didn't closed the  at bottom it show the desired output.(It is a bad practise though)
So, when you introduce such a language to students, they will wonder because even if they did some mistake, they got output. So they have much more interest to learn HTML.
Then introduce them CSS and ask to stop using inline styles.
in HTML itself, we are using some styles like height= and so on. Introduce them CSS and ask to change such styles to CSS (for example height:).
Also introduce some good tricks like transforms.
Then show them some templates / themes
I suggest show some themes from themeforest or some site and say they all build using HTML and CSS. So, they are much more interested in learning this.
Then give a them an intro to JavaScript
Saying JavaScript is an essential part of Web Designing. Many Libraries like jQuery and packages like Node JS are using JavaScript.
I would like to quote a good word from my tutor
Before that, I know only PHP, HTML and CSS. I didn't knew JS much. In my college, my tutor once told in class that the structure of JS function names are

If the function name consist of more than one words, then the first word should start with lower case and remaining words should start with upper case.

Example
getElementById
   ^      ^ ^
querySelectorAll
     ^       ^

That give me a clear idea on JavaScript and at present, I am working on a Front End Developer.
So the order comes from Easy HTML -> Medium CSS -> Little tough JS
Then Server side
PHP is a very easy server side scripting language to learn when comparing with JSP, ASP and NodeJS.
Teach PHP first (the basic arithmetic, logical, string and such operations).
Then teach PHP mysql interaction(Don't use the deprecated mysqli function).
Then teach them the language you are supposed to teach(ASP or JSP or NodeJS or Ruby or Python or whatever it is) as suggested by the Institution.
Finally, introduce them plugins in front end and frameworks in back end by saying that Now you have a base on everything. There are plugins which help you to do all the tasks.
Note:
Don't introduce plugins first. It may destroy their skills.
If a plugin is deprecated and if they didn't have enough experience or knowledge in it's base language, they will suffer a lot to migrate.

> **Comments:**
> **username_10**: @username_11 I think I did. Please point out if I missed something.  
> **username_11**: This is a fantastic answer now, thanks. Great edit!  
> **username_3**: Values should be a noun, except booleans that should be an adjective. `get` is a verb. (Would you ever ask someone “What is your get height?”?)  

---

### Answer by username_12 on 2017-09-04. Score: 2

I'd like to summarize a few of the answers already given by suggesting a general framework for such "chicken and egg" problems. You have two things to teach that are closely related but different. You can't *really* learn one without the other. The solution to such kinds of problems is to use a *spiral* approach. This is already used to take students through a set of topics deepening their understanding on each loop, rather than trying to teach everything about one topic before moving on to the next.

If I do only the back end development for a long while I'm going to get bored since nothing exciting seems to happen. If I do only front end development for a long while I'm going to get frustrated since there is no support for the things I'm building.

So, teach a little of this and a little of that and then cycle around.

Teach enough backend, say, to support something, and then enough frontend to make use of that, then go back for more - again and again.

In fact, some sophisticated sites get built in just exactly this way. Make your teaching as *agile* as your development process.

And note that this process isn't limited to just the current question. Spiral teaching is a *big idea*. There is even a [Pedagogical Pattern](https://smile.amazon.com/Pedagogical-Patterns-Educators-Joseph-Bergin/dp/1479171824/) by that name.

---

For those who haven't heard it before, there is an old puzzle: Which came first, the chicken or the egg.


---

### Answer by username_2 on 2017-05-23. Score: 1

Students need at least a cursory understanding of how web pages are built before moving to the back end.

Last year we did a project where there were groups split into front end design, front end JS, and backend PHP. The JS and PHP groups weren't able to get started without going back and learning the very basics of HTML.

If it were me, I'd probably start with basic HTML and CSS and then go to JS to make something interactive and shiny.

> **Comments:**
> **username_0**: What about an API?  
> **username_2**: @username_0 That'd be cool, but I think they might struggle with the purpose without some understanding on front end stuff. Although I have been trying to come up with a project to use https://deckofcardsapi.com/ . There's got to be something there.  

---

### Answer by username_3 on 2017-09-04. Score: 1

There are already answers here. I will add a contrary one, as this point of view is missing.

When designing a program, the best ones are the ones where the business logic was designed first. Therefore it is better to design the back-end first. That is get all the processing done. Then output the data, possibly in json. Then think about how it will be displayed to the user; How the back-end will output html.

However as other answers have pointed out, it will probably be better to learn the front-end stuff first.

Therefore, one possible approach could be:

* Learn front-end: html, css, js
* Learn json, back-back-end
* Create back-end that emits json
* Learn json → html transformation
* Add transformations to project
* Add some css to project
* Add some js to project

These last 3 steps also allow you to revisit front-end development, and see how this fits into back-end.


---

### Answer by username_4 on 2017-06-23. Score: 1

I'll probably elaborate more on this in a blog post at some point but I usually do the following:

* Simple HTML (load from file, no styling)
* Simple baclend - I usually use Flask
* More backend
  + templates
  + programatically making a web page
  + simple forms (GET/POST)
  + Sessions
* Styling on the front end
* Using Web APIS
* Databases
* Simple JS
* A whole lot more front end combined with functional JS


---

### Answer by username_5 on 2017-06-24. Score: 1

True full stack from the base install of an OS with an IP address up to the next StackExchange? Multiple classes.. HTML+CSS is always first, then Linux Admin, Back End Coding, and Pure SQL. Only order requirement with the last 3 is that Pure SQL has to be done before Back End Coding, but some of the Linux admin stuff could help with solving issues OR using neat new and exciting stuff when it comes to the back end....

* HTML+CSS+Javascript+ styling stuff like jquery and bootstrap and such
* Pure SQL class - mysql-workbench+mysql server or similar, nothing but
  queries from simple selects up to complex joins, how data relates,
  good db design, etc. If possible, some info on basic server
  management - managing rights and users on the sql-server level (not
  host OS level), backups, restoring backups, exporting/importing
  databases, etc.
* Linux Administration for LAMP stack, ROR stack, whatever platform you are teaching to. Installing the system and services, configuring them, backing them up, mail, dns, webserver, etc. Use freely available materials and have the students spend their "book money" on a \$5 per month linode and a \$12/year domain.
* The back end programming - PHP+SQL, ROR, etc.


---

### Answer by username_6 on 2017-05-23. Score: 0

Client side first allows students to get simple stuff running using a smaller number of required concepts and steps. So it's probably a lower cognitive load to getting most people started.


---

