How does the Web work? (v1)

Introduction

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.

Learning Outcomes

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.

How Does The Internet Work – Part 1

BREAK: Did you remember to take a break? 🙂

Estimated Total Time: Approx. 1 hour

Make sure you understand the basic Internet concepts described in these resources:

  • Networks
  • Protocols
  • Packets
  • IP Addresses
  • Domain Name Server
  • Routers

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.

BREAK: Take a 5 to 10-minute break.

Estimated Total Time: Approx. 90 minutes

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental material for if you want to dive deeper into something.

  • Listen to Part 1 (starts around 8:30) and Part 2 of Security Now Podcast’s How the web works series.
  • Consider buying the book Tubes: Behind the Scenes at the Internet.
  • Internet Protocol (IP) Addresses
    • (Advanced Topic) | (Duration: 16 minutes)
  • Internet’s Packets: The Transfer Control Protocol (TCP)
    • (Advanced Topic) | (Duration: 10 minutes)
  • 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!
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

Material based on Erik Trautman | The Odin Project

UPDATED: 23.03.2021

Gearing Up (v1)

Introduction

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.

Motivation

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:

Growth Mindset

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:

The Learning Process

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.

What To Do When You’re Stuck

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:

Hitting a dead end

  • 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.

Managing Your Study Time

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.

Pitfalls to Avoid

The following are some of the pitfalls that beginners often encounter when learning how to program. Try your best to avoid these.

Procrastination

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.

Not Taking Breaks

As you get into the material, you may feel compelled to continuously study for long periods of time. It might seem like you are getting more work done at first, but this often leads to burnout, which consequently results in lower productivity.

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
  • journal
  • doodle
  • meditate
  • play a quick game
  • go for a short walk outside

Read this article for more information on breaks & productivity.

Digital Distractions

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.

Physical Distractions

Physical distractions are distractions from your environment, like a TV in the background or other people talking. These distractions can be just as damaging to your focus as digital distractions.

Solution: Find a quiet place to study where you can go to focus in your home. If that’s not an option, you can use noise cancelling headphones to block out noisy distractions in your environment.

Remote Work Quick Tip: Avoid Interruptions. Did you know that nn interrupted task takes twice as long to complete and contains twice as many errors?

Rabbit Holes

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.

Comparing Yourself to Others

Students often compare themselves to others who are farther along in their coding journey or have more experience. This is a recipe for depression and frustration.

Solution: Only compare yourself to your past self. Have your abilities and knowledge improved from where you were last week, last month, or last year? Be proud of the progress that you’ve made!

Working Offline

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.

Conclusion

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!

Additional Resources

Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 07.02.2021

  • Adding Scott Hanselman’s talk Scaling Yourself
  • Adding Working Offline section with tips for working with low or no Internet Connectivity
  • Adding Remote work tip: Avoid Interruptions by Eric Elliot

Introduction to Web Development (v1)

What Do Web Developers Do?

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:

  • Short Description
  • The start of the web and web design
  • Evolution of Web Design
  • Page layout
  • Typography
  • 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. Front-end developers use HTML, CSS, JavaScript, and their relevant frameworks to ensure that content is presented effectively and that users have an excellent experience.

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.

For more detail, Udacity has a great blog post on this topic: 3 Web Dev Careers Decoded: Front-End vs Back-End vs Full Stack

Types of Careers

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.

Motivation

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.

Read this comprehensive blog post from Happy Bear Software about the journey to getting hired as a brief introduction to what you will face ahead.

Why choosing this approach?

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.

Conclusion

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?

Additional Resources

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.

Material based on Erik Trautman | The Odin Project. Photo by Miguel Á. Padriñán from Pexels
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

How this Course will work (v1)

Welcome to the SHA Frontend Development Course

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.

We will start by getting familiar with the internet and your own computer. Next, we’ll work on setting up a development environment and learning about Git and GitHub. Then, we’ll go over the basics of front end technologies like HTML, CSS, and Javascript before stepping into the back end with a brief foray that covers the basic concepts of back end technologies.

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!).

How It Works

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!

What Comes Next

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.

Resources

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.

YouTube Channels

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:

Searching for Rest API on the NetNinja channel:

Don’t forget to like, comment and subscribe if you find the resources useful or suggest another resource on the comments section below. Thank you!

Tip for Watching Long YouTube Videos

  • During the course you may need to watch YouTube videos as part of the curriculum. However, sometimes these videos can be very long and thus you may not have the time to watch it all at once.

  • Therefore, it is useful to know where you left off, and continue watching the video from that specific point.

  • Here is what you can do:

    1. Right click on the video.
    2. Select the option "Copy video URL at current time".
    3. The URL is copied to you clipboard.
    4. Open a text editor and paste the URL.
    5. Next time you want to watch the video copy paste the URL in the address bar.

YouTube Video

Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 24.02.2021

Set up all the necessary Services & Accounts

Here is a list of online services and platforms on which you must have an account.

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.


Gmail

By creating a Gmail account you are going to be able to use a multitude of web services provided by Google, such as YouTube, Google Maps, Google Docs, etc.

You will also be using this Gmail account to authenticate yourself with other third-party services, bypassing the time-consuming registration process.

GitHub

A service providing version control for our code. This is a must!

Also, GitHub allows you to register or sign-up with one click in various services.

Make sure to take good care of your GitHub profile as it will be one of the first stops where employers, recruiters, and companies will evaluate your online presence and experience.

Example of a bad GitHub profile page:

Bad GitHub profile page

Example of an awesome GitHub profile page:

cassidoo GitHub profile page

Try to avoid selecting usernames that look awkward and unprofessional, e.g. kx345, funny_joe, etc. You probably want to pick a username according to your real name: david_malan, john_resig, etc.

StackOverflow

Join one of the largest communities on the Internet, ask questions, seek help, and contribute.

(You can register with your GitHub account here –recommended)

LinkedIn

We need an account to look professional and also access their learning resources.

Netlify

One of the best hosting platforms out there.

(You can register with your GitHub account here –recommended)

Frontend Mentor

Improve your front-end coding skills by building real projects

(You can register with your GitHub account here)

Codepen.io

An online coding environment. You can easily create a new Code Pen, write some HTML, CSS, and JavaScript, and share the code with the rest of the world through a single URL.

Codesandbox.io

An online coding environment.

(You can register with your GitHub account here with just one click)

Loom

With Loom you’ll be able to quickly take screen recordings, and use them to share your code and relevant bugs with your mentors/instructors and the rest of the team and present your assignments and applications.

When recording using Loom, try to zoom in as much as possible on the application you are using, e.g. code editor, terminal, the browser, etc. in order for the instructors to have a clear and sharp view of your window.

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack
Updated: 31.05.2021

How does the Web work?

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack
Know what the internet is.
    • The internet is a worldwide network of computers that are linked together. These computers have a specific format that communicate with each other.
Understand what packets are and why are so important.
    • Packets are used to transfer data and thus they are information of the internet. A sender sends these packets that contains all the information needed to communicate with the receiver in a specific format.
Distinguish between a web page, web server, web browser, and search engine.
    • A web page is the page you look at when you open your browser.
    • A web server is the computer you have. The computer has the code for how the web page you opened in your browser should be displayed.
    • A web browser is the program on your computer that will display the web pages in the browser.
    • A search engine is basically a global web server. This web server searches all other web servers around the world for information. Thus the users can access any information they want from their local web server. They can do that by pulling up the web page on their web browser.
Understand what a client is.
    • A client can be a computer or even an internet device that requests information from a web server.
Understand what a server is.
    • A server is a computer that receives the requests from the client. These requests are sent as packets and depending on the information needed the server responds accordingly.
Understand what IP addresses are
    • IP addresses are numbers that each device has and it used to identify a specified destination in a network.
Understand what DNS servers are.
    • DNS Servers are like the “phone book” of the internet. They are responsible to translate the domain names into IP addresses.
Describe what happens when you run a search on google.com.
    • When a user opens the browser, search for something and then clicks the search button that action sends a request.Then Google receives that request and looks for the contents of the request in their databases. Depending on the information needed it sends back the result as a response.

How Does The Internet Work – Part 1

BREAK: Did you remember to take a break? 🙂

Estimated Total Time: Approx. 1 hour

Make sure you understand the basic Internet concepts described in these resources:

  • Networks
  • Protocols
  • Packets
  • IP Addresses
  • Domain Name Server
  • Routers

How Does the Internet Work – Part 2

Take a break, make a cup of tea or coffee, sit in a relaxed position and enjoy the next 2 videos that go in-depth in how the Internet mechanisms work. Although the 2 videos overlap in 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.

