Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/virag-ky/start-here

Start your coding journey here. Before you write your first lines of code, you should go through this guide.
https://github.com/virag-ky/start-here

beginners-guide webdevelopment

Last synced: 7 days ago
JSON representation

Start your coding journey here. Before you write your first lines of code, you should go through this guide.

Awesome Lists containing this project

README 

        
# Start your coding journey here!



🔹*Do you want to learn how to code?*



🔹*Do you want to learn web development?*



🔹*Do you want to be a web developer one day?*



If your answer is yes to any of the above questions then you are at the right place.

In this guide, I collected reading links and videos for you that are important in my opinion, these will help you to get started in your journey.



## 📌 Table of contents:

* Basics of the web

* Text editors

* Terminal

* Front-end vs Back-end

* Learning tips

* How to get help

___



![Add a heading (2)](https://github.com/virag-ky/Start-Here/assets/79658534/b22d4f9c-ce2d-412c-a626-31963219d076)



In this section, I will provide you with links essential for understanding how the web or the internet works. It is a lot of reading but you should understand them before we dive more deeply into web development.



### 📖 Readings



* [How the web works?](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works#packets_explained)

* [How does the internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) (please, in the *Active learning* section watch those 2 short videos so at least you can visualize how the things work) 

* [What is a webpage, web server, website, and search engine?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines)

* [How does the DNS request work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) (you don't have to read the whole page for now, scroll to the section where it says: How does the DNS request work)

* [Computer basics](https://edu.gcfglobal.org/en/computerbasics/) (for people who are new to computers and technology)



### 📺 Videos

* [What is the World Wide Web?](https://www.youtube.com/watch?v=J8hzJxb0rpc)

* [A packet's tale. How does the internet work?](https://www.youtube.com/watch?v=ewrBalT_eBM)

* [Computer and technology basics for absolute beginners](https://www.youtube.com/watch?v=y2kg3MOk1sY) (for people who are new to computers and technology)

___

![Add a heading (4)](https://github.com/virag-ky/Start-Here/assets/79658534/da69cff0-093a-4e25-9faa-f57338b7e789)



Code editors will be your main tool to work with.

Feel free to use any code/text editor you want but I prefer VSCode (Visual Studio Code - free and open-source). At this point, the most important thing is to install it on your computer and to know how to open it and navigate through it.



### 📖 Readings

* [The Odin Project - Text editors](https://www.theodinproject.com/lessons/foundations-text-editors) (on this page you will find the installation of VSCode depending on which OS (operating system) you are using)

* [Visual Studio Code official website](https://code.visualstudio.com/) (optional, feel free to check out the docs)



### 📺 Videos

* [Visual Studio Code for beginners](https://www.youtube.com/watch?v=UTQp6mvhb0Y&t=108s) (optional)



### Other editors

* [Atom](https://atom-editor.cc/) (free)

* [Sublime Text](https://www.sublimetext.com/) (Sublime Text may be downloaded and evaluated for free, however, a license must be purchased for continued use.)

___

![Add a heading (5)](https://github.com/virag-ky/Start-Here/assets/79658534/50107fae-d246-4936-a641-4df0f607f210)



The terminal/command line is another important tool that you need to know how to use. At this point, the most important thing is to know where to find the terminal on your computer and to know how to open it. Please, read the link below, as it will tell you where to find the terminal depending on which OS you are using.



### 📖 Readings

* [Command line crash course](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line) (read until the *Introducing command options* section)

* [The command line](https://launchschool.com/books/command_line/read/introduction) (feel free to experiment with the exercises in this book, but also read it if you are new to the command line)



### 📺 Videos

* [Command line crash course for beginners](https://www.youtube.com/watch?v=uwAqEzhyjtw)

___

![Add a heading (6)](https://github.com/virag-ky/Start-Here/assets/79658534/353014e4-9645-4492-8f33-f6ac1614db9b)



**Front-end**: What we see in the browser, the client side. The code we write visually gets presented in the browser. Consists of 3 main languages: HTML, CSS, and JavaScript.



**Back-end**: The code we write doesn't get visually presented in the browser. Back-end languages handle the server side of the application or website, they can handle authentication and additional logic and they also communicate with databases. Some of the languages are NodeJS, PHP, Java, and Ruby.



**Full-stack**: Represents both front-end and back-end.



### 📖 Readings

* [Front-end vs back-end: What's the difference?](https://www.freecodecamp.org/news/frontend-vs-backend-whats-the-difference/)



### 📺 Videos

* [Front-end vs back-end: What's the difference?](https://www.youtube.com/watch?v=1mXrxc_sv1o)

___

![Add a heading (7)](https://github.com/virag-ky/Start-Here/assets/79658534/8f4ef7b5-1929-4c5c-aa9c-7907d42d8399)



In this section, I will share some learning tips so you can stay on track with your journey.

### Tips:

1. **Don't rush! Never...seriously.**



The biggest mistake that you can make is to rush into things. 

Maybe someone tells you to learn JavaScript first, but then when it comes to DOM manipulation you need to know HTML, and when you want to change the styles with JavaScript you still need to know basic CSS. So you better start learning from the beginning, which is from HTML. If you learn at your own pace and take the time to understand things then you will save a lot of frustration time from yourself.



3. **Take breaks**



No rule says you need to master HTML or any other language in 2 weeks for example. You are doing this for yourself, maybe you decided that you want to be a web developer so just take as much time as you want to learn the basics. With a solid knowledge of the basics, you will save a lot of time when it comes to debugging your projects because then you will know why things work in a certain way. Also, to prevent burnout (I had quite a few) you should take breaks regularly during the days between your study sessions. Go and enjoy time with your family, spend time with your pets, go for a walk, have a snack, or just do your hobbies. There is a technique called *Pomodoro* where you set time blocks for yourself for studying for example, here is a link: [Pomodoro technique](https://www.techtarget.com/whatis/definition/pomodoro-technique). And here is an app: [Pomofocus](https://pomofocus.io/).

So just don't feel bad to take a day or days off from your journey because everyone is different, some people learn faster some slower, and you are not competing with anyone.



3. **Practice**



Practice makes ~perfect~ better! 

Practicing what you have learned will stick to your mind better. It would be best if you aimed to improve each day and not aim for pure perfection.



4. **Read the documentation**

   

When you learn something new, the official documentation should be your best friend. They are written for a reason, never skip them. Reading them, you will learn a lot about the language or framework/library. You can't just jump into coding and not read the documentation.

___

![Add a heading (8)](https://github.com/virag-ky/Start-Here/assets/79658534/4c4ca36b-be97-4697-a435-0a425b2e90f6)



If you get stuck with your code then you should try to find the answer on Google first.



**Never run to another developer and ask for something that you can find on Google by yourself!**



### 📺 Videos

* [How to 'Google it' like a senior software engineer](https://www.youtube.com/watch?v=cEBkvm0-rg0)



### Other

* [ChatGPT](https://chat.openai.com/) (this should be your last option to turn to, it can be helpful sometimes when you are trying to debug your code but it can give you false results sometimes so just be aware of that)



___