loading...

What would you teach a frontend beginner in 2020?

kayis profile image K ・1 min read

In April, I will start teaching frontend development to design students at university.

The course curriculum wasn't updated for years, so I'm basically free to choose what to teach.

The idea is teaching them enough so they can implement a basic interactive prototype of their design idea with Web technology. They only have 4x13 hours to do this course and it isn't their main "project" in the semester.

I already have an idea what I will do, but I wanted to reach out to the community to see what your perspectives are.

What would you teach a frontend development beginner in 2020 if you would have to break it down to the bare essentials?

Discussion

pic
Editor guide
Collapse
steveblue profile image
Steve Belovarich
  • HTML: Elements, DOM
  • CSS: box model, specificity, cascading, variables, SCSS
  • JavaScript: let, const, prototype, function, object, array, class, Promise
  • Debugging with Dev Tools
  • Using a Linter
  • Git
  • Web Components: Shadow DOM, Custom Elements, template
  • XMLHttpRequest, fetch
  • Node.js: Express, REST API
Collapse
kayis profile image
K Author

Sounds good.

I wasn't sure if I should teach Git, these people should only be able to do some basic interaction work in the end, but using Git on your own (and not in a team) should be rather simple.

Collapse
timjkstrickland profile image
Tim JK Strickland

I think you could follow your instincts and probably forgo Git and use CodePen instead. You can still review the code for grading, there's immediate results for code, and the students don't have to try and learn one more thing on top of navigating the DOM for the first time. It'd be a different story if they might need Git later on, but I haven't met many designers who use Git daily.

Thread Thread
steveblue profile image
Steve Belovarich

I heard the same thing when I taught Front End Web Development at General Assembly. Beginners don’t need this, noobs don’t need that. Teach them jQuery they said. I’ve implemented a similar curriculum before and by the end of the class Designers were querying APIs. Don’t limit beginners. Everyone deserves to learn in a way that treats them like a professional engineer from Day 1. Giving students that level of respect goes a long way. It can make the difference in someone believing they can code or not.

Thread Thread
timjkstrickland profile image
Tim JK Strickland

Valid points, Steve. I agree that all beginners should be treated with a level of respect. My comment was only in the context of a single project that deals with an interactive prototype of a design within a larger course as a whole. I don't know what the rest of the curriculum will be, and I hope it does include Git because it is important to learn. However, if we're talking only about creating a prototype, it sounds like time would be better spent showing the students how they could utilize more sophisticated interactions through fun CSS tricks or a cool JS library like Three.js within their designs rather than showing them version control. It didn't seem necessary to me for a prototype project, but then I have never taught a web development nor a web design class ¯_(ツ)_/¯ Someday hopefully I will!

Thread Thread
steveblue profile image
Steve Belovarich

Oh it’s absolutely necessary. How is the designer supposed to later apply the knowledge they learned in the class to the task of developing a component library? A library they want to see proliferated across the org? Having them setup a dev environment, commit to Git and learn the basics of version control is critical to one of the main use cases a designer would want to learn how to code.

Thread Thread
kayis profile image
K Author

I think, I'll look deeper into codesandbox, they seem to have Git support.

Also, the idea of creating a component for others to use, seems like a good practice. I'll add this to the curriculum.

Thank you both very much for your insights.

Collapse
code_regina profile image
Regina

This is a very helpful outline, as I am going the self-taught route for web development. I appreciate all the help that I can discover.

Collapse
ninjasun profile image
ninjasun

to many things. Learn the theory is not usefull and they will forgot all of that.

Collapse
steveblue profile image
Steve Belovarich

This curriculum is not based in theory. If you want theory, go learn physics.

Thread Thread
ninjasun profile image
ninjasun

Dude is what I'm telling you. You can't learn all this stuff together, instead focus on building.

Thread Thread
steveblue profile image
Steve Belovarich

Yes, these concepts must be tied to practical lessons and in my courses they always are. I taught all of these concepts to complete noobs. They would learn the theory, I would demo the practical, they would follow up with a practical exercise that demonstrated their knowledge of the topic. By the end of the class students were building some sophisticated web apps. So you were saying?

Thread Thread
ninjasun profile image
ninjasun

Yea.. Sorry, I should have missed some posts in the discussion.
It seems very good man and I'm curious how long is the class?

Thread Thread
steveblue profile image
Steve Belovarich

12 weeks, met twice a week. I want to start it up again soon.

Collapse
jonrandy profile image
Jon Randy

Avoid frameworks entirely. Teach them all the basics - well. HTML, CSS, DOM etc. Get them to make a site/web app entirely from scratch. Far too many developers these days rely totally on frameworks and libraries without understanding the concepts and technologies underpinning them. When something goes wrong with their cut and paste code, they often don't have a clue how to fix it.

Collapse
kayis profile image
K Author

I thought about this.

I'm totally with you that the basics are important, but on the other a big chunk of devs are using frameworks.