BREAK: Take a 5 to 10-minute break.

Estimated Total Time: Approx. 90 minutes

Additional Resources

In this section, you can find a lot of helpful links to other content. This is supplemental material for you if you want to dive deeper into some concepts.

  • Listen to Part 1 (starts around 8:30) and Part 2 of Security Now Podcast’s How the web works series.
  • Consider buying the book Tubes: Behind the Scenes at the Internet.
  • Internet Protocol (IP) Addresses
    • (Advanced Topic) | (Duration: 16 minutes)
  • Internet’s Packets: The Transfer Control Protocol (TCP)
    • (Advanced Topic) | (Duration: 10 minutes)
  • If you want to read a little more, you can check out the Introduction to HTTP online book at LaunchSchool. This book also touches on some topics that we haven’t covered yet but will cover later in the curriculum. Some of these topics are developer tools and security. In addition, you can learn about HTTP tools, which you may find helpful in the future.
  • Some advice on reading: It is recommended that you only review the immediate links posted in our curriculum. If you wish to dive deeper into some concepts then you can always search for more information. However, don’t forget not to overload yourself with a lot of information and burn out!

The archived old version of this post can be found here

UPDATED: 31.05.2021

Join the Odin Community

Introduction

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.

You should also do a Google search to find relevant information for your problem. Read about how to use Google to solve your programming questions. You can also look back at previous lessons for tools that you can apply to the current task.

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

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:

“`javascript

Your Colorful Code

“`

Chat features

  • 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!

Forum features

  • 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.

Assignment

  1. First, create a free GitHub account. As you will discover, GitHub is an integral part of the development workflow.
  2. 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.
  3. 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!
Material based on Erik Trautman | The Odin Project

Gearing Up

Introduction

As already mentioned before learning to code is really fascinating and rewarding but it can also be difficult and frustrating especially for beginners. You need to keep in mind that like any other skill it takes time to acquire and it can’t be learned in a week or in a month. As long as you are willing to put the time and the effort into it then we believe that you will learn how to program.

Thus before we dive into the core of the curriculum we are going to give you some tips so as to get the most out of the course. We will emphasize the things you need to succeed in your goal of learning to code and also to avoid any pitfalls you might encounter.

Keep Being Motivated

Now you should ask yourself a question. Why did you decide to learn to program?

  • Do you want a career that not only pays well but also can expand your creativity?
  • Do you want to develop the necessary skills and abilities in order to build an app?
  • Do you want to develop the necessary skills and abilities in order to build an app that will lead to starting your own company?

Your motivation is up to you. It can be any of the reasons mentioned above or not. It doesn’t matter. The most important thing is to be motivated and hold on tightly to it. This is what will get you through difficult times and what in the end will lead you to your goal.

If you need further motivation you can read about other’s success stories:

Growth Mindset is Really Important

When you learn any new skill it is important to have the right mindset. Your mentality plays an important role in your success, not only in programming but in your life in general.

For example, someone with a fixed mindset believes that they aren’t smart enough if they don’t succeed with the first attempt. On the other hand, someone that has growth mindset believes that with effort and persistence they will get better at it.

There are also a lot of researches that support the idea, that intelligence isn’t fixed and that can be developed. That means that anyone can learn new skills with the right spirit and always with grit and persistence.

As stated before there will be times, during this course, where you will find it difficult to understand a concept or you might get stuck in a problem. That times you should remind yourself that you may not be getting it yet but with persistence and courage, you will. You shouldn’t doubt yourself and give up. Keep in mind that it doesn’t matter how long it will take you to learn something but learn it at the end. Struggling with something and get through it is how real learning happens.

It is important when you find difficulties while you working through this curriculum to embrace these struggles. Once you overcome them then it is time to celebrate your persistence and not giving up.

In addition, you should always remember to go back to the moments where you have completed the projects and learned the once difficult concepts. This will help you deal with the moments where you might question your ability to learn to program. These projects are the proof that you are capable of learning and that with persistence and grit anything can be achieved.

You can check the resources below to learn more about how important to the learning process the growth mindset is:

How The Learning Process Works

The best way to fully understand how things work and are tight together is by first learning the concepts and then practice them. Projects can help you to better understand how the theoretical concepts fit together with the more practical techniques and how they all work together.

