Set up all the necessary Services & Accounts

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.


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 akward 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 for 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 it 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? Search for: Kostas Minaidis (kostasx)
Updated: 25.10.2020

How does the Web work?

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!

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.

Specifications:

Your page must describe and mention the following concepts and terms:

  • Brief introduction to the Internet
  • How does the Internet work
  • Internet Protocols
  • IP Addresses
  • DNS
  • Packets (TCP/UDP)
  • HTTP
  • HTML
  • Routers

Technical Details:

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

Good luck!

  • How to: Create a Zipped Folder using Windows:

    • Choose the folder you’d like to zip.
    • Right-click the folder, point to Send to, and then click Compressed folder(zipped).
    • A new zipped folder will appear in your Desktop, this Zip File can now be used for your HTML drop.
  • How to: Create a Zipped Folder using Mac:

    • Create a new folder on your Desktop or choose an existing folder.
    • Ctrl + click the folder and click Compress.
    • A new zipped folder will appear in your Desktop, this Zip File can now be used for your HTML drop.

After you submit your assigment, you must wait for your instructors to approve it, in order for you to move on to the next lesson. After your assignment has been approved, you must click on the lesson’s [Mark Complete] button in order to be able to move on. Your assignment will be graded once an instructor or mentor reviews it.

FREQUENTLY ASKED QUESTIONS

  • QUESTION: Do we have any limitations in the process of creating it? Should we use only HTML to create the website or can we use CSS to style the website?
  • ANSWER: You have no limitations at all. You can use HTML, CSS and, if you feel adventurous, even JavaScript! Use all the knowledge you have to structure and style the website as best as possible.
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? Search for: Kostas Minaidis (kostasx)

Material based on Erik Trautman | The Odin Project

UPDATED: 22.12.2020

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

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? Search for: Kostas Minaidis (kostasx)

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

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? Search for: Kostas Minaidis (kostasx)

How this Course will work

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? Search for: Kostas Minaidis (kostasx)

UPDATED: 24.02.2021