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?
Top comments (48)
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.
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.
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.
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!
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.
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.
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.
to many things. Learn the theory is not usefull and they will forgot all of that.
This curriculum is not based in theory. If you want theory, go learn physics.
Dude is what I'm telling you. You can't learn all this stuff together, instead focus on building.
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?
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?
12 weeks, met twice a week. I want to start it up again soon.
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.
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.
good choice!
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.
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 :)
Very good points here, thanks!
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.
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.
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.
Right.
I don't think designers need to know SQL, but I get what you mean.
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 :)
Hope that helps.
It's ok to tell the about those, but I see no value in teaching either any more.
I thought about not using jQuery anymore, because it's a different paradigm from React/Vue/etc.
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.
I think, fiddling around with the querySelector would be enough in 2020.
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.
If I shouldn't worry about browser compatibility, then why should I bother with jQuery? 🤔
Sounds good to me, thanks.
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.
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.
Web browser and their dev tools.
Javascript View Library - ReactJS
Javascript Backend library - NodeJS
CSS PreProcessor - LESS, SASS.
Web APIs
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).
Still relevant in 2020 :)
Thanks for the link!
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.
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.
You're right. I thought about adding some stuff about self-education and I think what you describing should be a part of it.
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.
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
basic html css js and a big session about api request or REST services.
Yes, I think explaining APIs is an important point, especially because it can be done on its own, without frameworks or DOM etc.
Write Less, Do More.
svelte.dev/
See Rethinking Reactivity: see : youtube.com/watch?v=AdNJ3fydeao