Disclaimer This article is intended to help really really beginners in the field of web development according to my experience, your situation could be different, I say it because I don’t want to bore you with trivial things that you may already know. The next prologue is a short story that is part of my life, you can skip that if you don’t like stories. Prologue After that experience, I started applying for software development enterprises, after several tests and interviews I landed to the cruel reality, “I don’t have enough knowledge to be a valuable element in a software development enterprise or at least I don’t have the knowledge they want, but what about college, what a learned there?”, maybe just theory I answered my self or I lost my path in someplace when I should have defined what I want to do after college. So now what? I founded that I needed a new beginning, at that moment I evaluated my possibilities, I’m from a small developing country, in a small town far from the main city in which I’m far from more possibilities to have a job or learn because the enterprises are there, the universities and affiliates of the biggest enterprises like Microsoft, Conduent, Allorica, etc., are there, far from me. The best solution was to start learning by myself, through the Internet, reading tutorials, watching videos following YouTube channels, etc. In my research a found a “y” organization that helped me with my new start. By now I will not mention what organization it’s until I can see the outcome of this journey, and if you are starting to learn how to become a web developer I want to give you some tips which really will help you, I don’t have a job currently, but I think this is the right way to get a future dreamed job, for me. Chapter 1: The Start If you want to become a web developer you maybe are thinking of becoming a full-stack developer, and the first step to do that is learning how to become a good front-end developer, and that means, you have to learn first HTML, CSS, and JS, but we will leave JS for another interesting article. HTML5 Maybe you already know, the first thing you have to learn is HTML, where would the web and us be without the beloved HTML. One of the recent additions in the last version is the inclusion of semantic tags, multimedia, graphics and more. Semantic helps devices to interpret better the content, especially for content readers and search engines, you can find a summary detailed about in the page of Mozilla page of developers. HTML5 gives you a free and good beginner’s guide for HTML accompanied by interactive activities if you want more advanced content you have to pay for it. Codecademy Once you know about semantic tags and the improvements in HTML5, a gives you a wide and complete view of HTML and CSS in action. This post covers a lot of topics between the box model, positioning, typography, backgrounds, list, media, forms and data tables, so this is a complete guide. post of Shay Howe If you prefer Udemy offers a lot of courses about HTML, CSS, JS, and topics related from $19.99 and more. If you prefer printed pages, there is a long list which includes CSS and JS, I choose some according to the reviews and comments: HTML5 for Masterminds HTML, CSS & JavaScript Web Publishing HTML5, The Missing Manual HTML5 and CSS3 All-in-One For Dummies HTML5 Games Head First HTML5 Programming The Definitive Guide to HTML5 HTML5 Games Development by Examples CSS A beautiful girl doesn’t need makeup, but HTML doesn’t a beautiful girl, it’s more a skeletal body so here where CSS comes in action. The basis The fundamental you need at first is to know how to use which can break the CSS cascade, the already let you know a bit, and if you want to go deeper is for you, from Shay Howe too. A funny page is if you want to get a break. selectors and specificity lessons of Shay Howe this article here Another basic concept is to know about the which if you read the lessons of Shay Howe then you know what is about it. box model At last on the basis, know about and is essential to start understanding how to play CSS dynamically. floats positioning CSS Grid & Flexbox Here we are entering in the most dynamic part of the CSS concepts. CSS Grid and flexbox are two different layout systems, the difference between each other is that when you use CSS Grid you should think in two dimensions, rows and columns (inclusive), and when you use flexbox you have to think in one dimension: rows or columns (exclusive), according to the direction used in flexbox. Both tools offer you flexibility and dynamism and you have to apply one or other according to your layout needs. There is a really good guy called who has a complete series of videos on his web page or his YouTube channel explaining and . A complete guide to Flexbox is and if you want a break there are a couple of links to have fun practicing and . Wes Bos CSS Grid Flexbox here Grid Flexbox An additional resource to learn CSS Grid from Rachel Andrew from or a on her YouTube channel. her web list Transitions and animations One way to add a soft touch in our web page when some attributes change like paddings and margins are adding and , not all in our page can have a transition but applying in some particular cases could help to make the page more user-friendly and avoid rude changes. transitions animations Responsive design is the ability for a web page to be seen in any kind of device no matter its size, the next is a good guide to learn how to make responsive web pages, another link to learn from another perspective. Responsive web design here If you feel brave you can practice with a complex example from . Lingulo CSS preprocessors Once you dominate the main concepts of CSS you can take a look at the CSS preprocessors alternatives, these tools are easy to use if you already have enough knowledge about CSS because the syntax they use is like CSS but with extensions. The best-known CSS preprocessors are Sass and Less, there are more than just those two, you can try any and choose your favorite. In this , you can see a comparison between them. link Here are two interesting videos where explain how to start using and . Sass Less Additional Resources A completely free course about HTML & CSS from . HTML & CSS is hard Conclusion There is a lot of content throw the web about HTML & CSS, It’s a little guide according to my learning experience, this is just the tip of the iceberg, there is more about HTML & CSS to cover, for instance, there are other topics like the user interface (UI), user experience (UX), CSS frameworks, etc, but first you need to have a basic knowledge and as you go further you will see how you create magic on the web, so do not stop learning. One last thing, learning is not enough, you have to put in practice the concepts, how? well, for instance, cloning a web page you like and see how much you apply what you have learned. If you don’t practice you will forget what you learned. Good look on your full-stack trip.
