The modern era of web development is fascinating. Plenty of frameworks and libraries to keep us productive. There are thousands of quality resources to read and learn from. Apart from the plethora of books, blogs, courses, web developers got Google, YouTube, Twitter, LinkedIn, and Stackoverflow as their best buddies. However, you may find it a bit overwhelming as a beginner.
If you are getting started with web development, I have a few things to share with you. After spending over a decade on various web technologies and stacks, I suggest focusing on these five points as a beginner.
Surprised? Yes, the first one is about learning Git! Learn Git commands and workflow so that you can manage your project source code in a better way. It will also help you in collaborating with many other projects of your interest on Git.
At a minimum, you should know the following,
- How to initiate a Git repository?
- How to stage/unstage your code changes?
- How to commit and amend a commit? What are the standards for a good commit message?
- How to push your changes to the repository?
- How to merge another branch to your branch?
- How to resolve merge conflicts?
There are plenty of articles and videos available already to master all the above. I have created a beginner-friendly video to explain these, and you can find it from here,
Along with Git commands, also focus on knowing GitHub and Workflows. You need to know,
- How to create and manage repositories?
- How to fork a repository and contribute to it?
- How to manage branches?
- How to create and manage Pull Requests?
The more you use GitHub to manage your projects publicly, the more you get a chance to collaborate, share, and learn. I would highly recommend an active GitHub profile from the very beginning of your web development journey.
In case you want to know more about how to increase engagements on your public GitHub repositories, here are a few tips to help with,
Here is a Tweet that ignited some excellent discussions as comments. You may want to have a look when you have time.
Building small, mid, advanced projects with them not only clarifies how things work under the hood. It also improves debugging in each layer.04:39 AM - 21 Nov 2021
Now let me focus on how to keep learning fundamentals when the frameworks and libraries are so much in demand. Plan for side projects and be consistent with it. You may have to start working on a library or framework immediately because your job/role demands it. But, do not stop doing side projects using fundamentals.
- Colorify: Color a circle(a div) with different button clicks(red, green, blue, etc.).
Learning Goals: Laying out buttons, basic styling of div with border radius and centering, click handlers, DOM manipulation to set values.
- Random Colors: Pick a random color and set that as a page's background color.
Learning Goals: Almost similar to the above plus arrays and picking a random element from it. You can also improvise this one with array methods like fill() and others.
- Password Strength: Check the strength of a password(weak, ok, strong).
Learning Goals: Styling a password box, Handling key events.
- Knock Knock: Create three doors with CSS and images. Clicking on each of the doors reveals some surprises.
Learning Goals: CSS animation, DOM manipulation, basic CSS, UX.
- Rock Paper Scissors: A very popular game of minimally 2-players.
Learning Goals: Showing creativity in building a good UX, Layout, logical branching.
- Move the Ball: Move the ball(or any other object) using layout knowledge. Like using the CSS Flexbox properties, you can move the object in various places in the UI.
- Tick Tac Toe: We all know what it is. A simple game of X and O.
- Survey Form: A bunch of input fields within a form accepting user inputs. The submission of the survey takes place by clicking a submit button.
Learning Goals: HTML Forms, Form Handling, Form Action, Layout alignment using CSS.
- List Pokemon: Make an API call to get the Pokemon information and list them the way you want. You can extend the same project to add a search/find pokemon functionality.
Learning Goals: CSS Layout, API call using fetch.
- Online Pet Shop: A bit more advanced project to build an online pet shop. List the pet details with images and other descriptions like name, type, price. Allow users to add the pets to a cart and checkout with a fake payment.
I can keep going, but that will make this article a giant size. If you are interested in discussing any of these projects or any other project ideas, my DMs are open on Twitter. Please feel free to reach out.
- Next.js (Well, react-based but deserve a separate mention)
You may like one or more of them but, do not be biased about it. By biased, I mean you build your opinion early that "It's the framework/library" you should use always. At times, bias may force others with your opinion as well.
As a beginner, be open to new learnings. Pick and learn things that come on your way. You will always have your favorites, but that shouldn't come your way of trying out new ones. Being flexible will enable you to try out and contribute to various open-source projects from the early stages of your career.
It isn't exciting (at least compared to coding) to document things. However, it is a valuable part with a high return on investment(ROI). I would suggest documenting both, Progress(the journey) and Learning.
An effective way of documenting progress is to join a self-invested challenge like #100daysofcode on Twitter and let the world know how are you progressing. It also helps in connecting with like-minded, getting feedback, and motivation to go on.
You should document your learning as well. In whatever form it suites you. I would suggest taking notes in the markdown(MD) format as it makes it easier for you to resurface your rough notes as a blog article.
Tapas Adhikary@tapasadhikaryOne suggestion about taking notes/documentation is, take them in the MARKDOWN format.
It would be an easy transition of your notes to article whenever you wish to.
Some great tools to help,
- VS Code extension for MD
- Markdown Monster05:00 AM - 19 Nov 2021
Taking notes and revisiting them from time to time is like renewing your learning as you wish. I hope you start that right now, and if you are doing it already, GREAT!!!
There are no alternatives to Practice what you learn to learn it better. The same applies to web development as well. You need to allocate time to practice. A theoretical knowledge goes only a few miles but, Practice makes it a long way!
Here is my 5-points principle for logical practicing of any new concept,
- Pick a topic to learn. If you can break it into smaller topics, that's great.
- Read about it from all your favorite sources. If there is a follow-along (step-by-step) tutorial to practice, do that.
- Create your example out of the learning. The smallest is the best. There could be multiple examples as well.
- Create GitHub projects for each of those. Start implementing.
- Got stuck? Revisit the topic, learn, continue the project to complete it. Go to the next topic.
Web development is a fascinating technology field. You will enjoy it as much as you explore, learn, and create things. I hope the tips shared in the article help you. Please comment below to let me know. Also, if you have any questions, feel free to ask them. Please like/share this article so that it reaches others as well. The developer illustration in the cover image uses a free artwork from subpng.
All the very best with your web development journey 💪.