Frontend Development| What are the Best Links and Guides? [Level 1]
Hey everyone, nerds! Today, another mega useful collection of resources for those who plan to move into Frontend development and don't know or aren't sure where to start. I want to warn you right away, in this article we will not physically be able to put together one universal guide to Frontend, it is impossible, but what we can do is offer you a selection of links that will somehow help you get started.
I divided this material conditionally into three parts - HTML, CSS and JavaScript. These skills and knowledge are enough to feel confident in web development, develop websites on your own and start looking for a job or freelance career. After each small part, there will be a small summary of links so that you do not get lost and find what you need. Let's start! (All the links are placed as a source under each image)
Documentation
Any development starts with documentation. Unfortunately, it's difficult without documentation. We had a very detailed resource article on our site with the best documentation for developers. If you haven't read it, you can check it out at the link. From this documentation, I strongly recommend to pay attention to the bootstrap framework, which is a mega fast and convenient way to write a website in one evening, correctly integrating elements into HTML code.
Bootstrap - Docs (source)
In addition, I recommend turning your attention to w3schools. This is not really documentation, but rather a set of very high quality tutorials on web development and HTML in particular. Just like in the bootstrap documentation, here is an excellent presentation of the material - you will not get lost or lost - you will find anything, even if you do not understand the meaning of the words on the screen. Ease of presentation of material and navigation for me was one of the main criteria in compiling this collection.
W3school - HTML Tutorials (source)
Well, finishing with HTML, pay attention to MDN Web Docs. This is a classic among documentation. I placed this link in the last place, because it seems to me that sometimes the material is served in very large pieces and all in one pile. For a beginner, this can be very confusing. Otherwise, the documentation has a huge number of examples, a huge amount of code available for code beginners. When I studied web development, I learned HTML from these documentations.
MDN Docs - HTML (source)
A small summary of documentation links:
CSS Links
I have always had and still have a special approach to CSS. The fact is that I never taught him and all the syntax I remembered by itself. I wrote about this in a short article on CSS. I highly recommend reading the link. There you will find a lot of useful resources that will allow you to create unique designs without knowledge of CSS. We will go through these resources very briefly in this article.
I highly recommend you start with ChatGPT. I think everyone knows what it is and there is no point in explaining it too much. You and I can use it as a tool for generating styles for our projects, for our websites. I will say right away - do not forget to specify the colors or the entire color palette, otherwise for your minimalistic site, you will get a design of bright colors like in a children's cartoon.
ChatGPT - CSS Code Generation (source)
If you are very serious about knowing CSS syntax like your native language, then I can only advise DevDocs. This is a unique resource with a collection of completely different documentations and CSS, in my opinion, is the best section of this documentation. I want to warn you right away that the documentation, especially for a beginner, can seem complicated. There are a lot of examples and rather superficial explanations.
If you decide to work with this documentation, then I recommend that you test each example from here and play with it - change values or remove some lines and look at the result. So, you look at a real example of what and how it works and, most importantly, remember it.
DevDocs - CSS (source)
For code testing, I would not recommend littering your computer with unnecessary files with tests that you will never open, and it would be a pity to delete them, so copy and paste all your code into Liveweave. This is a site that will allow you to track code changes in real time without reloading the page. A great place to practice, especially CSS, which you make changes to the code all the time in the hope of finally deciding on the desired design.
Liveweave - Code Example (source)
A small summary of links to CSS resources:
JavaScript
Great, now let's go over the JS resources. The site already has an excellent article on the best JS tutorials we would recommend to you. If you haven't read it, you can check out the link. JS, unlike HTML and CSS, is quite a complicated and complex thing, which can be problematic for complete self-study through documentation and personal experiments. Therefore, I would recommend taking the course, at least for basic knowledge.
Firstly, I would suggest a course from Scrimba. There's great stuff here, perfect explanations, and free courses. You will learn the basics of JS, write your first scripts, which, by the way, can already be used in your sites. The course curriculum places a strong emphasis on practice. And practice when learning programming languages is the most important thing. Believe me!
Scrimba - Interface (source)
Everyone decides for himself, but it seems to me that free courses on the platform are enough to set off on a free voyage and continue learning on your own. Again, everyone decides for himself.
Another resource that I recommend including in the training program is tutorials from 30 seconds of code. I just recently stumbled upon their website. In fact, this is a site with ready-made code and explanations for this code. That's all. It is unlikely that you can become a JS guru here, but you can find quite useful snippets here and pay attention to sections on interview questions or ready-made algorithms.
30SecondsOfCode - JS Snippets (source)
I do not consider this resource ideal - it will not suit everyone and not always, but it can still be useful in training and first projects. If you are planning to take a more thorough and serious approach to the issue of learning JS, then I can advise the freeCodeCamp resource. You've probably heard of it, but if not, I'll tell you briefly. This resource provides fairly comprehensive and free courses in various areas, including JS.
freeCodeCamp - JS Training (source)
You'll also find a JS Fundamentals course here, completely free, which consists of 113 lessons (for now) and is much more extensive and comprehensive than Scrimba (no offense to Scrimba). The training is a summary of the theoretical material, a few examples, and then the task of writing code. Simple, effective and popular now, because at the moment almost all educational platforms have this approach.
A small summary of links to JS resources:
Conclusion
So, I tried to collect in one article everything that I used myself. Of course, there are much more resources and useful links, but they are either not effective or are not of particular value. I highly recommend that you read all the articles that I referred to in the course of my story. This way you will learn more about the useful links that our site offers.