While you are learning there would be two modes that you will be switching between the focus mode and the diffuse mode. The focus mode occurs when you are in the process of learning new concepts and in general when you are actively learning stuff. The diffuse mode on the other hand occurs when you are doing other stuff apart from learning. This state is important because then is when your mind is trying to connect the things you just learned with the things you already know. And there is when the magic happens.

Knowing about those two states is really useful because you can utilize the learning process and make it more efficient. So when you are feeling stuck on a concept or on a project, take a break and in that way, your subconscious will work to make connections and thus find a solution to your problem. In general, the trick is first to try to solve the problem as much as you can and then take a break.

So you first understand something then you practice it and then you teach it.

Those three steps are very important and especially by teaching others what you have learned is a good way to solidify your knowledge. It helps you find holes and gaps in your knowledge that you might have not discovered otherwise.

A good way to practice this method of learning is by helping others in our community.

If you want to know more about the learning process you can read the articles below:

What Should You Do When You’re Facing Difficulties

It is almost certain that you will get stuck at some point in the curriculum and that is because a concept was not fully absorbed or maybe there is something that is not working correctly. Whichever is the case here is a list of tools to help you:

Hitting a dead end

  • Google it: A quick Google search can often lead to a solution. It is most likely that someone else has encountered the same problem as you.
  • Take a break: Don’t forget to take a break and thus allow the diffuse method to kick off.
  • Ask for help in our chat: After you make your research and you have a better understanding of where the problem occurs then ask for help in the chat. People will appreciate your effort and they will help you find the solution to your problem.

How to Manage Your Study Time

A really useful tip is to put a consistent time when working on something. It is more successful to have a specific time during the day and a specific goal to achieve. This will ensure that the goals are met on time and the progress you make is consistent as well.

What Should You Avoid

The following are some of the pitfalls that beginners often encounter when learning how to program. Try your best to avoid these.

Procrastination

One of the worst enemies when trying to make progress is procrastination.

Solution: The Pomodoro Technique is a great way to manage your time in order to stay focused.

This method uses a timer to break the work into intervals. Each interval is 25 minutes in length and it separates from short breaks. If you get distracted during an interval you start the 25 minutes work again. Once you have completed a full 25 minutes of work then you can take a 5-minute break. Then you repeat the same pattern, 25-minute work and then a 5-minute break. Once you have completed four 25 minutes blocks then you can take a longer break.

This technique is very useful since it keeps you focused for 25 minutes without any distractions. So this duration is not overwhelming and it is a reasonable amount of time to work and stay focused.

To learn more about the Pomodoro Technique, read this great article.

You can now bookmark this easy-to-use Pomodoro timer: TomatoTimer.

In 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 in his great presentation Scaling Yourself. You must definitely watch minutes 15:50 to 18:50, but the whole talk is worth watching.

Not Taking Breaks

One common mistake that you might make is that as you get into the material you might want to study for long periods of time. At first, this action might feel right since you are thinking that you are getting a lot more work done. However, that isn’t true, since this action leads to burnout and consequently, less work is done in long term.

Although it may seem waste of time, it is actually more productive to take regular breaks to recharge your brain. Studies have shown that taking breaks regularly, no matter their duration, increases performance. More specifically John Trougakos, Associate Professor of Management at the University of Toronto says that mental concentration is similar to a muscle. When we are focusing on a subject for too long our focus becomes fatigued and it needs rest like a bodybuilder needs rest between sets at the gym.

Solution: You can use the previously mentioned Pomodoro Technique, In that way you can time how often and how long to take your breaks. Also, it is advisable to experiment not only with different frequencies of breaks but also with different durations as well.

What to do during your break:

  • listen to music
  • journal
  • doodle
  • meditate
  • play a quick game
  • go for a short walk outside

You can read this article for more information to learn how breaks boost productivity.

Digital Distractions

When we are saying digital distractions we mean distractions from notifications that come from apps, such as Facebook and emails. These distractions should be avoided during study time since they break your focus.

Solution: What you can do is to first turn off notifications from all websites and apps. Additionally, you can add a blocker to your internet to limit your time on distracting sites.

Physical Distractions

Apart from digital distractions, there are physical distractions as well. These distractions come from your environment, like a TV in the background or other people talking. Although these distractions seem harmless they can do as much damage as the digital ones.

