As a Code Newbie: What makes a good developer?
As a code newbie, the questions I have are :
- What hard skills do I need besides what’s taught in school?
- What soft skills do a developer need?
- How can I build them?
The answer to question 1 is pretty simple: take a look at the program outline and learn what’s not on there. I did that. My program does offer some web development courses but only touches the basics. HTML and CSS it is.
As for question 2, the most common issue in the programming industry I read online is communication-related. It could be communication between junior and senior developers, developers and the business team, or developers and clients. It boiled down to communication between tech and non-tech people.
So, how can I build them? I choose freeCodeCamp to learn HTML and CSS because it’s free to try out, plus it has a big community. Since I don’t work with anyone, I decided to write documentation for my projects (not documenting is also an issue I read), pretending I am explaining it to non-technical people.
I thought it would be best to show you the process with table and bullet points because, well, it was all over the place.
|Timeline||What I did|
|Before||Zero coding experience and barely use English in my daily life.|
|2018||Started learning HTML and CSS on freeCodeCamp and completed the Responsive Web Design course.|
|05/2019||I wanted to build a “real” project. I learned Git and GitHub by watching The Coding Train’s videos and put together a responsive Jekyll blog from scratch (the grandparent of what you see now).|
|Learned how to work with APIs, also from The Coding Train.|
|Attended local workshop and meetup to meet developers. Joined a collaboration program, Chingu, for team experience, I worked with three other developers online creating a Momentum clone.|
|Learned some basic React through FreeCodeCamp’s Front End Libraries course.|
|03/2020||I stopped in the middle of my freeCodeCamp Data Visualization course to focus on my internship.|
Things I found effective 👍
- Joining the 100DaysOfCode Twitter challenge to build up momentum.
- Using CodePen (an online code editor) at the very beginning because setting up the environment can be scary. CodePen allows you to focus on the code.
- Pushing my projects to GitHub. Very good for practicing basic Git commands like
- Going beyond tutorials (I think this is the most important skill I gained) by:
- Writing documentation for every JS30 project. Each consist of a demo gif (shows users the result without clicking further), users stories (what can users expect), notes on all the “building blocks” (what do you need to know to rebuild this).
- Combining tutorials into one project, for example, the random GIF generator.
- Learning a few shortcut keys. Definitely a productivity booster!
Things I found not so effective🤷♀️
- Trying to contribute to open source projects by participating in Hacktoberfest. Good experience in terms of learning how to do pull requests, but I was only able to make “typo fixes” type of commits…
- Following a “learning path” instead of learning what you would like to learn at that time.
I wish someone would have told me🤔
- Feeling lost is part of the process. Just keep learning.
- You grow your learning path, not plan them.
- The basic setup is Git, any code editor (Atom, Sublime Text, Visual Studio Code), and a GitHub account.
🍥Appendix A: Projects I built
Mostly from tutorials.
- HTML&CSS survey form
- HTML&CSS product landing page
- HTML&CSS technical documentation page
- HTML&CSS tribute page
- HTML&CSS portfolio page
HTML and CSS project(s):
- Basic Data Structure and Algorithm
Data Structure and Algorithm project(s):
- Responsive Jekyll Blog from scratch
Responsive Website project(s):
- NodeJS&API random gif generator
- NodeJS&API client server database
- NodeJS&API twitter bot
Working with APIs project(s):
- React Tic Tac toe
- React markdown previewer
- React drum machine
- React calculator
- React pomodoro clock
- React random quote machine
🍥Appendix B: Notes I took
Practicing English as well!
- 5 bugs in 2019
- React and Redux
- React Tic Tac Toe additional features
- React Tic Tac Toe
- Event Capture, Propagation, Bubbling and Once
- OSI model
- Reference vs Copy in JS
- Dev tools tricks
- Rest operator and Spread operator
- DOM Manipulation
- Computer Networking Basics
- Functional Programming
- Regular Expressions
- HTML and CSS
🍥Appendix C: For memories
My ugly Jekyll blog
Fancy hamburger menu in version 1:
Version 2 is cleaner than version 1:
Hamburger menu in version 2:
Version 3 has syntax highlighting and orange as accent colour:
After that, I cut down some contents.