🇪🇸 Spanish Version

Hi everyone 👋

I will be using this blog to share tutorials and thoughts about my career as a Software Engineer. It may be helpful for you or your close ones. If you can follow me on my networks and react to this post, it would motivate me to continue.

Life is not easy many people have had to start over because of a wrong decision, a calamity, or a pandemic like this one. My motivation for writing this article is to share with people who need a new direction, an alternative with which they can obtain well-being and abundance for themselves and their families.

If you found this article for yourself, you may already know what this is all about. However, you may know someone looking for something new to undertake, share this post and let's change lives. As motivation for the reader, here are some aspects that I consider actual of the development industry:

• You don't need a college degree to become a developer (most of the time).
• A mid-range computer running Windows, Linux, or Mac is enough to get started.
• Working in development/technology enables benefits that are not as common in other disciplines (we'll talk about them later).

My name is Mateo Garcia. I am 25 years old, and I have been working as a web developer for seven years. My time in the academy was not brilliant; The technology industry opened the doors for me to work as a developer without asking for a professional degree. After all this time, I am convinced that anyone could have achieved the same without the diploma, and that's why we are here today.

How to take advantage of this article

1. Take the time to understand each concept without being anxious. It is not necessary to understand everything on the first try. Move forward when you are ready.
2. Take good notes. A strategy to internalize the concepts is to take good notes. You can use a physical or digital notebook.
3. Use the resources attached to the content and practice by yourself. Don't worry if things don't go well the first few times. Practicing is progress.
4. Do not lose motivation. Even if you don't realize it, you are moving forward just by deciding to read this article, study, practice, look for help and repeat. We are a community, and we are here to support each other to achieve our goals.

Table of Contents

1. The benefits of the programmer
2. What does it mean to be a programmer?
3. What does it mean to be a web programmer?
4. I want to be a web developer!
5. Fundamental Concepts
   1. Computer Proficiency
   2. Code editor
   3. HTML
   4. CSS
   5. Javascript
   6. Choose a framework
6. Don't stop learning!
7. What's next?

The benefits of the programmer

The technology industry is well known for the benefits it gives to its employees, it's hard to talk about it without sounding like a braggart. However, I believe that it is one of the most influential factors in getting people interested in this discipline and that is why I want you to know some of the benefits that you could enjoy working in technology:

• Higher salaries than other engineering disciplines, sometimes with payments in dollars.
• Being part of a team with excellent professionals
• Additional health plans, Internet subsidies, bonuses to improve your office, budget for formal and informal education, etc.
• Working remotely, partially remote, or in dazzling offices.
• Unlimited vacation (take as many days as you need) or additional days beyond those established by law in your country.

What does it mean to be a developer?

From the verb to develop, developers are people who acquire knowledge to create software (programs, applications, apps) and from that, they are hired to create a product with a purpose in the market. When someone is developing, communication occurs between a machine and a human being through a set of rules or syntax called programming language, which is written in a document as if you were writing a letter or a script in a word document.

There are different types of developers, each focused on the uses we make of technology in our lives. A mobile developer worked on the Candy Crush level you just passed. A web developer created the functionality with which you uploaded a product on Amazon. A driver developer programmed the board of the washing machine with which you washed your clothes. These are just a few examples.

What does it mean to be a web developer?

The web was born in 1989 thanks to Tim Berners-Lee's vision of automating the transmission of scientific documents between universities. Ten years later, his invention was used to boost digital commerce; large companies were making their products and services reach more people, everyone wanted to be on the Internet, the feeling was incredible.

Returning to the present, we find it suspicious and even absurd that a company does not have a presence on the Internet. That is why almost all of them seek to have a digital presence, reach more customers and generate more sales. Web sites work as tools that can help a product grow and improve, so the need arises to have a person who can program a website or a web application. That's where we appear, the web developers.

Web developers are people who have specialized their development skills in web browsers like Chrome, Mozilla, Firefox, and Safari (Yes, in mobile too 💪). They have trained through different free or paid resources on the Internet. After a while, they have applied for their first job in technology (with no professional experience), and there they are, revolutionizing the market.

I want to be a web developer!

As I mentioned before, not having a college degree is not a limiting factor to entering the development world. You would be curious to know how many people work in Tech without a degree or with one in a different area. I think this is the industry of second chances.

Nevertheless, I want to be honest with you: To succeed, you will have to be conscious and proactive in your process. You will manage your own time, will choose your study material, will discover your learning methodology, and will be the one to determine if you are making progress.

If you have decided to accept my invitation, the next step will be to understand the fundamental concepts that every web developer should know. The goal of this article is not to turn you into a developer in 30 minutes or 1 hour. It is for motivating you and giving you the tools that, using your time, will allow you to become a developer and bring that impulse to your life to do something new.

Fundamental Concepts

There is a long list of concepts that experienced developers end up carrying in their backpacks. I'm not going to lie to you is extensive. Many of those are learned on the fly and are part of the continuous learning that forges the career. From my perspective, these are the most important concepts that every web developer should master to apply to their first job:

Computer Proficiency

It is no secret that a large portion of the world's population does not know how to use a computer and it is understandable. Nowadays, computers are still luxury items, and it is easier to master them when you have been using them since childhood. Learn how to use one, improve your typing, speed up your ability to move between applications, learn how to do a good Google search (look for solutions in English, if you don't know it use a translator).

