Photo by Christopher Gower on Unsplash
Web Development for beginners
All the tips and resources you would require to start your web development journey.
Before starting web development, I did a lot of research about how to get started, which are the latest technologies in this domain and then I started with the actual web development work. Initially, I started with front-end development and just developed static web pages with some cool styling. But, when I started to dig deep into web development, I realized that there were many additional things that I needed to have my hands on.
Web development has a lot to things and mastering every concept of the web would take some time. From my initial years exploring web development, I have noted various points on the related topics, which I have shared in this article. Implementing all these points and tips will help you become a great web developer. At the end of this article, I have aggregated some resources that I have been using to be productive in various phases of web development.
I have mentioned topics in a sequential order which I followed, and I suggest you can do the same.
Front-end development
Start with the basics of HTML and CSS. These are very simple and you can learn these technologies at w3schools. Try to make simple static web pages using HTML and CSS. Understand the box model, class, ids, tags, transitions, transformations and media queries in CSS.
Once you are comfortable with CSS, start with Bootstrap. It is a front-end framework with the main focus on responsive, i.e. mobile-friendly web development. This will make your development faster and improve your efficiency for both desktop and mobile-based web development.
Now, start with Javascript. Understand the DOM, DOM manipulation using Javascript. Try to go through all the core concepts of Javascript.
Now, try to make simple projects like a ToDo App, any simple browser game using Javascript or a website with some cool transitions and animations.
Back-end development
There are many technologies that you can use for back-end web development. I would suggest starting with Ruby on Rails / Node.js and MySQL. These technologies are very simple to understand and will help you in understanding the request/ response techniques in a web browser and how to interact with the database and back-end.
Node.js, Express.js and MongoDB are more popular nowadays. One of the advantages of Node.js over PHP or RoR is that Node.js uses Javascript for the back-end as well, so you don’t need to learn a new programming language as you had used Javascript for front-end development. MongoDB is a NoSQL database, which stores data in documents and collections rather than tables(which MySQL uses). So exploring both databases will help you understand the structure of both types of databases.
Make projects that have very basic database requirements like signup and login functionality, and try to perform CRUD(create, read, update, delete) operations on some data using these technologies.
HTTP Request/Response, Cookies, Sessions and AJAX
Once you are comfortable with basic front-end and back-end technologies, it’s time for you to jump to some advanced concepts on the web.
Explore server sessions, HTTP Requests and Responses, HTTP sessions and cookies. It will help you understand browsers, servers and how messages are sent from client to server and how the server processes those requests and sends responses.
Implement Ajax on your previously developed web application(that you developed with the back-end). Ajax is one of the most important concepts in web development. It will also broaden your knowledge of the request/response paradigm.
REST APIs and more
As you get a clear idea about the HTTP request/response model, you can now try to build an API in a RESTful manner. RESTful APIs are used extensively in applications because of their statelessness, and understanding these technologies can help you get more exposure to various advanced topics and also help you during job interviews.
Try to implement simple E-commerce APIs which use HTTP methods to perform CRUD(create, read, update, delete) operations on products.
Popular frameworks
Apart from trying out Laravel or Node.js, you can also try popular frontend frameworks like Angular, React, and Flutter for Web. This will help you understand concepts like stateful/stateless widgets, local storage, components, etc. React.js along with Node and Express.js is a very popular stack nowadays.
What to do after all these things?
KEEP LEARNING!
Try some latest technologies
Don’t just stick to web development, try out mobile application development, read about system designs, explore machine learning, etc. It will widen your vision across various domains.
Do internships/ research.
Expand your network.
And finally, share your knowledge with others. :)
Now, as promised, the following are some resource names that you will be requiring at various phases of web development. Make sure you save this so you don’t have to search at ten different areas and waste your time.
IDE for web development — Brackets, Sublime
Icons — FontAwesome, Glyphicons.
Fonts — Google Fonts
Colours — UIGradients, HTMLColorCodes, FlatUIColors
Version Control — Github
I have pushed some projects on my Github account which you can check out.
You can follow me on Twitter and LinkedIn for more such articles or if you need any guidance.