[For beginners] Complete roadmap for learning WEB programming [From MacBook purchase to practical level]
What is a complete roadmap for learning WEB programming?
We offer the following experiences ** completely free of charge **. To take money Unlike note, Qiita does not have a paid article function. I am relieved.
・ Anyone can buy a MacBook
・ It is a teaching material for programming beginners
・ I will explain the basics of WEB programming
・ You can learn programming even if you are completely inexperienced
・ You can create a web service like Qiita by yourself
Benefits of reading this article
・ You will acquire the skills to create a website that can be delivered for 500,000 yen
The website you are using right now is called "Qiita". If you produce from 1, the scale is "delivery time 30 to 60 days, price 500 to 1 million yen".
In this teaching material, we will create a website that simplifies Qiita from scratch, so If you can clear it, you will acquire the skill to earn about that amount of money.
Deliverables
Conclusion I will go first. The deliverables produced by this teaching material are the following websites.
Function introduction
** Post new articles (articles # new) ** You can post a blog post. As with Qiita, you can use functions such as markdown notation, inserting code blocks, and inserting images in the text.
** Article list display (articles # index) ** You can display a list of posted articles. You can move to the article viewing screen by clicking the article icon.
** View articles (articles # show) ** You can browse the posted articles. It also has a like function and an SNS share function.
** My Page (users # show) ** You can see the user's profile, impressions, and a list of posted articles.
The above is the deliverable of this teaching material. In short, I will make Qiita. Let's start learning now.
Learning curriculum
[** 1. Buy a MacBook ](# 1 Buy a macbook) [ 2. Install the browser ](# 2 Install the browser) [ 3. Let's create a development environment [Homebrew] ](# 3 Let's create a development environment homebrew) [ 4. Download the editor ](# 4 Download the editor) [ 5. Understand the basics of HTML and CSS ](# 5 Understand the basics of html and css) [ 6. Let's use developer tools ](# 6 Let's use developer tools) [ 7. Get to know Responsive Design ](# 7 Get to know Responsive Design) [ 8. Let's master Flexbox [God] ](# 8 Let's master Flexbox) [ 9. Let's make a Twitter-like app with Rails ](Let's make a twitter-like app with # 9rails) [ 10. Let's use Git / Github ](# 10 Let's use gitgithub) [ 11. Deploy your app on AWS ](Deploy your app on # 11aws) [ 12. Let's make a Qiita-like app with Rails **](Let's make a qiita-like app with # 12 rails)
1. Buy a MacBook
First, let's buy a personal computer. A MacBook Pro 13-inch computer is recommended, and the price is ¥ 134,800 (excluding tax). This is a decent expense for your wallet. However, suppose that the "Qiita-style website" produced this time sold for 500,000 yen. Then, the initial investment of 150,000 yen can be recovered when one website is sold.
Programming learning returns
・ Development period: 1 month
・ Initial cost: ¥ 150,000
・ App unit price: ¥ 500,000
·return(1 year)：¥(50×12-15)×10,000 = ¥5,850,000
However, the above is the calculation when programming learning continues without frustration, so if frustrated, it will not be as above. However, in that case, I think it's just a matter of selling the MacBook at Mercari. <a href="https://www.mercari.com/jp/items/m45876950419/?_s=U2FsdGVkX1-Foy-31PNe5xn_c8LGBRbGeazegs4v_pNr_Y5c2dx2cYlgOhtm_T2x8VWo_QpF9SzsYn e You can save it by spending yen.
In summary, the cost of programming learning looks like this:
Cost performance of programming learning
・ Development period: 1 month
・ Initial cost: ¥ 150,000
・ App unit price: ¥ 500,000
・ Risk: ¥(15-8)×10,000 = ¥ 90,000
·return(1 year)：¥(50×12-15)×10,000 = ¥5,850,000
I personally think that the risk of a challenge with an annual return of 5.85 million yen is too low at 90,000 yen. In the old days, if you wanted to get this digit of return, you had to start a business, start a business, gather friends, and so on. And if the company goes bankrupt, it's like losing millions of debts, trust and friends.
This may be achieved by paying a risk of only 90,000 yen individually. Moreover, the return is 585/9 = 65 times from the first year. Cospa is too good. It's a good time.
Generally speaking, it is said that the average monthly income of engineers who live in the programming language "Ruby" introduced this time is 500 to 1 million yen (annual income of 6 to 12 million yen), so this estimate is often wrong. I don't think it is. If you are interested, ** Rails engineer average annual income ** Try google.
Now let's buy a MacBook. MacBook ** You can purchase from here. ** There are various types, but I think that the 13-inch MacBook Pro is fine unless you are particular about it. You can choose from 8GB / 16GB of memory, but 8GB is enough for programming.
2. Install your browser
A "browser" is an app for browsing the Internet. There are various types, but it is common to use a browser called ** Google Chrome ** for programming.
** Click this link ** to install. If you click ** Download Chrome ** at the link destination, ** googlechrome.dmg ** will be displayed at the bottom left of the screen. This is the installation file, so click it to complete the installation.
3. Create a development environment [Homebrew]
A "development environment" is required for programming. If you buy a new smartphone, you will download apps such as LINE, Youtube, and Twitter from the store.
It's like downloading an app for programming in the same way. The ones to be downloaded here have the following names.
・ Homebrew
・ Rbenv
・ Ruby-build
・ Readline
・ Ruby
・ MySQL
・ Bundler
・ Rails
・ So.js
As you can see, there are quite a lot of them, but you don't have to remember them. When you learned how to use LINE, you didn't check the roles and functions of LINE one by one in advance. With the same feeling, if you use it, you will naturally remember "what is this app", so let's work without worrying about it.
Even so, you may think that a lot of unknown words appear in front of you with Dawn and you already think "It's spicy ...", but think about this as an example of a smartphone app. Is it hard to see the following word list?
・ LINE
・ Twitter
・ Instagram
・ TikTok
・ Youtube
It's not spicy. However, this is also exactly the same "list of mysterious words" as the list above. The above word list may be hard to see for an old woman who doesn't know smartphones.
In programming learning, you will come across a "list of mysterious words" over and over again. Since the unknown is a "fear" for humans, many inexperienced programmers tend to be frustrated by encounters with the unknown.
However, all "unknown words" will turn into harmless words like "LINE Twitter" as you touch them repeatedly. Therefore, I would like you to work on your studies with confidence.
Also, this material does not "leave you behind". Please be assured that we are writing the entire curriculum from the perspective of "Is it transmitted to the reader?"
Now let's get started with the actual work.
Introducing Command Line Tools
There is "one" article to read. ** ・ What is Command Line Tools? Explain the role and how to use it **
Introduction of Homebrew
There is "one" article to read. ** ・ What is Homebrew? Explain the role and installation method **
Introducing Ruby and Rails
There is a "language" in programming. This is like "Japanese" or "English" in the real world. There are many, but this time I will use "Ruby".
There is "one" article to read. ** ・ What is Rails on Rails? Explaining its role and introduction method [Conclusion: Curry Lou] **
Introduction of MySQL
There is "one" article to read. ** ・ What is MySQL? How to install it on your Mac with pancakes [Easy] **
Environment construction is complete
Thank you for your hard work! Next, let's move on to the work of introducing an editor.
4. Download the editor
There is "one" article to read. ** ・ What is VS Code? Explaining the role and introduction method [Conclusion: It is an application for writing code] **
Ready!
This completes all the preparations. From here on, it's finally coding work!
5. Understand the basics of HTML and CSS
There are "2" videos to watch. **-First HTML introductory course (24) ** **-First CSS introductory course (34 books) **
While watching this video, let's actually move your hand and code. Since we will code with VS Code, first open VS Code and press command + N on the keyboard. This will generate a file called Untitled-1. This file is not saved, so it is recommended to save it by specifying "Desktop" from the save menu that appears when you press command + S. Also, name the file "filename.extension", such as "index.html" or "style.css". The "extension" indicates the type of file, and if you use .html, you can tell your computer that "this file is written in html".
Also, when opening a file written in HTML, you can open it by clicking the file saved on the desktop with two fingers → opening with this application → Google Chrome.
6. Let's use developer tools
At this point, it feels like a "beginner". Let's spread the MacBook with Starbucks together and feel cool. Motivation is exploding. Lol
There is "one" video to watch. ** ・ I can't ask you anymore! How to use browser developer tools **
By learning how to use developer tools, you will be able to convert the code of cool sites into your own skills. It's a pretty shortcut. Whether you know this or not will make a big difference in the growth rate, so be sure to remember it.
7. Get to know responsive design
From here, you will learn what is called "responsive design". Responsive design is literally "responsive design." What makes it react is mainly the "width of the screen". Some websites are viewed on a personal computer, some are viewed on a tablet, and some are viewed on a smartphone. All of these have different screen widths, so if you display the same website with the same appearance, it will be difficult to see the display. To avoid this, we will create a design that changes its appearance in response to the width.
There is "one" video to watch. **-First Responsive Web Design Introductory Course (19 books) **
8. Let's master Flexbox [God work]
I think that the concept of float has come out in the learning so far. This is actually quite difficult to understand and can be the biggest setback for programming beginners. This is the F chord on the guitar. But in fact, this concept of float can be made "almost unnecessary" by learning the divine work of Flexbox.
There is "one" video to watch. **-Learn how to use flexbox in a game! **
The above video is recommended because it is fun to learn Flexbox in a game format. Also, the Flexbox summary sheet is distributed in the following article, so be sure to get it. **-I made a CSS Flexbox cheat sheet and will distribute it **
9. Make a Twitter-like app with Rails
Up to this point, we have mainly studied to create the appearance of websites. From here, we will start the work of creating the internal system. The internal system is, for example, the "user registration function", "login function", and "tweet function" in Twitter. Also, these systems are created using the language Ruby. Ruby on Rails is a "framework" that helps system development using Ruby.
There is "one" article to read. ** ・ [Introduction to Ruby on Rails] I will explain all the steps to create Twitter with Ruby [Easy] **
10. Let's use Git / Github
It's a new horizontal character again. However, I don't think anyone who has read this far will be frightened anymore. Git is a "save and load" mechanism in programming. When you play video games, you save and load data. This can also be done by programming. It's super convenient. Let's introduce it immediately.
There is "one" article to read. **-What is Git? What is Github? I will explain the role and how to use it **
** * In this article, we will generate the base app for the Qiita-style blog app created in Chapter 12. Be sure to read it. ** **
11. Deploy your app on AWS
We will publish the created application to the world using AWS. The app I made so far could be accessed from the address localhost: 3000, but this can only be accessed on my own PC. Websites must be accessible from anywhere on the Internet, and AWS makes this possible.
There is "one" article to read. ** ・ [Preserved version] All steps from AWS account registration to Rails automatic deployment [Capistrano] **
12. Make a Qiita-like app with Rails
Finally the final chapter. Let's create a Rails app that is more advanced than the Twitter-like app created in the previous chapter, and acquire practical level website creation.
Appendix: Plans for earning
Thank you for your hard work! That's all the information about "programming skills" that you can learn from this roadmap. With this, you have acquired the skill of "creating an app that sells for 500,000 yen" as mentioned at the beginning. From here on, the question is "how to earn 500,000 yen". In conclusion, there are various methods. I would like to conclude this article with some suggestions.
Job hunting / job hunting
This is the quickest way. There are many job hunting / job hunting support services in the world, so create a resume based on your own skills and repeat job hunting / job hunting activities until you succeed. The following support services are recommended.
** ・ Wantedly Business SNS that makes "working" interesting **
In addition, there are many "programming schools with full support for changing jobs" these days, so it is ant to enroll in a school and get a job with support. Although it is a reliable method, it also has disadvantages such as the fact that the place of employment tends to be a subcontractor. However, it can be said that it is the shortest route if you just want to form a career as a system engineer. It will be easier to seize the opportunity to aim for a higher career if you can build up and be proud that "I have practical experience". The following schools are recommended.
<a href="https://tech-camp.in/expert?gclid=Cj0KCQjwrIf3BRD1ARIsAMuugNtwuqBofzmZ207oy8T8NNeyJZpwViBZHXn9PuO6g5xf7Oof4SS2zDoaAt
go on one's own
This is the case when you go off the rail of finding a job / changing jobs and choose the path of freelance. This is the career I am taking. "Freelance" is a very cool way of saying it, and in other words, it can be said to be "unemployed." It's a way to form a business with your own hands without belonging to a company.
A quick way to earn money independently is to use a mechanism called "crowdsourcing." It's a way to get on another rail while removing the rail. Crowdsourcing is basically catching companies that are looking for "outsourced" jobs on the condition of "anyone" and proposing "let me do it". The following two services are famous, so I think it's a good idea to register below and immediately search for projects using "HTML CSS", "JavaScript", "Rails", etc. and make suggestions.
**-Crowdsourcing is Japan's largest "crowdworks" ** ** ・ Lancers | Japan's largest crowdsourcing job request site **
There are endless other options for independence. One way is to purchase "teaching materials for earning" sold by famous influencers. ** manablog's product ** , which inspired me to start programming, has been successful. I recommend it because it has a lot of people.
In my case, I became independent by the method of "launching my own technical blog". There are various "earning paths" such as Adsense and product sales on blogs, so I decided to go on this path.
start up a company
It is almost the same as independence, but it is recommended for those who want the title of "Co., Ltd.". In addition to the title, I think it comes with various benefits such as social guarantees. To put it simply, it seems that it is easy to gain social trust, so the success rate of orders for crowdsourcing is likely to increase.
I haven't done it before, so it seems better to ask "people who have experience in IT-related entrepreneurship" for advice on this. Well, rather than waiting for honest advice, I think it's easiest to try it yourself if you're interested. It may sound irresponsible, but it's probably the truth.
There are a lot of people who have experience in starting IT businesses, so it's difficult to "TAKE" from those people. Because I have to give them a level of "GIVE" that exceeds the daily lives of those amazing people. In that case, it seems that it is much faster for me to become that "awesome person". By the way, the following sites seem to be useful when starting a business.
** ・ Free support for opening procedures and opening notifications for sole proprietors | freee **
## What can be said in common Whether you are looking for a job or becoming independent, I think that you will be able to earn money if you meet the condition of "telling what you are given" in an easy-to-understand manner so that the other person can see it.I myself am in the situation of "programming self-study 2 months → school 2 months → self-study 2 months → article writing now". I seriously think that the optimal solution for helping people is "to provide beginners with the knowledge gained from self-study and school with all their might for programming beginners." So I launched this blog and I am sending it to everyone in this way.
Based on this blog posting, I am thinking of gaining trust as my first "achievement". This is what I want to do. I believe that there is always a moment in the world where "what you want to do" for someone and "what you want to do" for someone match.
Thank you for your hard work!
Thank you very much for reading this far. We would like to continue to publish articles that will be of benefit to everyone who reads them. Thank you for your cooperation.
Author information
・ Blog: ** From ONSEO MacBook purchase to practical level ** ・ Twitter: ** https://twitter.com/soeno_onseo **
Recommended Posts