Get best of the week

If I taught Frontend today. Beginner Tips

My path in web development began 5 years ago. During this time I managed to try many technologies, and in the last 3 years I have been developing in the direction of frontend.

In this article, I would like to clearly state what technologies a beginner needs to learn, as well as share methods for their development. The guide is aimed at people who are taking their first steps in web development, and in it I will try to explain in detail the essence of each technology. Also in the end I will tell you where to go next.

So you want to become a Frontend developer. What is needed for this?

Learning HTML, CSS, Javascript

HTML and CSS


These two technologies are necessary for site layout. Layout is an arrangement of text, images, buttons and other interface elements on a page.

Using HTML, we can add and describe these elements. Initially, they will be raw, with a standard appearance. To change the style, CSS is used. It allows you to specify the color, size, location and dozens of other parameters for the appearance of the element.

Website without CSS and with it

How to master


First of all, you should read the review article or video about these technologies. So you understand their essence.

Then the layout is most convenient to learn and improve in practice. Try layout layouts for pages or individual elements. You can also try to look at the page layout process on Youtube and repeat after the author.

At first it will be difficult, and you will often have to go to Google to solve another problem. But over time, you will learn to quickly find in your head the correct HTML structure and the necessary CSS properties for the layout of the element.

Where to get ideas and layouts for layout?


I used Dribbble and CollectUI , but can also be searched on Behance and One Page Love .

You can also take real layouts from UI Store Design . I recommend making layouts from Figma, as it is used by many designers, and in the future you will most likely be working with it. It is also free and works in the browser.

image

Javascript


This language starts programming on the web. It allows you to manage elements on the page, describe and control the interaction with the interface.

If we were creating a page with HTML and CSS, then JavaScript is responsible for the dynamic part of the page: animations, data display, processing of actions and much more.

Why do I need it?


A simple example. Suppose there is a page on which, at the click of a button, you need to display a modal window. HTML and CSS will allow us to make the layout of the page itself and the modal window. However, these technologies cannot capture and process the click of a button.
This is where we need JavaScript. Using it, we describe the behavior on the page. In the code we mean: if the user clicked on the button, then you need to show the modal window.

Here is an example of such an implementation using jQuery :



Using JavaScript, you can perform almost any operation on the page. However, its capabilities are not limited to the browser window. Using the Node.js platform, this language can be used for server development, building projects, and much more. In the future, you will need this to work with large projects, building from Webpack . However, I advise you first to learn how to use the language inside the browser.

How to master


Your best bet is to start learning on learn.javascript.ru . This is a great resource, which is a knowledge base for both beginners and advanced developers.

Here it is important to understand the basics of JavaScript itself, as well as the features of its operation in the browser. If some topics seem too complicated for you (for example, prototypes ), then you can skip them and come back later.

Don't get too carried away with JavaScript theory alone. I recommend that you try your hand at the same time as you study and write simple scripts. You can also try to parse other parts of the code on Codepen .

image

Gradually learn new plugins and libraries. One of the most popular and easiest to understand is jQuery.. It is much easier to interact with the contents of the page with it, and it can be quickly mastered at a basic level.

By and large, you will often resort to using third-party libraries in your projects. To better understand how this is done, I recommend trying to format the dates using Luxon or making a carousel through Owl Carousel .

What's next?


With basic skills in HTML, CSS and JavaScript, you can make a beautiful landing page, lay out the pages of an online store or blog. This is what I advise you to do in order to consolidate your knowledge in web development.

By and large, almost any interface can be written on these technologies. The only question is what specifics will the application that you are developing. The bigger and more complex it is, the more different libraries, plugins and technologies you will need to cope with the task.

image

I recommend that you familiarize yourself with Frontend Roadmap . Here are the interface development technologies that you will need in the future.

In the future, you will probably be interested in reactive frameworks like React or Vue.. To build applications on them you will learn Webpack , and to speed up the layout process, you will learn the preprocessors PUG and SASS . Or maybe you want to go deeper into the graphics and learn how to work with D3 or WebGL .

As you already understood, frontend in web development is very versatile and rich in various technologies for completely different tasks. Learn, try, experiment and enjoy creating beautiful and convenient interfaces for any purpose. For this we love the frontend.


PS I accompanied each technology in this article with a link to documentation or examples of use. You can familiarize yourself with them to get a wider understanding of web development.

More articles:


All Articles