6
$\begingroup$

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.

Improve this question
$\endgroup$
1
  • $\begingroup$ better to teach client side first because more interactive, easier and much less chance to accidentally screw up. $\endgroup$
    – Abhinav Gauniyal
    May 23, 2017 at 15:38

10 Answers 10

Reset to default
2
$\begingroup$

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.

Improve this answer
$\endgroup$
1
  • $\begingroup$ 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. $\endgroup$
    – pojo-guy
    Jul 1, 2017 at 4:40
4
$\begingroup$

Starting with frontend does not necessarily mean starting with JS. You could first do HTML and CSS, which is engaging, as you mention. Then proceed to Ruby for the backend (whether Ruby is suitable as a first programming language is another debate), i.e. generating static pages dynamically.

JavaScript could come at the end of the course. This is also how things went historically, more or less. I would say this order makes the reasons for JavaScript (faster and smoother interaction, a.o.) stand out better.

Improve this answer
$\endgroup$
1
  • $\begingroup$ This is an interesting idea that I hadn't considered. I like your proposal to fractionate your approach to the various stacks. $\endgroup$
    – Ben I. ♦
    May 23, 2017 at 16:23
3
$\begingroup$

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.

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.

Improve this answer
$\endgroup$
2
$\begingroup$

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 <head> tag or anything even if you didn't closed the <body> 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.

Improve this answer
$\endgroup$
3
  • $\begingroup$ @Aurora0001 I think I did. Please point out if I missed something. $\endgroup$
    – i--
    Jun 24, 2017 at 5:50
  • 1
    $\begingroup$ This is a fantastic answer now, thanks. Great edit! $\endgroup$
    – Aurora0001
    Jun 24, 2017 at 8:49
  • $\begingroup$ 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?”?) $\endgroup$
    – ctrl-alt-delor
    Sep 4, 2017 at 10:10
2
$\begingroup$

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 by that name.

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

Improve this answer
$\endgroup$
1
$\begingroup$

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.

Improve this answer
$\endgroup$
2
  • $\begingroup$ What about an API? $\endgroup$
    – thesecretmaster ♦
    May 23, 2017 at 19:40
  • $\begingroup$ @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 deckofcardsapi.com . There's got to be something there. $\endgroup$
    – Ryan Nutt
    May 23, 2017 at 19:49
1
$\begingroup$

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
Improve this answer
$\endgroup$
1
$\begingroup$

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.
Improve this answer
$\endgroup$
1
$\begingroup$

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.

Improve this answer
$\endgroup$
0
$\begingroup$

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.

Improve this answer
$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.