5 tips for beginners to web development

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.

1. Learn Git and GitHub

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,

Increase Eengagement On Your Public GitHub Repositories on freeCodeCamp

2. Learn Fundamentals. Here is Why and How

As a beginner, focus on understanding and practicing fundamentals. For example, if you have started with JavaScript-based web development, focus on learning Plain JavaScript(aka Vanilla JavaScript), HTML5, and CSS. Frameworks and libraries are remarkable, and we can not scale well without them. However, it would help if you focused on fundamentals well, really well.

Here is a Tweet that ignited some excellent discussions as comments. You may want to have a look when you have time.

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.

Here are a few project ideas using plain JavaScript, HTML, and CSS,

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

Learning Goals: CSS Layout and FlexBox, JavaScript DOM in applying the style.

• Tick Tac Toe: We all know what it is. A simple game of X and O.

Learning Goals: UI Layout, JavaScript Logics. Similarly, you can make a Web Calculator.

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

Learning Goals: CSS Layout, Handling JSON data from a local store, localstorage web API, JavaScript Payment web API, Single page application.

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.

3. Do not be a "Framework Biased" developer

Let's name the top 5 JavaScript-based web development frameworks/Libraries. There is a high chance I've covered your favorite one already.

• React
• Angular
• Vue
• Svelte
• Next.js (Well, react-based but deserve a separate mention)

CSS side?

• Tailwind
• Bootstrap
• Bulma
• Materialize
• Foundation

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.

4. Take Notes of your Progress and Learning

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.

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

5. Practice, Practice, ....., Practice

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,

1. Pick a topic to learn. If you can break it into smaller topics, that's great.
2. Read about it from all your favorite sources. If there is a follow-along (step-by-step) tutorial to practice, do that.
3. Create your example out of the learning. The smallest is the best. There could be multiple examples as well.
4. Create GitHub projects for each of those. Start implementing.
5. Got stuck? Revisit the topic, learn, continue the project to complete it. Go to the next topic.

Conclusion

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.

Let's connect. I share my learnings on JavaScript, Web Development, and Blogging on these platforms as well,

• Follow me on Twitter
• Subscribe to my YouTube Channel
• Side projects on GitHub

All the very best with your web development journey 💪.