To every back-end developer who's ever thought...

"Why can't I make ​sense of front-end development?"

​Here's how to turn that ​"front-end ​stress"
Into calm focus​ so you can finally
Enjoy building front-end features and
Apply for ​those ​​full-stack​jobs

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...

 

  • Get the project running on your machine
  • Figure out what commands you need to make the project build
  • Realise you need to install Node.js
  • Scratch your head over the weird Typescript errors you encounter
  • Spend hours understanding why the Javascript framework isn't working
  • Figure out how to publish the application

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.​

Is it just ​you?

 

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.


  • There were ​"fat arrows" everywhere
  • All the javascript files had these weird import statements at the top
  • There was some kind of build process that you had to trigger to make anything work in the browser
  • I didn't have Node.js installed so nothing worked

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.​

#1 ​A clear picture of the ecosystem

 

From the outside looking in, front-end is a mess of build tools, javascript compilers, minifiers, bundlers, code editors.

 

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. 

#2 ​Knowledge of where the shortcuts are

 

You can waste a LOT of time in front-end development.

 

Take webpack.

 

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.

 

It's a lot of effort just to compile and bundle up your javascript/css files so they can run in the browser.

 

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.

You can grok front-end development (quicker than you think)

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.

​Understand front-end in four hours (or less)

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...


  • Time-saving tips and tricks 
  • Handy quick guides 
  • Visual explanations of how the front-end ecosystem works
  • Jargon Busters for all the key front-end terms

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.

What's covered?

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

  • What is front-end?
  • What tools do you need to get started?
  • The big picture
  • The simplest application you can build (HTML)
  • Add a little "interactivity" (Javascript)
  • Style things up (CSS)
  • Separate your concerns
  • A brief introduction to some Javascript fundamentals
  • What on earth is an IIFEE? (and why do I need one?)

Hour 2 - Javascript Today

  • Which Javascript language version should you use?
  • The big picture (revisited)
  • Web Application Bundlers
    • Javascript compilation
    • Minification
    • Bundling
    • What Web Application Bundlers are there?
  • Typescript - an alternative
  • Try it yourself: Typescript without the headaches (using Parcel)
  • Bringing in third party libraries (package management)
  • Module Resolution (aka referencing javascript code)
  • Try it yourself: Export/Import modules

Hour 3 - The three big frameworks (a quick start)

  • What are Javascript frameworks?
  • Why would you use a framework?
  • Why wouldn't you use a framework?
  • Should you learn Javascript first?
  • How quickly can you spin up a new project?
  • What is Angular?
  • What is Vue.js?
  • What is React.js?
  • Try it yourself: Spin up a new Vue.js application
  • Try it yourself: Spin up a new Angular application
  • Try it yourself: Spin up a new React.js application

Hour 4 - Build your features

  • Tips for building your front-end features
  • Keep it simple and focused
  • Iterate quickly with mockups
  • Break big features down into components
  • Use hard-coded data in your HTML (examples in React, Angular and Vue)
  • Use hard-coded data in your Javascript (examples in React, Angular and Vue)
  • Iterate while it's easy
  • Making AJAX Requests (using Fetch or Axios)
  • A word on authentication
  • Go forth and build your features

Get a head-start on front-end development

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.

Finally "get" front-end development​

#1

#2

#3

​Front-end in four hours (PDF)

​Finally understand the front-end (Javascript) ecosystem.


​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.

$29

Finally understand front-end.
Buy now for $29!

Who wrote this?

​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.

​​Finally understand ​front-end
or your money back

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.


© Jon Hilton All rights Reserved

Privacy Policy