The "How To Become A Better Frontend Developer" Army Bootcamp
Pack your boots, you're going to the army...
Welcome to Bootcamp Maggot!
You are about to read a special series of emails I created for the Exceptional Frontend newsletter in February. This was a result of a LinkedIn poll I took where I asked what developers were more interested in and “Becoming a Better Frontend Developer” won by half the votes.
Thus the "How To Become A Better Frontend Developer" Army Bootcamp was born. It flips the usual idea of “developer boot camps” on its head and turns it into a real army boot camp throughout all the emails (you’ll see what I mean in a bit).
With this series, I wanted to teach a framework / mental model for how to think about the skills needed for front-end development. Everybody always gives pretty generic advice about how to improve like “work on the fundamentals”, “be patient”, “build lots of projects”, etc.
I wanted to give a general map for developers so that they could understand at a high level what they had to learn, what their goals were and what can they do to learn faster.
So, without further a due, I present to you the emails themselves. I updated some images, spiffed up some diagrams, and left it for you to enjoy in all its glory.
Use the table of contents to quickly navigate through the post. Enjoy.
P.S. For added immersion, I’ve added different army drumming music options to play throughout (I’ll admit you may or may not want to let this play long, but hey it’s fun to let it play once).
Email 1: The goals of Frontend Development
ALRIGHT YOU MAGGOTS
Welcome to class 101 on how to become a better front-end developer. My name is Mauro Accorinti and I will be your drill sergeant for the next few emails.
This will be a four part series that I will send to your inboxes each and every week. You will read these emails. You will understand them. And they will teach you the road to becoming a better front-end developer. Are we clear maggot?
...
I SAID ARE WE CLEAR MAGGOT!?
Oh sh- you better respond.
"S-SIR YES SIR!!!"
...You yell out with fear in your voice.
Good. Let's start then.
Welcome to the "How To Become A Better Frontend Developer" Boot Camp
In most other front-end boot camps, you learn the basics of what front-end developers do.
In those other front-end boot camps, they teach you HTML. They teach you CSS. They teach you Javascript. Maybe even React if you're painfully unlucky. Then, force you to create projects while woefully unprepared to do so (because you learned how to program only weeks earlier).
This isn't that kind of boot camp, maggot.
Something that I've never seen anybody else truly break down is how to improve as a front-end dev when you're learning, no matter your skill level.
What are the skills you should focus on now? Which libraries/frameworks/tools should you learn? Why should you learn them? Out of everything that there is to know... what should you do first, and for how long? And how does it fit all into the umbrella of Frontend developer? And more importantly, how does it branch into general software engineering?
It can be confusing at times. There will be times when you're stuck and you don't know how to grow. There will be times when there's too much to know, and you're overwhelmed.
In those trying times, you need to completely stop. Think. And finally, ask yourself: what is the purpose behind what you're learning? What's its utility? And how does it help the goals you serve in your role as a front-end developer?
Oh wait, that's right. Nobody has told you what your goals as a front-end developer are, have they? Do you know them? Well, get ready you maggot. This email is going to talk about the goals you have as a front-end developer.
As a frontend developer, you only have three goals
Those goals are:
To build web pages based on designs and requirements with best practices
To work well together with others (Project managers, developers, clients)
To advocate for and create the best user experience possible
Every single skill you can imagine that a front-end needs or finds useful to learn is in one of those buckets or at the intersection of them. We can represent this best through the use of a Venn diagram.
If we were in this case to randomly choose an assortment of skills used by frontend developers like:
HTML
CSS
JS
React/Vue/Angular/etc.
Testing
Accessibility
Animations
Git
Slack
Jira
Microsoft Teams
Figma
Empathy
Basic design Knowledge
How to talk with clients
Good communication
And populate it in the diagram, we can see how they fit:
Unfortunately, that's only a handful of the skills you need as a frontend. The full list, exploring each and more will be included in the next email.
Until then,
Your Skill Sergeant, Mauro Accorinti
Email 2: Frontend Developer Skills - Hard skills and soft skills
ALRIGHT YOU MAGGOTS
Welcome to class 102 on how to become a better front-end developer. My name is Mauro Accorinti and I will be your drill sergeant for this email.
Let's see if your tiny little developer brains can remember what we learned last time
I taught you about the purpose and goals of a front-end developer. They were:
To build web pages based on designs and requirements with best practices
To work well together with others (Project managers, developers, clients)
To advocate for and create the best user experience possible
I even made it easy by putting together a Venn diagram that represented the intersections of them all.
Today we're going to talk about frontend skills
If I were to ask you today what skills a front-end developer needs, what would you say?
HTML, CSS, and Javascript for starters. Maybe you'd name a framework. Maybe you'd mention testing. Server-side Rendering. I'd give you a gold star if you mention accessibility.
However, as I mentioned before, these skills are only a third of what front-end development is about. That's because when I ask you about skills, your itty bitty baby maggot brain thinks about hard skills. While leaving soft skills, which represent TWO THIRDS of our profession, right on the table.
(As a quick reminder, hard skills are specific, measurable, and easy-to-quantify abilities or knowledge you can learn. Soft skills are more about interpersonal and behavioral skills which are more subjective and harder to quantify.)
Going back to the front-end goals, while all the skills inside "Build web pages" are hard skills, what lies in the other two groups are soft skills.
Soft skills are important in our profession because we are the devs who work the closest with users
We are responsible for the literal presentation of our work. We work on what would be the face, design, and representation of a company, idea, project, or person through websites. Not only that, but we also have to work together with clients, other developers, and the rest of the team to make sure we're all on the right track and building something we all agree on.
To do that, we need soft skills that aren't usually trained. Just to name a few:
How to communicate clearly and concisely
How to give and receive feedback
Empathy
How to collaborate with design teams and other devs
Creativity
Adaptability
Soft skills are a key aspect that we don't usually work on, but define most of what we do. So work on them maggot!
In the next email, we'll talk about meta-skills and where they fit in our road to being better front-end developers. I'll end this off by giving you a mostly full list of front-end skills I could think of.
Class DISMISSED!
Full list of frontend skills:
(Remember that many have overlaps between each other)
Build Web Pages Based on Designs and Requirements
HTML
CSS (Flexbox, Grid, Responsive Design, Transitions, Animations)
JavaScript
TypeScript
CSS Preprocessors (Sass, Less)
Frameworks/Libraries (React, Vue.js, Angular, Svelte)
State Management (Redux, Zustand, MobX)
Version Control (Git, GitHub/GitLab/Bitbucket)
Package Managers (npm, Yarn)
Build Tools (Webpack, Vite)
Module Bundlers and Transpilers (Babel)
Web Performance Optimization (Lazy Loading, Code Splitting, Minification)
Testing
APIs (REST, GraphQL)
SEO
Dev tools
Web Security (CORS, HTTPS, Content Security Policies)
Progressive Web Apps (PWAs)
Work Well Together With Others
Communication (With team, clients, etc.)
Feedback (Receiving and Giving)
Conflict Resolution
Teamwork and Empathy
Task Management (JIRA, Trello)
Version Control (Pull Requests, Code Reviews)
Agile Methodologies (Scrum, Kanban)
Pair Programming
Writing Documentation
Requirements analysis
Advocate for UX
Responsive and Mobile-First development
Accessibility
Performance optimization
Design Awareness and knowledge
Cross-Browser Compatibility
Email 3: Frontend Developer Meta-skills
ALRIGHT YOU MAGGOTS
Welcome to class 103 on how to become a better front-end developer. My name is Mauro Accorinti, and I will be your drill sergeant for this email.
WHAT DID WE LEARN LAST EMAIL CADET?!
You get called out. The sergeant is looking at you. You scream at the top of your lungs in response!
"Sir, we learned about frontend development skills, sir!"
IS THAT REALLY IT MAGGOT? DID YOU SIGN UP JUST TO LEARN ABOUT THINGS LIKE HTML?
"Sir, no sir!" you reply
WHAT ELSE DID YOU LEARN?
"I learned about hard skills and soft skills, sir!"
AND WHICH ONES DO WE MOST IGNORE AS DEVS?
"Sir, soft skills sir!"
WELL, I'LL BE! LITTLE GOODIE TWO SHOES OVER HERE LEARNED A THING OR TWO LAST EMAIL
"Sir, yes sir!" you cry out with a tear in your eye. You silently sigh a breath of relief as Mauro turns to the other readers.
GOOD, WITH THAT OUT OF THE WAY, LET'S FOCUS ON TODAY'S LESSON: META-SKILLS
Meta-skills are different from the skills we've talked about before. While hard and soft skills are abilities you learn to become an exceptional front-end dev, meta-skills are higher-order cognitive abilities that help you learn, adapt, and problem-solve more effectively.
They make acquiring other skills easier or faster. You arrive at solutions quicker. You recognize patterns better. Once you've acquired even just one or two under your belt, they're massive game-changers. They're what unlock your ability to do tasks and solve issues 2X or even 3X faster. They're that powerful.
One of the best examples of a meta-skill in our profession is "meta-learning," or learning how to learn. Thinking back to the Front-end developer goals Venn diagram from earlier lessons, we know that there are a lot of skills to master.
But if you already have a lot of practice and knowledge on how to learn concepts and ideas effectively, you can cut down on all the time it takes to learn new libraries, frameworks, or tools you'll learn in the future. Forever.
Other examples of meta-skills relating to our profession could be a lot simpler but just as important. And you might have a few without realizing it, like:
Knowing how to plan effectively
Having a collection of different mental models to draw from
Having a growth mindset
Time awareness & energy management
Effective and concise communication
Many of these skills you'll gain naturally during your career. Others might take careful practice. But they're all important in the long run as you become a better front-end developer.
In the next and final email next week, we'll finally take a look at how this all relates to becoming an exceptional front-end. That's right maggots, we're going full circle.
Class DISMISSED!
Email 4: Graduating and becoming exceptional frontend developers
Hello maggots
Welcome to the final class on how to become a better front-end developer. My name is Mauro Accorinti, and I will be your graduation drill sergeant for this email.
Let's finish this boot camp!
Ready? Get set...!!
DROP AND GIVE ME 50.
What? You thought the drill sergeant thing ended? You haven't finished the boot camp yet. Imagine being screamed at... NOW!
Today we're going to talk about being an exceptional frontend developer
Throughout this series, you've learned about front-end goals and the Venn diagram. You've learned about hard skills and soft skills. You've also learned how meta-skills can help you practice and execute those other skills more effectively.
But one thing we haven't touched upon yet is how this ties into being an exceptional front-end developer.
To do that, let's quickly go over what being exceptional means
We here at the Exceptional Frontend newsletter (i.e. me) define being exceptional in a very particular way.
There are two parts to it:
You have to try to be different and unique in some way that, compared with those around you, makes you the exception.
That different and unique thing you strive for has to showcase your knowledge and expertise in a positive way, which makes it easy for others to see you're exceptional.
Notice that I don't say, "Be the best in a field or a skill." Being exceptional is about being different and showcasing it. It's not about being the best.
And while being the best at something would technically make you exceptional, at the end of the day, how do you measure how good somebody is at a skill? How would you prove it? What would you do to communicate it?
It's just a lot easier to create a uniqueness and showcase that. That's how you become exceptional.
So then, what makes an exceptional front-end developer?
If we take all the knowledge we developed from the last three emails of the boot camp and combine it with what we just learned about being exceptional, you find our answer.
An exceptional frontend then is someone who can:
Develop the skills and knowledge involved in trying to reach the three main goals of front-end developers. These goals are:
To build web pages based on designs and requirements with best practices
To work well together with others (Project managers, developers, clients)
To advocate for and create the best user experience possible
Use frontend skills and knowledge in a way that makes them unique compared to those around them. Which helps, in turn, showcase those skills and expertise to others.
In summary:
It's the intersection between the skills and knowledge you have and how you use them to be unique. Got it maggot?
Here's a pretty Venn diagram you can pin up on your wall for some added motivation.
And... that's the series!
CONGRATULATIONS ON GRADUATING FROM THE "HOW TO BECOME A BETTER FRONTEND DEVELOPER" ARMY BOOT CAMP!!!
It has been an honor to be your drill sergeant throughout this series. We'll be back next week with your typical story-driven emails you've come to love.
Leave me a reply to this email if you enjoyed the series.