The important part is to tell people what is done by the framework and what is DOM, I think.

Also, a bit unrelated in the discussion here, I will probably teach mobile development next semester and tought about using React-Native, so using React in this course could help to minimize the amount of stuff to learn in both of these courses.

Collapse
ninjasun profile image
ninjasun

good choice!

Collapse
ninjasun profile image
ninjasun

I do not agree. One word ABSTRACTION. We do not need to know how a car works to use it. Same for a TV or a washing machine. Same for back-end and db. Better thing, in my opinion, is to start with a modern and simple framework so they can easily get dirty on it, they then will go deeply if they care is not mandary. I do not need to know html4 to code html 5.

Understanding all the concepts and stuff comes with practice and passion.

Collapse
ghost profile image
Ghost

I think a short overall structure of a web app is important, including backend; I find useful to have a idea of the whole to understand how the specific interact with the rest.

And also a short explanation of APIs, what they are, what kinds, etc. That's where they will probably get the data after all.

Another short explanation of how browsers work, what is the DOM, how a page is rendered, what are cookies, etc. That is what will execute their code, is important to have a notion of how it works.

Finally a quick "trailer" of wasm, just to let them know what it is and that they may go deeper if necessary. I think the future role of wasm is uncertain, but I think that it will have a role, is good to have a firm grip of the ground but keeping the eye on the horizon.

I think that all of this could fit in an hour or two depending of how deep you want to go and how much time you have.

PS: And a little UX and general coding good practices never hurt anyone :)

Collapse
kayis profile image
K Author

Very good points here, thanks!

Collapse
ghost profile image
Ghost

Oh, I almost forgot, I have always at hand this as a reminder, probably not the proper language for a course but those ideas are important

motherfuckingwebsite.com/
bettermotherfuckingwebsite.com/
thebestmotherfucking.website/

Maybe may be of inspiration for the closing thoughts of the course. Is always important to remember that the core (HTML, CSS) are designed to be accessible, reactive, fast, and clear. When we forget that we trade those features for aesthetics alone and is easy to forget the purpose in favor of the form.

Not because you can do something, you should.

The rest can be learned online and is forgettable and gets outdated, but if you keep in mind that, I think you'll build a good mindset.

Thread Thread
kayis profile image
K Author

It's an interesting topic.

On the one hand I want to teach the standards on the other hand I also want to teach stuff that finds you a job later, haha.

Thread Thread
ghost profile image
Ghost

I understand, but keep in mind that any specific technology is doomed to be obsolete in a couple of years, and depending how long is their entire curricula, it may even be obsolete just after graduating, yet, the basics are forever (well not forever but you get the point), also what would you prefer to know for working with, lets say React, how to use Angular or have a firm knowledge of JS?, you could teach them how to land 1 specific job, 1 specific tool, how to use 1 specific fishing rod. But specially for a junior dev, flexibility, to me is more important. I don't expect that a new dev knows every single detail of React, what I do hope is that (s)he can learn fast and that is easier with the basics. Also there are plenty of resources to learn frameworks, and learn online is a big part of their career.

What can YOU teach them that is difficult online, what can YOU teach them to help them learn on their own.

What would make them special, differentiate from the competition. I think that, for example, being able to make SQL queries, might be more useful than React when they discover all the jobs are for Angular or vice-versa. If you can teach them what is necessary to pick-up the React tutorial and understand the documentation, that will open a lot of possibilities, if you teach them React it will open just 1 door and close the others. That general understanding, that broad view is hard to get online. And maybe some lean to the design, some closer to the backend or making thicker clients, QA; who knows, I bet even they don't know (even tho they may thing they do).

Said that, after some basics and those "adjacent" topics are taught, I think it would be useful to dig into some framework, to apply the knowledge, maybe contrast VanillaJS to some framework, to teach how a framework can be helpful, improve productivity, avoid boilerplate, etc. But in that context, as just another tool.

Thread Thread
kayis profile image
K Author

Right.

I don't think designers need to know SQL, but I get what you mean.

Thread Thread
ghost profile image
Ghost

yea, I guess that was too much :) but a little SQL never hurt anyone, a friend that is an Industrial engineer always worked in logistics, the closer to a computer was Excel asked me to help him with SQL because he needed some data.

It may not be too related for the curricula but maybe as an advice, a comment or a little assignment, to just check it out, you never know when you'll have to mock or get some data; SQL is almost the command line of data. I'm not talking about normalizing databases or making migrations, but a little peak on SELECT and friends could be useful. I think :)

Collapse
dkruythoff profile image
Darius Kruythoff
  • What is HTML?
  • What is CSS?
  • What is Javascript?
  • Then introduce them to some frameworks like Vue or React.
  • Since time is tight, focus on showing them how to answer their own questions as much as possible. And give them plenty of resources to play with.
  • Whenever a junior asks me about this stuff, I show them how to do it easy, but I try to instill that they understand what's going on. At least in a basic sense.

