DEV Community

loading...
Cover image for Beginners starter pack: how to start programming

Beginners starter pack: how to start programming

sergchr profile image Sergiy Originally published at metacognitive.me ・10 min read

Many people try to understand whether they want to program, what programmers do in their daily work, what they can do with programming at all. But they fail to comprehend oftentimes due to scarcity of such information - I would call them "initial" or "start here" articles. If you want to understand, if this kind of activity fits you, or what you'll be doing, what you may be doing, what's possible, what is not, and where to start, then continue reading.

TL;DR: pick an area that interests you, learn the basics, start creating real but tiny projects. Practice as much as possible. Then practice more.

Disclaimer: I write this as I would want to read such an article if I were in a desire to understand whether coding worth pursuing and if so, where to start the journey and what to learn. My programming experience consists of developing web applications mostly. I don't write about hardware stuff.

img

How does the programming look like?

Programming is a process of communicating with machines that allows us to explain to them what they should or shouldn't do in particular situations. It looks like speaking in a strange language to a machine, but somehow it understands you. Also, people that know the language can read the instructions you've given to a machine. There is a lot of such languages. Some programmers "speak" multiple of them.

Summary: programming is telling machines what to do.

What can you do?

By managing machines, you could create amazingly interesting and complex programs/systems that simplify routine tasks. Or, makes something fun. All the electronics are programmed to help us in our routine tasks. An automatic light bulb that turns on when you come closer? Programmed! You may even program magic worlds inside a machine. Websites, for example, or video games. Besides laws of physics and technological progress, you rely on imagination and skills to build something handy.

We have billions of machines waiting right now to do something. This is your smartphone waiting for you to open a browser to search for "how to start programming" articles. Your Wi-Fi router is expecting to handle such a network request, it asks other machines over the Internet(also called servers) whether they have such information. Those servers handle the request and send information back. All of them are programmed to do a specific set of tasks.

img

Eventually, there are billions of machines waiting for us to give them useful work to do in a cloud! Merely imagine, what kind of systems we might build upon such a quantity of computers.
Let me return to simple words. So, what I, as a programmer, can do?

  • Create robots. Obtain details, assemble them, program a robot. It relates not only to robots in a conventional sense but to all the devices that could be programmed. Say, smart home devices. Drones. There is ample space for thought to fly.
  • Create mobile applications. Similar to the ones you use every day on your smartphone.
  • Create web pages. Complex applications or websites like personal blogs, whatever. I'll be describing this one in more detail.
  • And etc.

What do programmers do in their work?

I'll describe a kind of work I do - web apps related.

A bit of "why"

Some individuals and companies are interested in creating and/or maintaining web pages that everyone can reach over the Internet. They represent a business they do in a physical world, so maybe they need a business website. Thus, people searching for such business could see their web page, read useful information, deciding whether they want to pay for the services the company provides.

Some businesses sell something online. Thus, they need a web page(simply put) that could handle customers' requests, the selling-buying process, and so on.

I'm trying to say there is a lot of demand for creating web pages(or apps if you wish).

Companies want websites, alright. Then?
They may reach out to the companies that help to create websites. Let's call them digital agencies. They have the expertise, businesses want websites, agencies create such for money.

A digital agency has programmers to do so. They know how to build a website, they build it. That's all the story in generic terms.

There are also other similar kinds of agencies out there. They only sell programmers' hours, not a website. Some of them charge per one project, which includes programmers' work, testing, gathering requirements, managing staff, and so on.

There are product companies that don't sell people's hours. They build a product that has value by itself. It's a viable(or not) business already.

What programmers do daily

There is a business side management that tells developers what they want next. Engineers discuss the plans, how they're going to implement the business' wishes, what aspects require extra consideration, and so on. Thus we have a TODO list with all the tasks for a specific project. Each engineer takes one and starts working on it.

This scheme is simplified but presents an actual set of things.

The tasks

If you're a beginner, you're gonna do simplistic stuff. Senior colleagues expect you to ask them many questions and often. While accumulating more experience, you'll be doing more intricate things and sense more responsibility.

Daily tasks vary greatly among projects. But most of them incorporate actual coding. You should make something work in a particular way. As we talk about web apps, there are a few categories of programmers.

Front-end developers. They do the stuff you can see when opening a website. Those elegant blocks, texts, modals, well-aligned images, animations on a page - the fellows in charge of that. They know HTML, CSS at a minimum to design static pages. The simple ones. HTML is a markup language to tell a browser where to place things. For example, I want to put a navigation menu at the top of my website, then 2 images just below, and at the very bottom I want to see a text saying "Sergiy's website". All of that is possible to convert to HTML, so browsers can interpret your wishes accurately.

CSS is a language of styles. It gives raw HTML elements a good look. It may set a colour for text or blocks, its size, width, height, anything. With HTML & CSS people create static websites. By static, I mean the ones that don't require additional logic such as handling button clicks, reacting on mouse double mouse click on a specific element, and so on.
what is css

Web applications are web pages with additional logic and complexity. You can see them all the time on the Internet. The online store where you buy things, it's a web app, because it handles the logic of you selecting products, adding them to a cart, opening a modal that asks you where to deliver the product, and alike. This kind of website requires front-end developers to know a programming language because you can't write such instructions in HTML or CSS. The most widespread programming language for that is Javascript.