Solution: The best solution is to find a quiet place to study. It is a place where you can focus away from distractions. If you can’t find a place like that you can use noise-canceling headphones to block out noisy distractions.

Remote Work Quick Tip: Avoid Interruptions. Did you know that an interrupted task takes twice as long to complete and contains twice as many errors?

Rabbit Holes

In this course, we cover a lot of material and we provide many useful links to external resources. This can be tricky because the students might get pulled into rabbit holes. To be more specific students might try to learn all there is to know about a subject that isn’t ready to know or know more about this subject won’t benefit them at the specific time.

For this reason, we have put a lot of effort and time to structure the curriculum with the best result possible. All the important things that you need to learn about web development are introduced and explained at the appropriate time and in the correct sequence.

Solution: Therefore you need to stick to the path that this curriculum has given you. Try not to spend much time going through these sidetracks because they can really get you out of your goal.

Comparing Yourself to Others

Another common mistake that most beginners do is to compare themselves to others who have more coding experience. This is very harmful to your self-esteem and can lead to depression and frustration.

Solution: You should only compare yourself to your past self. In other words, compare your abilities and skills that you have now with the ones you had last week or last month. Don’t forget to be proud of what you have accomplished.

Working Offline

There are cases where the 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 the Internet is down, this is probably one of the best applications for searching through technical documentation.

  • 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.

Conclusion

To sum up, learning a new skill is hard and there’re a lot of obstacles that need to be passed. We hope that what you have learned here will better prepare you to get the most out of this course.

Having this said now it is time to jump into learning web development!

Additional Resources

In this section, you can find a lot of helpful links to other content. This is supplemental material for you if you want to dive deeper into some concepts.


The archived old version of this post can be found here

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 31.05.2021

  • Adding Scott Hanselman’s talk Scaling Yourself
  • Adding Working Offline section with tips for working with low or no Internet Connectivity
  • Adding Remote work tip: Avoid Interruptions by Eric Elliot

Introduction to Web Development

Introduction to Web Developers Job

A short answer to this question is that web developers build and maintain websites and web applications in general. Web developers usually work for clients and those clients can be a company, an organization, or even the government that wants their product or service onto the web.

Therefore the web developer needs to collaborate with other people and together as a team to fulfill the client’s needs. The work that needs to be done can involve not only front-end development but also back-end or even full-stack development.

If you are a person that likes to solve logical problems and build useful things then the web development profession is probably a good choice for you. In general, this profession is high in demand and has good salaries.

You can check the link below for more details about web development. The link is from Wikipedia and it talks about the 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:

  • Short Description
  • The start of the web and web design
  • Evolution of Web Design
  • Page layout
  • Typography
  • Quality of Code
  • Generated content – Static websites
  • Generated content – Dynamic websites

Types of Web Developers

As stated before a project can involve front-end, back-end, and full-stack web development. Let’s see now what are the differences between those terms.

The front end refers to the stuff you see on the website when you open it in the browser. That involves the content as well as the user interface elements such as the navigation bar. The technologies that front-end developers use are HTML, CSS, and JavaScript. All these technologies are combined together in a more efficient way so as the users to have the best experience possible.

The back end refers to the core of an application. It involves the server and in general, it stores and handles all the data so as the front end has everything that it needs. The back end can be very complicated especially if the application has a lot of users and a lot of data to handle. The technologies that back-end developers use are Java, Python, and Ruby.

The full-stack refers to both front-end and back-end development. In this course, we focus on teaching full-stack development so as the students have a wide knowledge of web development.

If you want to know more about this topic you can visit the following link: 3 Web Dev Careers Decoded: Front-End vs Back-End vs Full Stack

Types of Careers as a Web Developer

Now let’s see the types of careers and their differences. In other words, we will cover the different types of employers or clients you might encounter as a web developer.

To start with, there are large tech companies such as Google and Facebook that offer excellent pay and opportunities but they have very strict hiring requirements and expectations.

On the other hand, startups offer lower salaries and often require long hours but at the same time they also offer equity and they don’t have as much as high requirements as the larger ones. In addition, they also have unique environments and offer good opportunities, especially for Junior developers.

Working as a freelancer can be a little bit challenging since it means that you have to all the work by yourself as well as managing billing from clients. In addition, you must have excellent communication skills. However working as a freelancer has some advantages as well, since you have the freedom to schedule and design your own products.

