We've all been there, that moment when your boss calls you into the office and says;
"I need you to add a label next to the email field on our signup form"
And your heart sinks.
Adding a label should be simple right? That's what your intuition tells you and it's definitely what your boss thinks.
And 10 years ago it would have been; you'd have cracked open the HTML file, located the textbox, added a Label and you were done.
But front-end is a lot more complicated now.
It's not just "add a label", it's...
It's easy to venture into "simple front-end tweaks" full of naïve optimism, only to emerge, hours later blinking into the sunlight, wondering where your day went.
If front-end development was really so impossible, no-one would be doing it.
Yet hundreds of thousands of developers seem to be having a whale of a time developing front-end (or full-stack) applications (and earning good salaries too).
You can barely move on Twitter for all the tweets eulogizing React.js or Vue.js.
Why is it so much better for them?
Are they "wired differently"? Are they somehow immune to all the issues and problems the rest of us face?
Are they just more patient in the face of adversity?
A few years ago I was working as a back-end developer when I was suddenly thrown into a front-end project.
The project was written with Typescript and within seconds I was completely lost.
I'd worked with Angular 1 but this was different. It was like I'd been launched into an alien world where everything was upside down.
I fought this for a while, complained that everything was too complicated, that I didn't know how to even get started let alone work on the feature.
But then I took a step back and started asking questions. Luckily I was working with some patient front-end developers so I grilled them.
I asked what all the front-end build tools were, how Typescript fit in, what steps we had to take to build the project and what we could do to simplify the process.
By the end of this experience I realised there were two keys you needed to unlock the world of front-end development.
If you don't know what these tools do (and where they fit in the development process) you're destined to bang your head against them every time you try to do front-end work.
But when you grasp the "big picture", everything changes.
Once you understand how the pieces fit and what jobs they perform, you can work with them instead of against them.
You can waste a LOT of time in front-end development.
Webpack is one of those tools you'll probably run into when you do front-end development and it's a pain.
It's a pain because it is tangential to the job you're trying to do (build interesting features) and has it's own syntax and quirks which you have to invest time learning.
But front-end developers know how all the big frameworks, webpack alternatives (and even the latest version of webpack itself) let you skip webpack configuration entirely.
They can spin up a new project and get on with their features with barely a thought for configuration/set-up.
There are many shortcuts you can take in front-end development, and once you know where they are you can stay focused on developing your features.
Front-end development can be time-destroying and frustrating, but it doesn't have to be.
If you could get the key concepts under your belt in a few hours, instead of days or weeks....
If you knew precisely which parts of front-end to focus on (and what to avoid)...
If you knew precisely how to spin up new front-end applications in minutes...
You could focus on building your features.
You could target those "full stack" jobs.
You could enjoy the calm confidence that comes with knowing what all the front-end moving parts are and how they interact.
You don't need to spend weeks studying front-end.
Front-end in four hours is a short, focused pocket guide which will get you over the "front-end bump" in a few short hours.
It's jam packed with...
If you're after a big, comprehensive course covering every tiny detail of building large front-end applications, you probably want to look elsewhere.
If you want to grasp the fundamentals and gain the confidence to dive in to front-end applications, this is the pocket guide for you.
Because front-end is a pretty big subject and you haven't got weeks to spend understanding it, "Front-end In Four Hours" focuses on the essential building blocks (and practical advice for getting started).
Hour 1 - The fundamentals
Hour 3 - The three big frameworks (a quick start)
Hour 4 - Build your features
From "stuck with legacy" to "ooh there's an interesting front-end application I can understand...
Front-end in four hours will get you there as quickly and painlessly as possible.
Take the leap, skip the usual uncertainty and frustration that comes with trying to "understand front-end" and get up to speed by this time tomorrow.
Front-end in four hours (PDF)
A clear picture of how all the moving pieces fit together plus step-by-step guides to common front-end tasks.
Bonus #1. Downloadable Source Code
Source code for all the examples/guides.
Bonus #2. Typescript Cheat Sheet (PDF, EPUB)
A quick guide to the most important Typescript syntax.
Bonus #3. CSS Pre-processors Primer (PDF, EPUB)
All about CSS Pre-processors (think SASS and LESS). What are they, why and how to use them.
Hey, I'm Jon Hilton and I've been "doing" software development for more years than I care to remember (about 20 in fact).
My first site was a Red Dwarf fan site which I built when I was 16 and, well, I haven't really stopped "hacking" away at web sites and applications since.
I develop software for a company called Remote as well as blogging at jonhilton.net and building training materials/courses and books (like this one).
Think of me as primarily here to help you level up your development skills and find your way in the (often confusing) world of Microsoft software development.
I don’t want you to miss out on this guide and I'm confident it will get you up and running with front-end so here’s my offer to you.
Take the guide for a spin.
If, after you’ve run through the book and tried the steps for yourself, you feel you haven’t gained the a better understanding of front-end development, I will cheerfully refund your money, no questions asked, any time within the next 30 days.