I remember creating my first website 1 year ago by writing some basic CSS and HTML, till then I have learnt a lot and I want to share all that information with this article so not everyone face the problems that I faced while starting.
This will be an article to learn basics of Frontend and Backend and somewhat DevOps as well, so this will be the best article to revise all the topics and If you are completely beginner to web development this can be a great article to get started.
I will be creating 3 post for completing this article, Here are the content of each article
- All You need to know about frontend
- All You need to know about Backend
- Concept that Both frontend dev and backend dev should knew to connect frontend to backend and vice versa
You cant learn everything just by reading and even implementing it, for actually understanding everything you need to do practice, cramming the code don’t make you a programmer, you must know how to google your queries and how to ask your questions in online forums, and for having question you need to start developing something on your own, so please think of this article as a reference to implement the concept in your own project and I wish you best of luck,
So without a delay lets get started with the contents.
- HTML and CSS
- Bootstrap and other 3rd party styling Library
- Advance Animation (Do You need it?)
- DOM Manipulation
- jQuery (Why is it deprecated or in other terms not being used)
- Version Control — GIT 101
- Basic Networking and how to use terminal
- How to fetch data from API
These are all you need to know for making a frontend for any website but I want to add some more things that I learnt while building new things.
For those of you who don’t use node you can still follow through the basics.
- Nodejs and Express
- Database 101(Relational and Non Relational)
- Connecting Backend with database
- Building CRUD API
- Connecting Backend with Frontend
- What’s Production all about
- Cloud Services
- AWS vs Azure vs GCP
- What do you mean by scaling?
- What is docker?
It is pointless to learn something which you never use in your real life or learning something that you are not using currently, A Good Programmer is one who knows how to search questions ,fix bugs and learn as he/she go along.
But if you don’t know what a technology can be used for, Its a let down and can consumes your 100s of hours just to search something that is trivial to know.
This is the first post for the series of 3 articles , Before getting started I want you to go through the frontend roadmap.
Lets Get Started with the frontend.
HTML and CSS
HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. while CSS is a language that describes the style of an HTML document and its elements.
There are many things you need to know about CSS and for learning those things there are many resources you can choose from, personally I build new tools and searched stack overflow as I face issues but there are somethings that you need to know prior to the development.
What you need to know in CSS
1. CSS Selectors and How CSS Selectors Work :In this Article, You will learn how to select the html element and design those elements according to your need.
2. Modeling your web page into boxes :How to break the webpages into boxes and how to place those boxes at wherever you want in the website.
In this article you will learn about how to give space to an object and style it such that no other part of web page gets affected by the styling of a particular box.
3. How to create a grid or style a list of Items: This is the most confusing part for the beginners that how to create a list of items that are aligned 3 in a row or 4 in a row or how to make it responsive in such a way that when the website is loaded on mobile the list is aligned according to the width of the screen. This is the place where people started looking for a 3rd party library like bootstrap because they provide a pre created templates that are easy to use just copy a script and copy a html and add to the html page and its done.
Well its good for a small project but when you started to create a big project you need to know how the alignment works. For this I have added a bunch of links to learn about grids.
- A ultimate guide to Flexbox by Emmanuel Ohans
- A complete guide to grid
- Flexbox CSS In 20 Minutes by Brad Traversy
4. Changing Text : Text is a fundamental block of any web site. Learn how to apply some design to it via CSS.
5. CSS Colors and Gradients : This is my favorite part because I love to experiment my website with different colors.
This is the most essential skill to master for a web developer because because more than 40% of website traffic came from the mobile users, for making a website responsive media queries came into picture which in layman terms an if else condition i.e. if the width or height of the window is of certain pixel we can load different CSS and make the page responsive.
Here are the awesome resources for learning about responsiveness
1. CSS Media Queries & Using Available Space | CSS-Tricks (css-tricks.com)
Many of the programmers don’t learn about media queries , because it is relatively time consuming and due to this they seek the help of the 3rd party like bootstrap or material UI, Using these libraries are not bad as it saves a lot of time but you should also know about how to make a webpage responsive by yourself.
Bootstrap and other 3rd party styling Library
There are 100s of free to use library that are really easy to use in the website just add a script tag to the html page and done, These libraries are the best way to save time while creating everything from scratch require a lot of time.
How to use the bootstrap like a pro: Bootstrap Beginner Crash Course
The Main Question is should I use it ?
I don’t like using 3rd party libraries because I think this gives me a sense of handicap when I want to make something creative but I know many developers who like to use bootstrap and using bootstrap is a skill in itself which is required by some of the employers so I guess Its good to know about the bootstrap and how it works.
About other libraries, I would say it depends, you can create some small project to learn new libraries as it will give a sense of confidence on how much you can use the resources to build new stuff.
Animation is the most fascinating thing to watch the way to present a website is the skill that needs a eye for design but presenting a website in a way to attract user is a a work for a Product manager, As a developer your job is to implement those ridiculous demands and implement it at ease.
I have categorized the animation into two parts
1. Animation on particular Objects: The Article that I attached is the best place to learn about animation. I want to talk a little about the Keyframes and transition in particular .CSS transitions allows you to change property values smoothly, over a given duration. Keyframes gives more control over the intermediate steps of the animation sequence than transitions. Keyframes is more powerful as we can create our own animation as we want i.e. Keyframes can be defined as a group of transition.
2. The entrance and exit animation : These animation are done on the pre-existing object present on the website and these animation will get triggered when certain events are called like scrolling or while page loads. The Tool that I use for creating such animation is GSAP. GSAP is a tool used to create a timeline on the webpage which means we can create any type of animation and set a time period to it. You can use Keyframes as well to create these animation but I like to think that GSAP is relatively easy to use.
For this article I have created a list of topics that you
Disclaimer: If you are a Beginner you don’t need to study all these concept, you must focus on building new projects for the time being because eventually you may forget these in future. You just need to know these things exist for future.
2. Call stack
3. Value Types and Reference Types
5. var vs let vs const
6. Modules and Namespaces
7. DOM and How Browser renders a web page
8. this, call, apply and bind
9. Prototype inheritance and Prototype Chain
10. Classes, New Keyword, Constructor
11. Object. Create an Object. assign
12. map, reduce, filter
13. Map and Set
14. Weak Map and Weak Set’s
15. Pure Functions
17. High Order functions
18. Promises and async/await
19. Inheritance, Polymorphism and Code Reuse
20. setTimeout ,setInterval
21. Iterators and Generators
22. Message Queue and Event Loop
26. async vs defer Loading Strategies
27. Event Bubbling & Capturing
29. Debouncing vs Throttling
31. Local Storage and Session Storage
33. Web Storage APIs
35. Web Sockets
37. Functional Programming
DOM Manipulation is the heart for making an interactive website, You are triggering events even if you move your mouse, press a key or hover on some element. Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.
Everything on the website has a meaning to it which UI designer want to showcase.
Here are some of the articles to understand DOM Manipulation from scratch
1. Understanding Dom with examples : This article have a lot of examples and method you don’t need to know all, I personally don’t know all of them but this article will give you a sense of understanding on what to learn in DOM manipulation
2. Dom Manipulation — YouTube : Implementing is the best way to learn, This playlist consist of 4 videos on DOM manipulation by Brad Traversy, This is enough you need to know to get started with the frontend project and getting yourself an internship in frontend.
While Reading Articles and watching videos helps you find new methods and new techniques to approach a problem, the implementation of the new acquired skill is really important,
A Collection of application ideas which can be used to improve your coding skills. : This is a GitHub repo with a lot of app ideas which you can implement by some DOM manipulation and will be good for side projects and learning Dom manipulation in depth
Should I use jQuery for Dom manipulation?
Version Control — GIT 101
I want you to consider a situation, You are a web developer and are developing a website for a employer and you tell create a website. Now the employer ask you to change some things, you made those changes.
Now After watching that design your employer wants you to revert those changes. What will you do? Reverting manually takes time you know :(
Lets take one more case you create a website and you think of adding new features to the website but when you are adding the features you somehow crashed the whole website. How will you get back to that place where everything was working fine?
That’s where the version control come into picture, I want you to watch this video Git & GitHub Crash Course For Beginners This will make you somewhat familiar with git. Now you know what git is Its time to know about GitHub.
GitHub is a code hosting platform for version control and collaboration. As a developer you have to work with many developers for developing a product.
How can you work with other developer on the same product. Don’t you think if he change some code it must be visible in your code as well because you are working on the same product but how can you manage it. If you write a line of code for a feature how will you make ensure everyone in the team knows about it? That’s where GitHub come into picture. There are some ways you can collaborate with other developers. Here is an article on how you can collaborate with other developers Using Git and GitHub for Team Collaboration.
Ever wondered how your web page get loaded when you search for something. As a web developer you need to know about basic networking.
Here is a perfect article to get you started with the networking Developers Need to Learn Basic Network Engineering
When you type some address in the search-bar, There is a call that been send to the server where the website is being hosted and that server send all the files that are needed to load the website
When you are streaming a video you are sending a request to the server that send you the video packets and that is how your video in YouTube gets loaded.
The connection that your device and YouTube build is a TCP connection.
TCP connection is being established when you cant afford to lose data-packets, when you are watching a video you cant afford to lose a a video data otherwise you would not be able to watch the whole video.
Lets take it in this way, When you video call someone and you have a poor connection do you need the packets that is 5 second old and somehow not able to reach to your location, While playing game sometimes the game buffers due to poor connection do you need to find out what happen in the during that period? The answer is no. This connection that I talked about is UDP connection.
Ever wondered How does BitTorrent work?, This is the good time to know about it.
There are a lot more regarding the networking and we will cover that in the backend section.
How to fetch data from API
An API is a set of programming code that enables data transmission between one software product and another. It means that there exist a lot of data in the internet like about weather or data about food but how can you access all the data into your website and spread that data in your webpage? That’s where the fetch api comes into picture. You can fetch the data via creating a promise that will respond you back with a response and that response can be used to spread across the website. Here is an article to get you started with fetch API
So for complex apps, a library like React is definitely worth the extra learning curve at the start. It means you can write more maintainable apps with fewer bugs. And once you take the time to learn it, writing React is faster and more fun as well!
Here are the resources that are best for beginners to get started with react:
ReactJS Tutorial Introduction: This tutorial is a best for beginners and free as well, If you can afford some paid course from Udemy Then that will be a great way to start learning react, There are very talented Instructor Like Brad Traversy, Stephen Grider, Maximilian Schwarzmüller and many more :D
Here are some articles
1. A Complete Beginner’s Guide to React
2.The React Cheatsheet for 2020 📄 (+ real-world examples) : This is a cheatsheet to revise all your react concept and when you get stuck with the syntax of react
If you have learnt about react you must know that there are different states that need to be managed.
These are the best article to learn what redux is A cartoon intro to Redux | by Lin Clark | , Editing An Unforgettable Way to Learn Redux
You Might Not Need Redux. People often choose Redux before they need it. You must know what’s the problem you are in before getting started with exploring new libraries. If react works fine for you there is no need for adding redux to it
As The graph state redux is fairly difficult to implement for a smaller app. So you must know that what app you are building if your app is fairly simple. It does not need redux and redux will only increase the complexity of the app
All You Need To Know About TypeScript
The resources for you to learn about Typescript
1.TypeScript Tutorial : A youtube series of typescript to get you started.
2. TypeScript: The starting point for learning TypeScript : Here is the documentation for learning typescript
In the End
There is so much more to cover in the frontend like authentication and getting data from the frontend, but that requires a little bit knowledge of backend. And I will try to cover that in the 3rd article of this series of 3 article.
If you have questions, related to article please comment I will try to answer as much as I can and If you want to add some stuff that I forget to add in this article please comment and I will try to add that ASAP , After this article published I will start working on the second article which will be on Article :D
If you like this article please leave claps to boost my morale XD