Another option is to work as a consultant for a company that will give you more time to code and less time worrying about other stuff. Furthermore, this option can provide you with a good balance in life and payments.

There is also the option to work for large old companies. Those companies also need web developers and can pay well although since they are not highly focused on tech things will get much slower.

Useful Tools for Learning

Let’s see now some of the tools that you will definitely use on a regular basis. Some of them you may not have heard before but you are certainly going to.

Motivation is The Key to Success

Learning to code is very rewarding since you can build whatever you like from scratch. However, it can be also difficult and frustrating especially at the beginning of the journey. As a student, you have the desire to build and to solve problems and those characteristics are a really big asset.

Keep in mind that a lot of successful web developers come from different backgrounds, and the important is the outcome, what you have built rather than how you got there.

Conclusion

Up until now, you should have a very good idea of what a web developer does and how your life will look like if you follow this path. This has only been the tip of the iceberg in the world of web development.

In this course, "Web Development 101," you’ll take a journey through all the major topics that you will have to know. These topics will provide you with a small taste of each and then move to other topics. Don’t worry though because in the next courses we will dive deeper into these topics.

You will build many projects, websites, and other applications to strengthen the skills that you have gained throughout this journey. Those skills will get you hired. Keep in mind that getting through all the journey will be challenging.

You should check out the post "Why Learning to Code is So Damn Hard" so as to learn more about this journey.

Additional Resources

In this section, you can find a lot of helpful links to other content. This is supplemental material for you if you want to dive deeper into some concepts.


The archived old version of this post can be found here

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

How this Course will work

Welcome to the SHA Frontend Development Course

In this section, we will see the basics of computers and web programming in general. We will learn how the web works and also we will gain some basic knowledge of how the content is created and served on the web.

Therefore even if you are not interested in becoming a web developer yourself the material provided in the following sections and lessons will be very useful for understanding the web in general.

The first step is to get familiar with your own computer as we all as the internet. The next step would be to learn some tools of how to set up a development environment. Furthermore, we will learn what is Git and Github and why these technologies are so useful. After that, we will go over the basics of the front end technologies such as HTML, CSS, and JavaScript. Later on, we will see some basics concepts of the back end as well.

The goal is that when you finish this section you should have gained not just a brief understanding of the web but also the knowledge of the technologies involved to build some basic web applications. In other words you would be able to create a simple web page, put some style to it and also add some functionality. All these tasks should be done comfortably through the use of the command line.

Just to keep in mind that this section covers a lot of different topics. The reason is silly to go straight to server-side programming without first knowing what it is and why it is very useful to learn.

How the Curriculum is Structured

Now let’s see how the curriculum is structured. Each lesson represents a topic and the context provided is made by pulling the best content from all the internet. Therefore each lesson will introduce a topic, each topic will contain some basic content and then a list of external resources made by others will follow.

In addition, most of the lessons will have questions that you will need to answer before moving on to the next topic. Apart from questions, some lessons will also have exercises and some others projects that you will need to complete. These projects will help you understand and grow your knowledge by building things.

Although most of the material provided should be fine to go through by yourself, the projects are also a good opportunity to work together with others. So why don’t you give it a shot!

What Will we See Next

At the end of this course, you should have a solid understanding of web programming and will want to dig deeper. Although each lesson will cover a lot of material from the major topics, it is really just the tip of the iceberg. There is a lot more stuff that needs to be learned. At the end of the Web Development 101 course, you will have the foundation and the skills needed to create wonderful applications.

Resources

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.

YouTube Channels

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:

Searching for Rest API on the NetNinja channel:

Don’t forget to like, comment, and subscribe if you find the resources useful or suggest another resource on the comments section below. Thank you!

Tip for Watching Long YouTube Videos

  • During the course you may need to watch YouTube videos as part of the curriculum. However, sometimes these videos can be very long, and thus you may not have the time to watch them all at once.

  • Therefore, it is useful to know where you left off and continue watching the video from that specific point.

  • Here is what you can do:

    1. Right-click on the video.
    2. Select the option "Copy video URL at current time".
    3. The URL is copied to your clipboard.
    4. Open a text editor and paste the URL.
    5. Next time you want to watch the video copy-paste the URL in the address bar.

YouTube Video


The archived old version of this post can be found here

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 31.05.2021