Hope that helps.

Collapse
assisfery profile image
Assis Ferreira

I think you can teach them Bootstrap and jQuery before the VueJs

Collapse
dkruythoff profile image
Darius Kruythoff

It's ok to tell the about those, but I see no value in teaching either any more.

Collapse
kayis profile image
K Author

I thought about not using jQuery anymore, because it's a different paradigm from React/Vue/etc.

Thread Thread
nijeesh4all profile image
Nijeesh Joshy

But i think, teaching them how to use jQuery will help them understand how DOM manipulation works without writing a lots of code. I think jQuery should be taught before Vue or React.

Thread Thread
kayis profile image
K Author

I think, fiddling around with the querySelector would be enough in 2020.

Thread Thread
nijeesh4all profile image
Nijeesh Joshy

while its important that you have to follow the current industry standards,i believe beginners shouldn't be worrying too much about browser compatibility, having minimum page sizes when they are new to the ecosystem.

They should be more focused on learning how the DOM works, how events are handled etc. Jquery will definitively help them have a clear understanding on those things but in much more easier way to understand.

once they get comfortable they should be able to work on vainaJS too.

Thread Thread
kayis profile image
K Author

If I shouldn't worry about browser compatibility, then why should I bother with jQuery? 🤔

Collapse
kayis profile image
K Author

Sounds good to me, thanks.

Collapse
ekafyi profile image
Eka

Like many other commenters said, the basics of HTML, CSS, JS of course.

As they are design students, maybe you could cover "no code" UI tools, but from frontend dev perspective? Apps like Figma, Sketch, Zeplin, Adobe XD, Webflow. How they can make the most optimal use out of those tools with their new understanding of the frontend stack.

It would be useful whether they end up working a actual frontend dev, UI designer, or whichever role at the intersection of those two ("UI engineer", "UI developer" etc).

Collapse
imparvez profile image
Parvez Shaikh
  • HTML
  • CSS
  • JavaScript
  • PHP Templating
  • Git
  • How to use REST API
  • Web browser and their dev tools.

  • Javascript View Library - ReactJS

  • Javascript Backend library - NodeJS

  • CSS PreProcessor - LESS, SASS.

  • Web APIs

Collapse
iteachfrontend profile image
iteachfrontend

Build a solid foundation for HTML, CSS with lots of hands-on practice.

Introduce them to bundling and minifying and some of the best practices in modern-day web development.

I am not including JavaScript considering a limited amount of time you mentioned in your post.

Collapse
kayis profile image
K Author

Interesting idea.

I thought about focusing more on JS than tooling, because of the prototyping skills these designers need.

Background: they had some design projects with big companies, and learned that working prototypes are much better received than wireframes, even if the prototypes are bad.

Collapse
ylerjen profile image
Yann L

Web features appart, I would teach them how to stay aware about the new things (where to find news, RSS, news feed, following MVP's, going to meetups, conferences, etc.).
It's probably obvious for most of the people on this website, but I've noticed there's a lot of developer who just stay on what they learned if you don't feed them with news. The web is evolving faster than ever, and what you will teach them can be deprecated in few years. That way they will not just learn it once, but it could give them keys and daily habits for the future.

Collapse
kayis profile image
K Author

You're right. I thought about adding some stuff about self-education and I think what you describing should be a part of it.

Collapse
dimitrimarion profile image
Collapse
kayis profile image
K Author

Thanks for the link!

Collapse
jwp profile image
John Peters

If you look at LinkedIn job needs in your nearest large city, you'll most likely see tons of openings for React, Angular or Vue frontend programmers. Backend will vary from node, to Java and c#.

If you start them on any of the big three, they will have a working app in literally 30 seconds.

That alone provides the foundation allowing you to pick the topics, while the students remain interested in their working app.

When they graduate, they have guaranteed employment.

Collapse
kailyons profile image
KaiLikesLinux

HTML: Elements, DOM, Classes, IDs
CSS: SASS, Box models, Variables
JavaScript: Var, Const, Function, Arrays, Booleans, functionality with HTML/CSS

Others: GIT, Node, Python, and if you wish to do so, PHP

Collapse
anitafox profile image
anitafox

Hi people. Recently, CSS has become much interested. Although this is not my specialty. I am a writer on Paperell. At first I began to think about the structure of the site, and then I went into the source code and it attracted me. I don’t even know what all this will lead to.

Collapse
kimsean profile image
Kim Sean Pusod

basic html css js and a big session about api request or REST services.

Collapse
kayis profile image
K Author

Yes, I think explaining APIs is an important point, especially because it can be done on its own, without frameworks or DOM etc.

Collapse
thehapax profile image
octomatic

Write Less, Do More.

svelte.dev/

See Rethinking Reactivity: see : youtube.com/watch?v=AdNJ3fydeao