My journey to becoming a web developer

sfsfdf Profile Picture HackerNoon

Warning

This article is meant to really really help people new to web development in my experience your situation might be different, I say this because I don’t want to bore you with trivial things you may already know. The next prologue is a short story that’s part of my life, you can skip that if you don’t like stories.

Prologue

After this experience, I started applying for software development companies, after several tests and interviews, I landed on the cruel reality, “I don’t have enough knowledge to be a valuable part of a company. of software development or at least I don’t have the knowledge they want, but what about university, what did they learn there?”, maybe just a theory, I answered myself or I lost my way somewhere when I should have defined what I want to do after university.

And now? I founded that I needed a fresh start, at this time I assessed my possibilities, I am from a small developing country, in a small town far from the main city in which I am far from to have more possibilities to have a job or to learn because the companies are there, the universities and the subsidiaries of the biggest companies like Microsoft, Conduent, Allorica, etc., are there, far from me. The best solution was to start learning on my own, via the internet, reading tutorials, watching videos, following YouTube channels, etc. In my research, I found a “y” organization that helped me in my new beginning. For now, I won’t mention which organization it is until I can see the result of this journey, and if you are starting to learn how to become a web developer, I want to give you some tips that will help you really, i don’t have a job right now, but i think this is the right way to get a future dream job, for me.

Chapter 1: The Beginning

If you want to become a web developer, you may be thinking of becoming a full-stack developer, and the first step to achieve this is to learn how to be a good front-end developer, which means you must first learn HTML, CSS and JS, but we’ll leave JS for another interesting article.

HTML5

Maybe you already know, the first thing you need to learn is HTML, where would the web and us be without the beloved HTML. One of the recent additions in the latest version is the inclusion of semantic tags, multimedia, graphics and more. Semantics helps devices interpret content better, especially for content readers and search engines, you can find a detailed summary about HTML5 in Mozilla’s developer page.

picture

    Codecademy gives you a good free beginner’s guide to HTML along with interactive activities if you want more advanced content, you have to pay for it.

    Once you know the semantic tags and enhancements of HTML5, an article by Shay Howe gives you a broad and comprehensive view of HTML and CSS in action. This article covers many topics between box model, positioning, typography, backgrounds, list, media, forms and data tables. It is therefore a complete guide.

    If you prefer, Udemy has plenty of courses in HTML, CSS, JS, and related topics starting at $19.99 and up.

    If you prefer printed pages, there is a long list that includes CSS and JS, I choose some based on reviews and comments:

CSS

A beautiful girl doesn’t need makeup, but HTML isn’t a beautiful girl, it’s more of a skeletal body, so that’s where CSS comes in.

picture

The base

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 allow you a little, and if you want to deepen this article is for you, to Shay Howe too. A fun page is here if you want to take a break.

Another basic concept is to know the box model which if you read Shay Howe’s lessons you will know what it is.

Finally on the base, knowing floats and positioning is essential to start understanding how to play CSS dynamically.

CSS grid and flex box

Here we enter the most dynamic part of CSS concepts. CSS Grid and flexbox are two different layout systems, the difference between them is that when you use CSS Grid you have to think in two dimensions, rows and columns (included), and when you use flexbox you have to think in one single dimension: rows or columns (exclusive), depending on the meaning used in flexbox. Both tools offer you flexibility and dynamism and you should apply one or the other according to your layout needs.

There’s a really great guy called Wes Bos who has a whole series of videos on his webpage or YouTube channel explaining CSS Grid and Flexbox. A complete guide to Flexbox is here and if you want to take a break there are some links to have fun practicing Grid and Flexbox.

An additional resource for learning CSS Grid by Rachel Andrew from her website or a listing on her YouTube channel.

Transitions and animations

One way to add soft touch to our webpage when some attributes change like paddings and margins add transitions and animations, not all in our page can have transition but applying in some special cases could help to make the page more user-friendly and avoid coarse changes.

Responsive design

Responsive web design is the ability for a web page to be viewed on any type of device regardless of size, the following is a good guide to learn how to create responsive web pages, here another link to learn from another angle.

If you’re feeling brave, you can practice with a complex example of Lingulo.

CSS preprocessors

Once you have mastered the main concepts of CSS, you can take a look at the alternatives of CSS preprocessors, these tools are easy to use if you already have enough knowledge of CSS because the syntax they use is like CSS but with expansions.

The most famous CSS preprocessors are Sass and Less, there are more than these two, you can try any of them and choose your favorite. In this link you can see a comparison between them.

Here are two great videos explaining how to start using Sass and Less.

Additional Resources

Completely Free HTML and CSS Course from HTML and CSS is hard.

Conclusion

There is a lot of content on the web about HTML and CSS, this is a small guide according to my learning experience, this is just the tip of the iceberg, there is more on HTML and CSS to cover, for example, there are other topics like user interface (UI), user experience (UX), CSS frameworks, etc., but you need to have basic knowledge first and as you go and as you go you’ll see how you create magic on the web, so don’t stop learning.

One last thing, learning is not enough, you have to put the concepts into practice, how? Well, for example, clone a webpage you like and see how well you apply what you’ve learned. If you don’t practice, you will forget what you have learned.

Good look at your complete trip.

Key words

Related stories