Pic by fauxels from Pexels

Code Editor

A code editor is a canvas on which developers write their programs, sites, or applications. It is a simple text editor like Notepad or Microsoft Word but with special capabilities to use programming languages, technically you could write a website with your Notepad (Don't do it, please).

Pic by Kevin Ku from Pexels

Every developer chooses their text editor and customizes it to feel comfortable using it as a day-to-day tool. Now it's your turn to take a look at the most used editors and choose yours!

• Visual Studio Code (Personal recommendation)
• Atom
• Sublime Text

HTML

Web development is the evolution of printed content. Magazines and newspapers have been disseminating information for years, which today, sites seek to occupy. That is why the most basic analogy of a website can be a magazine or a newspaper (with superpowers).

Pic by Evi from Pexels

Before producing magazines, there must be a content definition, each page has sections repeated and some that are unique, it has titles, paragraphs, images, etc. Using HTML, we can make the content definition, establishing on each page the content we want to share.

To give you an idea of what you can do, here are some uses you could put an HTML document to:

• Define site titles or headings
• Adding paragraphs of text describing the headings
• Adding images and videos that add meaning to the information shared
• Implementing forms that store user information

At this point our site does not have a good visual aspect or interactivity, it only has "flat" content and the next step is to make it look good visually, and thus attract the attention of customers.

Here are some of the free resources with which you can learn HTML and gain experience:

• HTML Basics - Mozilla Developer Network
• How to create a Web Page with HTML - The Practical Dev
• HTML Basics Start From Zero - The Practical Dev
• HTML tutorial for Beginners - Programming with Mosh

CSS

The aesthetic aspect of any product or service can impact its profitability, it is easier to sell something beautiful than something that is not. CSS provides the aesthetics of the site. It allows us to define text colors, background colors, sizes, spacing, distributions, and much more; to use it, you only have to create a style sheet and select the HTML elements you want to modify.

Pic by Greta Hoffman from Pexels

To give you an idea of what you can do, here are some uses you could make of a CSS document:

• Change the color or size of the font.
• Specify specific or relative sizes
• Adjust the layout of a set of elements
• Appear or disappear elements according to device size

At this point our site has a better visual aspect, it is not interactive, but it can capture the attention of customers and can convey any message with aesthetics. You could sell a site only with HTML and CSS, however, it is not so common since the interaction is generally preferred but there are many sites on the Internet that are made only with these two technologies.

Here are some of the free resources with which you can learn CSS:

• CSS Basics - Mozilla Developer Network
• Learn to style HTML using CSS - Mozilla Developer Network
• HTML and CSS crash course - Scrimba
• What the flexbox - Wes Bos

Javascript

Eventually, websites start needing interactivity. We can't stay making static sites (HTML + CSS) when you have at your disposal the ability to respond to user events, send dynamic data, or perform direct online conversions. Companies are moving fast, and no one wants to have the least innovative site on the market. That's why this programming language plays a fundamental role in modern sites and applications development.

Javascript is a programming language that enables the interactivity of modern websites and applications, connects the HTML document with programming logic generating richer user experiences and vigorous sites.

Pic by Alexandre Bringer from Pexels

To give you an idea of what you can do, here are some uses you could make of a Javascript document:

• Search for an HTML element and change some properties such as color, position, size, content, etc.
• Listen when a button is clicked, when a key is pressed, or when there is a scroll (Use the mouse wheel) and do something.
• Store unique information about a user and generate it on the fly in the future (Write HTML dynamically).

At this point you have a website with much more potential, you can transmit information through written and multimedia content, you can do it aesthetically and attractively, and finally, you can add interactivity so that the experience goes beyond just reading a magazine or a digital newspaper.

Here are some of the free resources with which you can learn Javascript:

• Javascript Basics - Mozilla Developer Network
• Learn Javascript Online
• Eloquent Javascript
• Javascript 30 - Wes Bos

Choose a framework

Some of the most valuable aspects, from my perspective, of the tech industry, are the ecosystem and communities. You'll find people improving tools, helping developers stuck in their code, or perhaps contributing to learning communities like meetups, blogs, or vlogs.

Let's talk about working tools (web frameworks). You may have heard the saying "don't reinvent the wheel", in web development, the wheel has evolved to solve the most common problems when creating websites and web applications. A web framework is an abstraction to solve common issues in a managed/guided way.

Pic by Roman Odintsov from Pexels

HTML, CSS, and Javascript are still valid, you can make an amazing site with just those three ingredients. Frameworks just change the paradigm in which the three ingredients are combined.

I won't give my opinion about any of them to avoid bias, but here is a list of the most used frameworks in the market (in that order). It's up to you to choose the one you like the most, practice it with personal projects, and finally get your first job in technology 💪.

React

Official Docs: https://reactjs.org/docs/getting-started.html

Free Courses:

• React Course - FreeCode Camp
• React Crash Course - Traversy Media
• React for Beginners - Dave Gray

Vue

Official Docs: https://vuejs.org/guide/introduction.html

Free Courses:

• Vue Course - FreeCode Camp
• The best way to learn Vue - Vue Mastery
• Vue JS Crash Course - Traversy Media

Svelte

Official Docs: https://svelte.dev/docs

Free Courses:

• Svelte Course - FreeCode Camp
• Svelte Crash Course - Traversy Media
• Svelte Crash Course - Evan Does Tech

Don’t stop learning!

Technology moves fast, you've noticed it with the speed at which phones, appliances or applications evolve or deprecate, giving way to new and innovative solutions. The same happens with web development. New functionalities, libraries, frameworks, or knowledge that you have not acquired starts to appear in your list of priorities. It is up to you to prioritize what is most important.

You don't need to learn everything. What you need is to be current in the market. HTML, CSS, and Javascript are the three fundamental pillars; it is crucial to master them. Later it is up to you to identify additional tools that will get you closer to your ideal job and organize your time to learn how to use them.

Pic by RF._.studio from Pexels

Now what?

It is the end of the article but the beginning of a new adventure. Now that you know what it is to be a web developer and understand what it takes to be one, it's time for you to believe it and visualize yourself achieving success.

• Invest your time and money (if possible) in activities that will help you become a better developer.
• Create your notebook with all the concepts you have learned.
• Create personal projects and present them as your portfolio.
• Participate in digital communities such as Dev.to or Hashnode.com.
• Find a mentor to help you improve your skills.
• Resist frustration and start over if necessary.

I want to thank you for following this guide, I hope it positively impacts your career, and you can fulfill the purpose of being a developer. Let me know how you liked it and share it with someone who may find it helpful.

See you next 👋.