Here is a list of online services and platforms on which you must have an account on.
Please proceed to the checklist and register for a new account on each service. After completing the steps, make sure to send the account names and URLs (e.g. profile) to your instructor.
IMPORTANT: Make sure to use a descriptive, readable username or account name, as this will be your professional profile. For example, avoid usernames such as @mard4354 and prefer/choose ones such as @mary_douglas.
With Loom you’ll be able to quickly take screen recordings, and use it to share your code and relevant bugs with your mentors/instructors and the rest of the team and present your assignments and applications.
Before you can understand how to program the web, you need a more rigorous understanding of the web itself than you likely have now. These concepts provide a more holistic understanding of the ecosystem in which you will be working and will enable you to talk intelligently with other developers about your work.
At the end of this lesson, you should be able to do the following:
Describe what the internet is.
The internet is a worldwide network of linked computers. Each of these computers can communicate with each other in a specific format.
Describe what packets are and how they are used to transfer data.
Packets are the information of the internet. Packets are sent from the sender to the receiver in a specific format that contains all the information needed to communicate.
Understand the differences between a web page, web server, web browser and search engine.
A web page is the page you look at in your browser.
A web server is the computer that has the code for how the webpage should look and act.
A web browser is a program on a computer that displays web pages.
A search engine is a web server that searches all other web servers for information. A user can then pull up the web page on their web browser and search for a site.
Briefly explain what a client is.
A client is a computer or internet device that requests information from a server.
Briefly explain what a server is.
A server is a computer that receives requests (as packets) from the client and responds with the appropriate data.
Explain what IP addresses are
IP addresses are numerical identifications that specifies a destination in a network.
Explain what DNS servers are.
DNS Servers are the “phone book” of the internet. They translate domain names into IP addresses.
In your own words, explain what happens when you run a search on google.com.
User sends request by clicking search button. Google receives the request, looks for the contents of the request in their databases, and sends back the result as a response.
Make sure you understand the basic Internet concepts described in these resources:
Domain Name Server
How Does the Internet Work – Part 2
Take a break, make a cup of tea or coffee, sit in a relaxed position an enjoy the next 2 videos that go in-depth in how the Internet mechanisms work. Although the 2 videos overlap at explaining the same concepts, each one has its own way of describing them and going in-depth. Make sure that you watch both videos and take notes.
If you’re in for a bit more reading, you can check out the Introduction to HTTP online book at LaunchSchool. This book also touches on some topics covered later in the curriculum, such as developer tools and security. Additionally, you can learn about HTTP tools, which you may find helpful in the future.
Some advice on reading: We recommend that you only review the immediate links posted in our curriculum. You can always go deeper on any subject if you wish, but be careful not to overload yourself on information!
Assignment: Create a Website about the Internet
Use the knowledge you acquired during this lesson and create a website that introduces the Internet to beginners.
You must first write down an essay describing the Internet and its constituent parts in simple, layman’s terms. Keep in mind, that you should not copy and paste external material, but rather write the content yourself. It must be concise, small-sized and easy to read and comprehend. Use as many external media resources (images, embedded videos, etc.) and links as you like, to help convey your message.
Your page must describe and mention the following concepts and terms:
Brief introduction to the Internet
How does the Internet work
Your website must contain one or more web pages. In case you choose to create a single page site, make sure to create the proper HTML structure in order for the page to be accessible and user-friendly.
The project’s files, folders, assets (images, fonts, css, etc.) must reside in a single folder named how-web-works.
You must upload the folder to Netlify’s Drag and Drop service and keep the temporary URL that you will be given. You must be registered and logged in to Netlify in order for the website to be retained. Anonymous uploads to Netlify’s Drag and Drop service, are automatically deleted after 14 hours.
Make sure to cut down on the file size of the images used on your website, by uploading them to a free optimization/compressing service like TinyPNG.
Create a README.md file, open it up in VSCode and add the following:
The URL of your uploaded website (Netlify address)
How much time did it take for me to complete the task?
(Don’t worry, you are not going the get evaluated on how fast you did this. The more time you dedicated to it, the better.)
Where did I get stuck? How did I get unstuck?
What were the difficult parts?
Compress (zip is preferred. Scroll down for instructions on how to create a zipped folder) the website contents along with the README.md file, and upload it in the Assigment panel at the bottom of the page.
IMPORTANT: Make sure to use the W3C validator services, both for validating your HTML and CSS code. You can validate your code, either by URI (URL of your Netlify site), file uploads or direct code input. Choose what suits you best and make sure that you submit code that contains as less validation warnings and errors as possible.
Working and collaborating with other people is an important part of working as a web developer. Therefore, we at The Odin Project encourage you to participate in our online chat community and forum, where we can all grow together and help each other learn web development. While you’re at it, you can check out our Facebook page and follow us on Twitter and on Instagram.
Why a community is awesome for you
Learning web development will be a long and arduous journey, but you can make the marathon a lot more fun by pairing up with others. Connecting with fellow learners is a great way to bounce ideas off each other and motivate one another to keep going. Furthermore, helping others that are a few steps behind you is a great way to deepen your own understanding and make your learning stick.
When you’re slogging through the desert of despair, where your code doesn’t work or even make sense to you anymore, you can find an oasis of knowledge and encouragement in our community. Veterans at The Odin Project love to help fill in knowledge gaps and provide new insights and perspectives on how to improve your code. We’ve all been there before!
Remember that project you struggled so hard to figure out and that you’re so proud of finishing? Through our community, you will get to share your work and progress with those who fully appreciate how much hard work went into it.
Why a community is awesome for Odin
We are working hard to update existing lessons and produce new content, so we would love to hear your feedback on the lessons and projects. We hope you find the lessons fun, engaging, and informative and find the projects challenging but achievable. So please let us know your thoughts!
Before asking for help
As most of the projects are designed to push you to your limit, please remember that there is always a community to turn to! You don’t need to know how to solve every problem straight away, BUT you do need to have a general idea of where you are going. This becomes really important when asking your questions because sometimes the problem is your approach and not your code.
If you’re feeling stuck, it’s a good time to pause and take a breather. Break the problem down into little pieces and then decide what is really holding you back. We call this technique rubber duck debugging.
If these methods don’t yield a solution for you, then it’s time to reach out to the Odin community and ask for help.
Asking for help
So you’ve spent some time struggling to solve the problem on your own, and now it’s time to fire up the Odin Discord and ask for help. The first thing to keep in mind is don’t ask to ask. While this a simple idea (with a pretty catchy motto!), it can help you get answers to your questions much faster and will make it easier to others to feel comfortable offering you help.
In addition, when you ask your questions, you should help the community help you by putting together a great question.
When asking your question, please remember to include the context:
What do you think the problem is?
What exactly do you want to happen?
What is actually happening?
How did you get there?
What have you tried so far?
If you can’t pinpoint the problem, you can share a screenshot. This is especially useful for showing the output of commands in the command line. In Discord, drag and drop your screenshot image file into the chat box to upload it or simply use the PrtScn and paste keyboard shortcuts. In the forums, hit the ‘Upload’ button on a new reply. If you don’t know how to take a screenshot on your computer, this is a good time to ask Google.
If the puzzle still can’t be solved, push your project to GitHub or put your code in a repl.it so that others can comb through and debug the code. You’ll learn all about GitHub very soon.
Sometimes there might be no one around to help you with your issue. That is the ideal time to get familiar with the Discord search function. Search for specific keywords or error messages to see if anyone else had a similar issue before and how they solved it!
Formatting your questions
Asking your questions in a readable format helps everyone debug them better. Here are some ways to go about that:
If you’re having trouble on the command line, make sure to include both your input and the error message you’re getting.
In the chat rooms and forums, code can be displayed differently from normal sentences by using backticks (“), which can be found above the Tab key on US and UK keyboards. Backticks are not the same as single quotation marks (”), which are found to the left of the Enter key.
For a single line of code:
`#use one backtick at both ends`
For multiple lines of code:
#use three backticks on a separate line ABOVE your code
#use three backticks on a separate line BELOW your code
In Discord, you can also use code highlighting to add color to your code by specifying the language:
Your Colorful Code
Have fun with giphys: type /giphy hi to say hi to everyone.
Type /help for more information on chat commands.
Show your appreciation to those who help you with @username ++.
Don’t forget to visit all the available rooms!
The forum supports embedded ‘replits.’ These are essentially runnable bits of code. They’re great for sharing code to get help or feedback. You’ll learn more about this later.
As you spend time in the forums helping others or being helped, your trust level will slowly go up, and you’ll unlock more functionality.
First, create a free GitHub account. As you will discover, GitHub is an integral part of the development workflow.
Use your GitHub account to sign up for the TOP forum. The primary use of the forum is to seek help within the community. We used to encourage introductions on there so you may see a lot of old introduction posts when you login for the first time but that meant a lot of questions for help got buried and went unanswered. We encourage introductions in the chat rooms and both the chat rooms and forum be used when seeking help.
Finally, sign in to our Discord server. Pop in and say hello! We’ve created an introductions-and-checkins room which is a great place to introduce yourself and we’re always happy to welcome new community members. We have chat rooms for every development topic covered by Odin and beyond. Log into the chat and start exploring!
Learning to code is incredibly rewarding but can also be difficult and frustrating. Like any skill worth knowing, it takes time to acquire, and it can’t be learned in a weekend or even a month. With that said, we believe anyone can learn how to program as long as they are willing to put in the time and effort.
So before we get into the meat of the curriculum, we’re going to go over the following to help you get the most out of the course: the things that will help you succeed in your goal of learning to code and the pitfalls that you should try to avoid.
Take a moment to think about why you have decided to learn programming.
Do you want to have a fulfilling career that pays well?
Are you excited by the creative outlet programming provides?
Are you determined to develop the skills and abilities to build any app you can think of?
Do you want to start your own company by turning an app idea into reality?
Your motivation could be a combination of these reasons or something else entirely. Whatever it is, hold on tightly to your motivation – this will be what pulls you through to the end of this journey, giving you a definitive goal to aim towards.
To give your motivation a bit of a boost, you can read about the success of others:
Your mindset is very important when teaching yourself any new skills, not just programming. Your mindset will have more of an impact on your chances of success than just about anything else.
Someone with the fixed mindset believes if they don’t get something on their first attempt, they never will. They believe that they simply aren’t smart enough to be able to do or understand some things.
However, there is a wide body of research showing that intelligence is not fixed but can instead be developed. Someone with the growth mindset believes they can get better at anything with effort and persistence.
What does this mean for you? It means you can learn new skills and develop new talents with persistence and grit.
There will be many times throughout the course that you will get stuck on a concept or a programming problem and may find yourself questioning your ability to learn programming. When you find yourself in this position, remind yourself that you may not get it yet but that with persistence and grit you will. Struggling with something is growth. It doesn’t matter how long you struggle with a concept or project; all that matters is that you have the grit and tenacity to see it through. That’s how
real learning happens.
While you’re working through the curriculum, embrace the struggles you encounter with difficult concepts and complex projects. Be sure to celebrate your persistence at overcoming those struggles!
When you find yourself questioning your abilities, reflect on the successes you have already achieved while learning to program: the projects you have completed and the concepts you once didn’t understand but now do. This is all the proof you need that you can do it.
To learn more about the growth mindset, check out these resources:
Learning concepts and then practicing them will help you to more fully understand how things work and fit together. Projects are the ultimate method for ensuring that your theoretical understanding aligns with how the programming concepts and techniques actually operate.
When learning, your mind will consistently switch between focus mode and diffuse mode. Focus mode occurs when you are consciously focusing on learning, reading, watching videos, or working on a project. Diffuse mode occurs subconsciously, at times when you are not actively learning, such as when you’re doing the dishes, exercising, or sleeping. In this state, your mind goes about the business of connecting what you have been learning to the other things you know. This is where breakthroughs happen.
It’s important to know that your mind goes through these two states when learning because you can utilise this to make your learning more efficient. When stuck on a concept or project, taking a break to refresh and let your subconscious work on making connections more often than not yields a solution to your problem. The trick is to put effort into solving the problem first and then take a break.
In short, understand it, practice it, and finally teach it.
Teaching what you know to others is a great way to solidify what you have learned and can often reveal holes in your knowledge that you wouldn’t have identified otherwise.
You can practice this method of learning by helping others in our community.
You will inevitably get stuck at some point in the curriculum, perhaps due to a concept that you are having difficulty understanding or perhaps due to something not working correctly in a project. Whatever it is, use the following tools to get unstuck:
Google it: You can be certain someone else out there has encountered the same problem as you at some point. A quick Google search can often lead to a solution.
Take a break: Allow your diffuse learning state to work on the problem.
Ask for help in our chat: Come prepared with your research. People will be more willing to help you when they can see you have already put effort into trying to figure out the solution on your own.
You will have more success by putting consistent time into it rather than working on it once a week. Building a habit of studying every day at a specific time and with a specific goal will ensure that you make consistent progress.
Procrastination will be your biggest enemy when trying to make progress.
Solution: The Pomodoro Technique is a way of managing your time in order to stay focused. The idea is to set a timer for 25 minutes and to work on a task until the timer goes off. If you get distracted or interrupted during the 25 minutes, start the 25 minutes of work over again. Once you’ve successfully focused on work for 25 minutes, take a 5 minute break. When your break is over, repeat the 25 minutes of work and 5 minute break. After you’ve completed four 25 minute blocks of work, take a longer 15-30 minute break.
The Pomodoro technique is great for avoiding procrastination as it forces you to work without distractions. Since the work time only lasts 25 minutes before taking a break, it’s not overwhelming, making it harder to rationalize procrastination.
To learn more about the Pomodoro Technique, read this great article.
You can now bookmark this easy-to-use Pomodoro timer: TomatoTimer.
At the beginning, focusing on a task, avoiding distractions and being loyal to your Pomodoro timers is going to be difficult. Don’t lose faith. Just keep track of the things that distract you and next time you are about to start a Pomodoro, make sure you throw these things out of your flow. Don’t miss Scott Hanselman talking about this technique on his great presentation Scaling Yourself. You must definitely watch minutes 15:50 to 18:50, but the whole talk is worth watching.
It may seem counterintuitive, but you will actually get more done if you regularly step back to recharge your brain and body. Studies show that performance increases after breaks of all durations: from extended vacations down to microbreaks of 30 seconds. John Trougakos, Associate Professor of Management at the University of Toronto, says that mental concentration is similar to a muscle. Our focus becomes fatigued after sustained use and needs a rest period to recover, just like a bodybuilder resting between sets at the gym.
Solution: Use the previously mentioned Pomodoro Technique to time how often and how long to take your well-deserved breaks. Feel free to play around and experiment with different frequencies and durations of breaks.
What to do during your break:
listen to music
play a quick game
go for a short walk outside
Read this article for more information on breaks & productivity.
Digital distractions are email and Facebook notifications and time-wasting websites, such as social media. These distractions break your focus and make procrastination tempting. Therefore, they should be avoided during study time.
Solution: Turn off notifications and add a blocker to your internet to limit your time on distracting sites.
Because we cover so much material on this course and link to so many high quality courses and tools, it is easy for students to get pulled into rabbit holes by spending time trying to learn all there is to know about a subject that they aren’t ready for or won’t benefit them much. We have put a lot of effort into structuring the curriculum so that all of the important things that you need to know about web development are covered exactly when you need to know them.
Solution: Stick to the path laid out as much as possible. Try to limit time spent going down rabbit holes as these sidetracks can really ruin your momentum.
There are cases where Internet connection might be really slow or lost for many hours or even days. In these cases, here are some tips that will help you study and practice while being offline:
Use an application such as Zeal that will provide offline documentation. When Internet is down, this is probably one of the best applications for searching through technical documentations.
Print each lesson as a PDF file so that you can access the material even if you lost your Internet connection:
Open the browser, visit the lesson that you want to print and select File > Print and then from on the Destination select Save as PDF and click Save.
Download any CSS and JS libraries on your computer and update the links so that the files are hosted from your system. This will make sure that you can use these libraries even when there’s no Internet connection. You might also want to download any external resources, like images, audio files or video in case you are using this on your development projects and want them available while offline.
Learning any new skill is a journey full of speed bumps and obstacles to be overcome. We hope that the principles laid out here will put you in a much better position to succeed and to get the most out of this course.
Without further ado, let’s jump in to learning web development!
In short, web developers build and maintain websites.
Web developers often work for clients who are trying to get their product or service onto the web.
The work is typically very project focused and involves collaborating with a team that helps to coordinate the client’s needs into the end product. The client could be a tech company, an organization, or a government. The work could involve front-end, back-end, or full-stack web development.
Web development could be a good profession for you if you like solving logical problems, building useful things, and experimenting with new technologies.
Web developers are in high demand, generally have a good work/life balance, and command comfortable salaries. Google your specific location to get a better sense of your local web development job opportunities.
For more details, Wikipedia describes the breadth of the web development profession in their entry on web design.
(*Tip: Click Ctrl and click on a link to open it in a new Browser Tab)
IMPORTANT: You should read the article on Wikipedia about Web Design, since you will be tested on the material. Here are the sections of the article that you must absolutely read:
The start of the web and web design
Evolution of Web Design
Quality of Code
Generated content – Static websites
Generated content – Dynamic websites
Types of Web Developers
Earlier, we mentioned that web development work could be in the front end, the back end, or the full stack. What exactly do these terms mean?
The front end is the stuff you see on the website in your browser, including the presentation of content and user interface elements like the navigation bar.
The back end refers to the guts of the application, which live on the server. The back end stores and serves program data to ensure that the front end has what it needs. This process can become very complicated when a website has millions of users.
Back-end developers use programming languages like Java, Python, and Ruby to work with data.
Full-stack developers are comfortable working with both the front and back ends. In The Odin Project, we focus on teaching you full-stack development, covering all aspects of web development.
Now that you know about the different types of web developers, let’s cover what we mentioned earlier about the different types of clients and employers you may work with.
Large tech companies, such as Google, Facebook, and Amazon, have very stringent hiring requirements. If you successfully meet these expectations, they offer excellent pay, benefits, and opportunities.
Startups are a bit like the wild west. For a junior developer, it can feel like a trial by fire because of the pace of development. Startups often offer slightly lower salaries and require longer hours, but they may also offer equity in the company and highly unique environments.
As a freelancer, you could command a strong hourly wage and the freedom to schedule and design your own products. However, you would be responsible for getting your own work (which means less coding time), managing billing from clients (who can be difficult), and being solely responsible. Strong people skills are necessary for this path.
As a consultant for a web consultancy, you would give up some of your freelancing wage potential but be able to focus more on the code and less on the hustle. This option also provides a good work/life balance and pay.
Finally, large, older companies still need web developers. These companies offer a good work/life balance, pay, and benefits but often move slower than a company that is highly focused on tech.
Tools of the Trade
These are some of the basic tools you will use regularly. You may not know what they are now, but you most certainly will going forward.
Learning to code is incredibly rewarding but can also be difficult and frustrating.
The strongest assets you can have as a student are a desire to build, a problem-solving mind, and persistence in the face of setbacks.
The web development industry has a long history of successful developers with varying backgrounds, so people tend to care more about what you’ve actually built than how you got there.
The Social Hackers Academy curriculum is heavily based and inspired by the Odin Project.
There are plenty of other online curriculums for beginners, but they are often taught in an extremely isolated and controlled environment and cover only a specific topic.
The approach inspired by the Odin Project takes a realistic view of what you need to know and has you set up and work in your own environment, much like what you’ll be doing when you get a job.
It acknowledges that you need a wide variety of skillsets and languages to reach an employable level.
Hopefully, you’ve gained a better idea of what a web developer actually does and what your life might look like if you decided to take it on as a career. This has only been a teaser into the world of web development.
In this course, "Web Development 101," you’ll take a journey through the entire spectrum of topics that you will eventually need to know. This course jumps around to a variety of topics that you may be totally unfamiliar with, providing you a small taste of each and then moving on.
The following courses will dive deep into these topics. You will build dozens of scripts, projects, and websites to cement those skills that will get you hired.
Getting all the way there is going to be challenging. In fact, you should check out the post "Why Learning to Code is So Damn Hard" so you have a good idea of what the journey ahead is like. But what worthwhile thing is truly easy?
Yes, it’s going to be challenging.
But it’s also going to be fun.
And it might even be life changing, too.
What are you waiting for?
This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.
In this unit, we’ll learn about how the web works and start thinking about the basics of computer and web programming.
Each of the following sections and lessons represents essential baseline knowledge. Even if you have no intention of becoming a web developer yourself, this material should help you gain a useful understanding of the moving parts involved in creating and serving content on the web.
By the end of this unit, you should not only understand how the web works but also be able to identify and differentiate between all of the technologies that you will use to build your own web applications. You will be able to build a simple webpage, style it, and add minor elements of interactivity while working comfortably from the command line.
This section intentionally covers a very broad range of topics. It’s silly to go diving straight into server-side programming without having a context for what it is and why it’s useful (and why you should learn it!).
This curriculum works by pulling together the best content from across the internet for learning a particular topic. In each lesson, we’ll introduce the topic and try to provide some useful context before pointing you to external resources made by others.
Most lessons will contain questions that you should be able to answer before moving on. Some of the lessons will ask you to complete exercises. In addition, we provide several projects throughout the curriculum to help you grow your understanding by actually building things.
While most of this material should be fine to tackle on your own, the projects in particular are good opportunities to find a partner and do some pair programming. Give it a shot!
Once you’ve completed this course, you should be pretty comfortable with the building blocks of web programming but itching to dig deeper. Though we spend a fair bit of time digging into each of the major topics in this course, it’s really just a taste of what comes next (and all the cool stuff you can do with it).
The courses that come after this one are designed to take that foundation and build it into an applied understanding of the material. Those courses will focus on taking these raw building blocks and honing them into a highly functional skillset. Once you’ve completed Web Development 101, you’ll have built a strong foundation to take those next steps.
Here is a list of resources that you should definitely bookmark as you will use them regularly along this journey. These are resources that are have been thoroughly reviewed and have been approved by our past students so you can count on them.
Visit this link on GitHub and bookmark each YouTube link as you will often have to search in these channels for extra help on various concepts.
For example, if you think that you need to learn more about Rest APIs or the concept is still a bit unclear, you can hit the Search icon and search for it on all these channels. You will get a fresh perspective on the subject that will probably get you unlocked.
Searching for Rest API on the TraversyMedia channel: