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?
Latest comments (48)
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
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.
Write Less, Do More.
svelte.dev/
See Rethinking Reactivity: see : youtube.com/watch?v=AdNJ3fydeao
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).
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.
Still relevant in 2020 :)
Thanks for the link!
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.
Web browser and their dev tools.
Javascript View Library - ReactJS
Javascript Backend library - NodeJS
CSS PreProcessor - LESS, SASS.
Web APIs
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.
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.