The Full Stack Development Journey Part I: Frontend Fundamentals
There’s no avoiding the fact that learning programming takes serious dedication. In fact, it’s such an ambitious goal that the most crucial step is to develop the right mindset.
You should have monthly goals about topics you want to focus on in addition to daily progress goals (e.g. number of Codeacademy lessons, number of commits on your side project, and number of points). If you ever feel discouraged or overwhelmed, shift your frame of mind and focus on simply completing your daily task.
The other crucial component of a successful mindset is “learning to learn.” Seasoned developers are resourceful, constantly searching on Google, scanning through documentation, and chatting with fellow programmers when they hit a bug or roadblock. The things you build in the early stages won’t be beautiful, so enjoy the process itself and remember: there’s always a way to get it done.
The following time estimates assume 20-25 hours of study/week and some previous foundation in coding principles.
Phase One: HTML and CSS ~ 2 weeks
Get comfortable building static websites with only HTML and CSS. Avoid using templates at first by building the static site from two blank files: index.html and styles.css.
For both html and css I recommend Codeacademy. It goes step-by-step, and you can comfortably move at your own pace. The downside to Codeacademy is that there is a little too much hand-holding, so be sure to supplement it with your own project, which you start with a code editor. I recommend Sublime Text or Atom, and later you can look into Visual Studio Code, which has a couple more advanced features.
Phase Two: Responsive Layouts ~ 2 weeks
Step up your static game by making your websites responsive so that they look good on desktop, tablet, and mobile screens. I recommend first learning CSS Grid, which is a “native” functionality that most new browsers will all be able to display.
After that, consider Bootstrap, which is an open source component library. It includes a “grid system” which actually incorporates CSS grid and has additional “out of the box” components, such as sleek buttons.
In general, developers rarely code common components such as a navbar or button from scratch; there’s no reason to reinvent the wheel. Making sites perfectly responsive is an advanced feature — it can always look a little better — so often, developers will use templates.
Bearing this in mind, try to focus on only a couple crucial aspects of responsiveness: add a “hamburger menu” for mobile view and change a photo layout from horizontal (desktop) to vertical (mobile). It’s during this stage that you should also get comfortable using your browser’s web inspector. This will help not only with the styling but make you more comfortable with the overall HTML DOM.
While new libraries are introduced every year, JS looks like it will stay for decades.
- Deploying static sites for free – Github Pages
- Image inspiration and backgrounds – 500px
- Re-usable code snippets – Codepen
- Design inspiration – Dribble
- Help with bugs – Stackoverflow
To take your JS efficiency to the next level, you should master the easy coding challenges on coderbyte and leetcode. After you’re comfortable with the easy challenges, you can move onto medium or try codefights, which is my personal favorite. The challenges are gamified with a point system, which you can use to motivate yourself with daily goals, and even place on your resume as a way to attract recruiters.
After you’ve given 3-4 months worth of dedicated attention to these phases, you’re ready to move on to Part II.