HTML + CSS + JS = Fronted Developer but not modern Fronted Developer
Current Market is looking for a modern front-end developer. So, you need to learn about modern tools. There is a various modern tool and it’s difficult to choose the right tool and order of learning.
Here is a roadmap by roadmap.sh
Here is are ways by Nitish Kumar:
I will help you in knowing the right tool and in the right order.
Every big thing started with a small step and to become master of frontend development you need to start with the basics.
Basics
CSS Framework
Package Manager
CSS Preprocessor
Build Tool
Front-end Framework
Testing
PWA
Performance
CSR
SSR
Static Site Generator
These are the things which is very much important for front-end master. I’ll discuss each of this one by one.
Basics :
👉 HTML: Never underestimate the HTML. There are lots of things in HTML which are not being used by people but if you once you know this is also available then you will be surprised.
👉 CSS: It’s tricky and interesting because it styles the page and how it works is a little surprising sometimes. You make your page beautiful with it and you define every property by yourself. It’s like building your own home.
👉 JS: JS is the only things which bring logic and programming to the life of frontend developer. It is very much flexible and surprising. It makes own website functional like we see slides we get from verified before sending to the server. Dynamically sending the request to the serve.
HTML is just mark-up language and it will never give you an error. CSS will also never complain you about the wrong code, but JS will do that. Once you learn the basics you are ready to move to the next section.
CSS Framework
It’s is very important to learn CSS framework because it will make your life easier. You need not do every styling by yourself. You can use the standard predefined style from the framework. If you have a good grasp on CSS, then you can easily override the CSS property and customize the style of the page.
Bulma, Bootstrap, Materialize, Semantic UI and Foundation. There are the top 5 CSS framework and you must learn at least one and that is Bootstrap.
If you ask me to recommend you then I’ll suggest you two framework.
👉 Bootstrap { Every Developer must know}
👉 Materialize { Any Material Design Framework }
Package Manager
A package manager is a programming language’s tool that automates the process of installing, upgrading, configuring. It also creates project environments and easily imports external dependencies.
After learning CSS Framework, you might think of learning JS Framework but when you will start learning that ultimately you will come to package manager.
NPM is node official package manger.
Some people don’t use npm then what they use they use Yarn (unofficial package manager)
Yarn is a common project developed by such companies as Facebook, Exponent, Google, and Tilde.
So might think that I told you different thing what you should follow. You can live life with npm there is nothing bad with it but yarn is enhanced version of npm.
Go with npm after some year/month you will know what is advantages of yarn.
❌ Don’t directly jump to yarn because master must know about npm also.
CSS pre-processor
A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS pre-processors to choose from, however, most CSS pre-processors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on.
These features make the CSS structure more readable and easier to maintain.
LESS
SASS
STYLUS
POSTCSS
This increased productivity and everyone wants things very fast, as fast as it can’t be.
Build Tool
👉 Task Runner: Task runner for automating all of those boring repeated processes i.e Grunt.
👉Modular builder: bundling many web packages and different dependencies, including CSS files and images, then creates modules i.e. webpack.
👉Linter: Code linting is an important thing to have incorporated in your project because it is a way to increase the code quality
👉 Formatter: code formatter modifies or fixes your source code, according to the defined configuration previously set up.
Front-end Framework
👉 Angular It was built by Google and it the best for enterprise application.
👉 React It was built by Facebook and this is widely used among all the framework.
👉 Vue It is growing exponentially, and it has so much potential that it might someday become number.
Testing
In the test, we test our UI is fine or not because our code is going to run on different devices with different configuration It impossible to test everywhere and every page manually every time. So we write a test to automate these things. There are 3 types of test
👉Unit testing: Unit testing is a type of testing to check if the small piece of code is doing what it is supposed to do. Unit testing checks a single component of an application.
👉INTEGRATION TESTING: Integration testing is a type of testing to check if different pieces of the modules are working together. The behavior of integration modules is considered in Integration testing.
👉FUNCTIONAL TESTING is a type of software testing whereby the system is tested against the functional requirements/specifications.
PWA
Let’s take the example of Whatsapp on your phone. When there is no network, you can still open the app, check past messages and even reply to someone. When the phone gets the internet connection, the messages are being automatically sent in the background.
👉 SERVICE WORKER
👉 NOTIFICATION
👉 LOCATION
👉 DEVICE ORIENTATION
👉 STORAGE
Performance
Once you get a grasp on the things which I told you about. You need to improve the website in terms of performance. There is a various tool for testing your application performance.
👉 LIGHTHOUSE
👉 DEVTOOL
👉 SPEED TEST
These are the tools which you will help you and based on the result of these tools, you can improve your website. So, that it will load faster on 2G, 3G or any other network also. You will also get some more way to improve website performance.
SSR
If you disable the js and then run any SPA i.e. angular react and vue you will not able to see anything more than an error message. which will say you to enable the javascript.
👉 React: Next.js
👉 Angular: Universal
👉 Vue: Nuxt
Means spa doesn't work without js. Server-side render website are the website which comes with HTML and CSS. So that HTML and CSS don’t need to be dependent on js. This helps low configuration device to load your website fast. because No JS being interpreted for Rendering UI or DOM manipulation. All the big company who use SPA have a server-side render website also means if you disable the js then also you can see the website.
Static Site Generator
Static site generator makes your website static means you can run your website without connecting to the database. It will only HTML, CSS and js which don't contact the database or API for any information.
👉 React: Gatsby
👉 Vue: VuePress
If you are having a blog with some 20 posts then It will fetch all the available post from the database and make it static, like all the posts are being written using in the new file and with HTML Syntax. In this case, I took an example of 20 posts means there will be 20 different pages.
Here are the ways by Usersnap:
Recently, some people approached me asking for advice on how to get started as a front-end developer. With its ever changing technologies and frameworks, it can be quite difficult and overwhelming starting out in the field of front-end development. In this blog post, you can find 10 tips on how to become a front-end developer! Front-end vs Back-end vs Full Stack As a beginner, you might wonder which area of web development to pursue. If you’re not 100% sure which one to follow then I recommend you read this blog post on how to become a full stack developer. If you’re already sure about front-end development, go ahead and read on. Front-end development skills needed When starting out in front-end, you might not be sure where to start. There are so many options available not only programming language-wise, but regarding tools, frameworks, and technologies as well. So make sure to be prepared of open sea. Or as Ivan would state it: Front-end development is like an ocean. You happen to have a ship, but no map. First learn the shallow waters, then go deep. 1. Learn HTML & CSS. And become good at it. I guess there’s no way around it. Learn HTML & CSS. Why? Because the basics matter. There are all kinds of different online courses available on how to get started with HTML and CSS. First things first. Sign up at Online courses like Coursera or Team Treehouse. After finishing some initial courses, go ahead and create some static web pages and iterate over and over again. I also recommend developing some small UI elements for practicing your newly learned HTML & CSS skills. Codepen.io is a great playground for that. Browse other people’s projects and participate in the community there. 2. Build things. Playing around with (small) UI elements is one thing. Creating an actual landing page or website is something different. At some point, you will eventually start using JavaScript snippets. Don’t forget to challenge yourself by building first responsive elements. So there’s only one way to becoming better at what you’re doing: Keep learning, keep building. Putting these two together, build to learn! There’s no better way to learn than to get your hands dirty. You’ve probably heard this a hundred times by now, but it is for a good reason why this is the advice most often dished out. 3. Read, read, read I guess there’s no way around this. Believe it or not. Your reading skills greatly influence your path to becoming a great front-end developer. Especially when starting out, there’s a lot of reading required. Why? At first you’ll probably read a lot of articles, guides and manuals on how to do different things. You’ll also start reading other people’s code. Or as Adam (UX Lead at CoachUp) would state: Combine that with a good book like Eloquent JavaScript, and you can up your programming game very quickly. 4. There’s more to front-end development than building a website If you followed my tips from 1 to 3, you have probably already done a course or have read a lot of tutorials and are now able to throw together a website. However, that doesn’t equate to being a “front-end developer”. Knowing how to build a website is a very small part of the front-end puzzle. I apologise if that sounds demotivating. But that’s actually the case. There is a whole load of topics that you still should learn about. If we consider performance, testing, QA and many other areas, then you really need to become a deep diver as a front-end developer. 5. Know your tools As you start your journey with front-end development, you will need to decide on your toolkit and the services you need to to make your life easier. Learning about the different tooling options is an important thing. Great tools will help you enhance and automate your front-end development workflow. There will be an ocean of possibilities but soon enough, you’ll find yourself using certain tools and apps. One of those tools will definitely be the Chrome developer tools. Why? Because you can play with HTML, CSS and JavaScript in real-time and this will give you the immediate feedback you need to learn quickly. Additionally, node, npm, bower and many more excellent tools are there to facilitate your daily work. And don’t forget about versioning. 😉 6. Version control will save your life. OK, maybe this sounds a bit too exaggerated. But trust me on that. Version control will save you some sleepless nights. Instead of trying something and having it blow up in your face or hitting command+z a trillion times, you can simply trash your branch and roll back to what was working previously. So make sure to become an expert at Git. It will not only save you countless hours, but it will also give you more confidence to try new things. (Thanks Rob for pointing that out!) 7. Be the middleman As a front-end developer, you need to be aware that you put yourself in some kind of middleman role. As a middleman, you are in touch with QA people, clients, UX experts as well as other developers. You will need to take different perspectives into consideration. That is why, besides learning the basics of HTML, CSS and JavaScript, you need to make sure to be able to communicate clearly. Or as Kyle stated it: Always keep in my what good UX is not only from a user’s perspective, but also from other developers perspective. 8. Do not rush. Along the way, you will ask yourself why you do this and you may want to just stop. It may be tempting to just give up. But don’t. If you’re at that point, I have only one advice for you: Do. not. give. up. Set aside one or two hours every other day to learn. Take a lot of breaks and make sure that you really know the basics. And never rush. The basics form the foundation which will help you get to the next level. If you feel stuck, don’t be afraid to ask questions. Everyone goes through this phase and having the patience to stick it out will help you come out in the end as a pro in front-end development. 9. Dive deep into frameworks So, you made it until here. Awesome! Now it’s time to get involved with certain frameworks. Start by looking at the more popular ones and work out for yourself why they do things in a certain way. Figure out whether each one is a good thing. Understand how frameworks and industry standards have changed over the last couple of years. Looking at older frameworks, you will probably discover approaches and code which are now obsolete. Do not forget: Sometimes, using a framework isn’t the best option, but most of the time it’s well worth knowing about them. Thanks for the tip Robbie! 10. Get involved with open source projects Contribute to FOSS on GitHub. Don’t shy away from big frameworks that seem well established. Even framework authors make mistakes. You may be spending most of your time reading code but don’t see it as a waste of time. You will pick up good habits and practices along the way and will gain some experience working with other developers. When you feel ready to write some code, go through issues on the repository and pick one problem which is manageable for you. Getting involved with various projects, especially open source, will not only make you a better front-end developer, but it will also help you build up your very own online brand as an active, experienced developer. Wrapping it up. The path to becoming a front-end developer will definitely take some time. As presented in this blog post, becoming a front-end developer is not only about learning various front-end frameworks and programming languages. It’s about the interaction, responsibilities and roles as a front-end developer. Because the web is a rapidly evolving universe, great front-end developers should never stop learning. Even little things like following front-end experts on twitter will have impact on your learning curve. You need to have some patience to get there. Rushing doesn’t make sense because it won’t make you happy. Never forget to have fun while learning and experimenting. This article was brought to you by Usersnap – a visual bug tracking tool for every web project.
Here is a roadmap by Educative:
So by now, you’ve probably figured out that this internet thing is here to stay. As of May 2019, there are 4.2 billion internet users in the world, and nearly 1.7 billion websites, with the number increasing every second. Every business, brand, and idea has a website. Every thought is instantly shared, every memory recorded, and every click on our smartphones leads us to a new webpage, each with links and buttons leading us onwards to other websites. Websites are to the internet what oxygen is to the real world, and building websites is one of the simplest and most profitable ways to enter the world of software development. If you’re ready to walk the road of a web developer you can get started here. There are two paths towards becoming a web developer: the back-end or the front-end. Back-end developers build server-side software; they’re responsible for all the performance, stability, security and speed of your site or app, all of which power the front end or user-facing side. Front-end developers, on the other hand, get to build everything a user – or client – sees, touches and interacts with on the screen, such as layouts, information, engagement, etc. Front-end developers are both creative and tech-savvy, and act as the bridge between designers and back-end programmers. So, how do you go about becoming a front-end developer? It’s a simple, three-step process: Understand the basics Go beyond the language Trial and error Step one: Understand the basics In order to build a website, you first need to have a fundamental understanding of the web, how it is structured, and how your application fits within it. What is the web, what is a server, what is a client, how do various devices communicate with each other, how does the website you build on your computer in San Jose end up on someone’s phone in Shanghai – these are foundational questions about web development which you must have in-depth knowledge of. Once you have a complete understanding of networks (i.e. IP addresses, internet protocol, packets), databases (i.e. SQL, NoSQL, caching), clients, and servers, you can then move on to the actual basics of web development: coding. Front-end developers work with the user – or client – facing side of the website. Their code runs on the client’s browser and determines how the website looks (i.e., the user interface, layouts, navigation, etc.), how it requests data from the server, and how it interacts with the client’s machine. The coding languages used to develop the client-facing source code are HTML, CSS, and JavaScript. widget HTML (Hyper Text Markup Language) is the foundation of any website. It is the code that describes the content of your page, which is then rendered by the browser. You can use HTML to add text, images, audio, video, and more to your website. HTML is easy to learn and the best part is, you can write it in any text editor. It’s important to remember that it’s not a programming language, but a markup language. CSS, like HTML, is not a programming language either, but a styling language for HTML. To put it simply, HTML describes the content while CSS describes how the content should be formatted – basically, anything that controls the look and feel of the page. This allows HTML to go back to its original job as a structural language. JavaScript is where programming gets fun! HTML structures our content, and CSS stylizes it. These are great to create static websites, but when the entire world around us is constantly on the move, why shouldn’t our websites be? JavaScript allows us to implement dynamic elements into your website, such as interactive maps, animations, updates, and more. Once you have mastered these basic coding languages, you are ready to move on to Step Two: Go Beyond the Language. Step two: Go beyond the language Now you know the concepts for how to write basic front-end code to create structured, stylized, and dynamic websites. Let’s see how we can push this knowledge even further. widget Web Frameworks make the development and integration of front- and back-end programming easier. A web framework is basically a package of files and folders of standardized code which can be used as a basis to start building a site. In other words, it’s a starter pack that allows you to build on it. The most common frameworks available to front-end developers are: Angular, React.js, Vue.js, Bootstrap, Semantic-UI, and more. Each framework has its own pros and cons; some are strict and fixed while others are very loose and only give guidelines. Do your research to find the framework – or frameworks (sometimes one is just not enough) – that works for you and use them to take your skills to the next level. You can explore working with these frameworks in-depth here. Command Line basics are essential to becoming a developer. The Command Line Interface (CLI) is a tool into which you can type commands to make the computer performs tasks. Commands can be combined to achieve a variety of outcomes, and since you’re able to communicate with the computer directly, this is the more powerful and efficient way to control your tasks. The most common CLI is the Bash Shell, which is the default on Linux and Mac systems. Every developer has their own ideas about the best ways to code/program a website, but they all agree that Version Control is the most essential part of building a website. Version Control manages all your project’s files so that you can keep track of all your builds and changes. Git is the world’s most popular version control system due to its flexibility. It remembers any change ever made to a project, making it easy to revert to earlier versions; it allows for multiple people to work on a project simultaneously, which fosters collaboration and productivity; and it allows you us to work on multiple features at the same time. There are several options to choose from when it comes to frameworks and command line interfaces, but when it comes to version control, there is only one king in the jungle. You’ve learned the basics of what goes into front-end programming and the skills and frameworks to help you in creating even better websites that are dynamic and versatile. Now, you need to practice working with these frameworks and various tools. Step three: Trial and error You know that thing they say about needing 10,000 hours of doing something in order to become an expert at it? They’re right. Once you’ve learned how to code and how to build powerful applications that do exactly what you need them to do, the only way you can get better is to practice. Build sample websites. That neighbor of yours who wants to be a poet? Help her create an interactive page with a twitter scroll and links to her published works. Your cousin that sells terracotta jewelry on Etsy? Build her website with photos, reviews, testimonials, links to her social media, and more. That friend of yours who wants to be a graphic designer? Write an application that places his graphics and creativity front-and-center. The more you practice and the more you build, the more intuitive the entire process will become for you. Before you know it, building websites and applications will become second nature. Step four: Keep learning Yes, all of the above steps are enough to become a front-end developer. Once you have mastered the fundamentals, built on them, and practiced, you are ready to become a front-end developer. However, the internet keeps changing and new and more advanced methods of programming launch every single day. It is essential that you keep up-to-date with new technologies and keep learning. This is not to say that what you have learned so far will not matter – your basics will always hold you in good stead. But in order to grow, you must keep track of what is cutting-edge, and update your skills accordingly. Now that you know the steps you need to take, check out Educative’s Become a Front-End Developer track to put what you’ve learned in this post to practice. In this track you’ll find several fantastic courses designed to teach you everything you need to know, from the basics to a comprehensive guide towards launching your own website.
Comments