My Journey to Become a Web Developer

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 HTML5 in the page of Mozilla page of developers.

Codecademy 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.

Once you know about semantic tags and the improvements in HTML5, a post of Shay Howe 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.

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 selectors and specificity which can break the CSS cascade, the lessons of Shay Howe already let you know a bit, and if you want to go deeper this article is for you, from Shay Howe too. A funny page is here if you want to get a break.

Another basic concept is to know about the box model which if you read the lessons of Shay Howe then you know what is about it.

At last on the basis, know about floats and positioning is essential to start understanding how to play CSS dynamically.

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 Wes Bos who has a complete series of videos on his web page or his YouTube channel explaining CSS Grid and Flexbox. A complete guide to Flexbox is here and if you want a break there are a couple of links to have fun practicing Grid and Flexbox.

An additional resource to learn CSS Grid from Rachel Andrew from her web or a list on her YouTube channel.

Transitions and animations

One way to add a soft touch in our web page when some attributes change like paddings and margins are adding transitions and animations, 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.

Responsive design

Responsive web 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, here another link to learn from another perspective. 

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 link, you can see a comparison between them.

Here are two interesting videos where explain how to start using Sass and 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.