Search for a command to run...
Are you a beginner in web development? I have a few tips for you to sustain and progress your web development goals. Please read on.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
thanks. really good article. Getting started in web development can be both exciting and challenging. Web development is a journey that requires patience, perseverance, and a willingness to constantly learn. I know this from my own experience. The key is to try to enjoy the process of designing and building, and don't be afraid to learn new technologies and techniques along the way. The more hands-on experience you gain, the more confident and capable you will become as a web developer. Here https://www.linkedin.com/pulse/web-development-companies-from-ukraine-november-2023-reviews-umen-7mm7fis are more ideas for inspiration for you. More information about web development in general. The more hands-on experience you get, the more confident and capable you will become as a web developer. Who knows, maybe you'll be lucky and get a job there. I wish you every success.
Very true 💯
Hey! At Smiligence, I work as a Web Development technology consultant . I have more than 4 years of experience advising both small and large on Web-Development related issues. I also enjoy blogging about my experiences on Smiligence . You can leave a comment on my blog or contact with me on Smiligence Website . I do hope you enjoy my blog.
You are welcome SURYA
Great one, Tapas Adhikary 🔥
One more tip I would like to add is 'being consistent and following a single path.
I want to send this blog to Kaushal from two years back 😫
Thanks, Maxi 🤩.
Your feedback means a lot to me.
These are great tips.
Sometimes newbies are searching for hacks or weird tips and tricks, if they just follow some basic steps they can really grow!
Thank you for writing this Tapas Adhikary.
Thank you Eleftheria Batsou.
I add one more tip:
The biggest mistake I see beginners make is trying to build something too big too soon then.
They fail, They stuck, They get frustrated and quit
So start with small projects that you estimate will take days or a week, Then do another and another. Over time you will have the experience and knowledge to build more significant and more visionary projects.
Ravin 🚀 💻 , I appreciate it. Your tip is a very practical one that most of us face/will face. Thanks for sharing.
Thanks for sharing!
Could you please show me how you did the table of contents, it's really nice 🙂
Thanks, buddy!
When you are in draft mode, the option for table of contents option is there under the settings. So, hashnode did it, not me 😄
This series talks about Tips & Trics you would love to know and apply in your day to day programming.
You may need to merge one or more arrays in JavaScript. Please read this article to learn how to do it with related usages and differences.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
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,
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,
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,
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.
Let's name the top 5 JavaScript-based web development frameworks/Libraries. There is a high chance I've covered your favorite one already.
CSS side?
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.
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,
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,
All the very best with your web development journey 💪.