To sum up, front-end developers create a visual part of websites, and also they build a logic that tells how the visual part should behave. Wait, are there any other parts of the website? Yes, the back-end(server) part.

Back-end developers. They write a logic that transfers, validates, sanitizes data from a front-end(a visual) part, puts it in some storage, and retrieves it. A server manages data. Why do we have a server(s) at all if a front-end(let's call it FE) part also may have logic? FE is limited by a browser environment, hence we can't do all the possible stuff there.

Server-side(back-end, BE) developers usually write an API for FE or other servers. What the API means? Let's find out what Wikipedia says:

Application Programming Interface, which is a software intermediary that allows two applications to talk to each other.

It's like mouths and ears for humans. I speak - you hear me and vice versa. Such a way of interchanging information.

For a more practical example, let's recall the online store website. You want to buy something there. FE collects your data and then sends it to a server that verifies whether it's valid, checks you in a database(is it a registered customer? does he have a subscription?), then it speaks to a bank's server that handles the payment if there was any. After all these checks and manipulations, the server answers to FE that we got this, the customer has paid for the product, let's show him a thanks message on the website.

So, FE speaks to BE via API it provides, they interchange information and work together. Some people know how to do both FE and BE parts.

Full-stack ninjas. They have the skills needed to do FE and BE. Thus, it allows them to create web apps from scratch on their own.

There are mobile developers who are FE fellows for mobiles, we can also cover that in the following section.

What things to learn to start coding

Practice, practice, practice.

So, as you now understand what kind of work the programmers do, maybe you already realize a direction you want to choose: FE, BE, mobile apps. If you don't, that's OK. All you need is more experience. You'll get it.

how to learn coding

No matter what path did you pick, you should start building a real project. By project, I don't mean an Amazon delivery system alternative. Any code you'll write can be considered a project. You could have a basic theory such as target programming language knowledge, or fundamentals of computer science. If you don't have the fundamentals, that's OK. Just jump into the creation of the actual things. It solves a problem when you have a theory you don't know how/where to apply, though it gives us a new issue. Without a theory, we may find it difficult to understand where and what we should look for when doing the actual thing. We'll try to diminish the problem.

how to learn programming

Front-end path

It also depends on what're you gonna do. For instance, if you're interested in creating beautiful designs for static web pages, HTML and CSS are enough. For that, you need to look for an "HTML guide", then after each lesson code something. Then, look for "CSS guide". Combine with HTML. You don't need to learn all the HTML elements out there. <div>, <font>, <p> and so are enough for you to just start. Then, you'll have real questions you could google. The same for CSS, but there is more information you should know first to understand what you can possibly do.

If you're interested in making web apps, you should know HTML & CSS, plus Javascript. You'll need the basics at first such as how to write a function, call it, make variables, sum numbers, print a string, etc. - just to get acquainted with what's possible. DOM part of the Javascript allows you to combine what you've learned with manipulating a web page. Like, transform the red block on a page into a blue one if you press a button.

Then, if you get familiar with such basics, you could pick up a front-end framework, but it's not necessary. Frameworks are tools that solve specific problems simpler for a developer. They allow writing less code. However, you could build websites without them at all. If you're on the edge of picking a framework, then congrats, you levelled up and should read another article.

What projects should you pick? Preferably, they should be quick and simple. Thus, you see the results and don't throw learning coding away.

For instance, you could get started with creating a personal web page where you put info about yourself. A few raw HTML blocks with text. Practice with different blocks and see the outcome. Next, start adding styles with CSS. Picture multiple similar projects to have practice with HTML & CSS for the next few days/week.

Now as you know what is possible with HTML & CSS, learn Javascript basics. You should know how to code, say, a button click handler - you click, and the page turns red. Think of similar tasks for you and code them. Now you should be able to do trivial tasks with HTML & CSS and Javascript. Like, creating a simple page with a header, footer, content section and adding some logic there: you click a button, a block appears with an input. You change the input, the web page title also changes.

Practice a lot with new tasks, projects. Don't skip practice!

Back-end path

You need to learn a programming language. The best option for web apps is Javascript as it allows you to write in the same language on the front-end and server-side. A great option for full-stack development.

You'll need to learn the Node.JS platform which is a server-side Javascript. Read/watch the introduction videos to learn the fundamentals: how to install Node and write a simple server that can listen for the requests and respond to them. We're interested in REST API, so your first real project could be creating a server with 2 routes: POST /messages that create a new message, and GET /messages returns all the messages you saved. You can save them in memory or file for now.

If you're interested in becoming a full-stack programmer, then you could also create a web page that shows the messages and has the functionality to add a new message.

Mobile path

As we're talking about Javascript, it allows us to create mobile apps with React Native framework. Usually, developers code in other languages, like Java(for Android) or Swift(for iOS). React Native allows writing for both platforms, and even for the web and desktop.

Summary

I hope you have now a better perception of what path to pick. No matter what will you choose, a practice should be done regularly. Without applicable knowledge, it's troublesome to see the bigger picture, it's much easier to forget. Don't skip exercises if you meet any in more detailed guides. When you get the fundamentals, try to code simple projects that take you a little time to complete. Not more than a few hours. Otherwise, it's easy to throw the learning away and maybe even lost interest if you don't see quick results.

Follow me on Twitter

Discussion (0)

pic
Editor guide