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

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