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 weeksGet 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 weeksStep 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.
In the event that you want to learn more advanced responsive styling, I recommend learning flexbox and you can even practice moving little frogs.
Phase Three: Javascript for static sites ~ 1 monthEnter Javascript. This is where it gets fun. Many would argue that HTML and CSS are not really programming, because it’s not as logic-based. Javascript allows for our website to have actual functionality. The fact that our browser can do something based on action, such as a click, is because of Javascript. Here is a list of all the actions javascript can respond to.
One of the ways that we can respond to these actions is by manipulating the DOM. For example, a click can cause a nav button to briefly change colors and shading to simulate an indent. There are libraries, such as jQuery, which make this DOM manipulation even easier than native Javascript (JS), but I recommend first getting comfortable with native JS because there’s really nothing jQuery can do that JS can’t.
While new libraries are introduced every year, JS looks like it will stay for decades.
Additional resources:
- Deploying static sites for free – Github Pages
- Image inspiration and backgrounds – 500px
- Re-usable code snippets – Codepen
- Design inspiration – Dribble
- Help with bugs – Stackoverflow
Once you know how to use Javascript to make your static sites functional, you should dig a little deeper into Javascript as a programming language. Challenge yourself to constantly write more clear, concise, and efficient code.
You should know about basic data structures, such as arrays and objects. You should know about variable scope, synchronous vs. asynchronous, and the Javascript event loop. For concepts, I recommend FunFunFunction, and for more practical experience, Free Code Camp, where you can put the pieces of what you’ve learned so far together to build websites for nonprofits.
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.
