More Learning Resources

What resources should I use to learn web development?

My personal #1 recommendation to anyone trying to get into web development as a career would be to go through The Odin Project

It is an absolutely incredible resource that teaches all of the fundamentals of web development (including HTML, CSS, Javascript and Git) and more in a completely free digital environment.

They even have a Discord server for users to help each other out while going through the curriculum.

If you go through the entire Odin Project from start to finish and complete every step and every project I genuinely believe you will be in a position to start applying for jobs. It uses all the same technologies that real companies use and mirrors the kinds of tasks and challenges you would find in a real professional web development position.

In addition to the Odin Project, Free Code Camp is also very highly recommended as a free resource to learn web development.

• What are the best free resources for learning HTML
• What are the best free resources for learning CSS
• What are the best free resources for learning Javascript
• What are the best free resources for learning Git
• What are the best free resources for learning Databases

What are the best free resources for learning computer science?

If you are interested in learning about the more generalized field of "software development" then there are some absolutely incredible free resources for that as well.

Anything that you learn about the development in general will almost certainly help propel your understanding of web development as well. The great thing about software is that ultimately most of the concepts are the same regardless of which specialty you choose.

Learning how to sort an array in C++ or Python will use all the same general concepts as sorting an array in Javascript. Learning how to do it in one language one will make learning it in the other significantly faster. Often you'll even learn tips and tricks that you might not have been exposed to working exclusively in one language.

The gold standard free resource for getting introduced to programming and software development is Harvard's free CS50 course. Seriously, watch the preview video to get an idea, it's absolutely fascinating subject material and extremely well presented. I would recommend this course to anyone who was thinking about getting into development.

After that we have the incredible OSSU which is an entire university level computer science available free online. Once again, this is one of the most amazing resources you will ever encounter, and entirely free.

We also have teach yourself CS which is very similar to OSSU in that it aims to be a complete computer science education.

Lastly, I'd like to also share two other great resources for people interested in the field of software development, depending on where you interest lies:

• If you are interesting in using software and programming to solve practical everyday problems, check out Automate the Boring Stuff with Python. After completing this if you're working a white collar job using Excel in an office, there's a good chance you'll find you can automate away half the stuff you do on a daily basis.

• The other is for people who are more interested in the "how does software work at the lowest level". It's a project called Nand to Tetris and it basically goes through the process of going from electronic hardware logic gates to a working game of Tetris. Very involved and complex, but incredibly rewarding.

• If you are interested to go even lower, down to the bare metal, then you'll definitely want to check out this incredible video series from Ben Eater on building an 8-bit computer from scratch. If you complete a big project like this you'll learn more about computers than any single college course or video lecture will be able to teach you.

Simple Website Template

The following is a simple example of a complete website that uses HTML, CSS and Javascript. These files are used as the basis of a lot of examples in this tutorial such as using Github, website hosting, and learning HTML/CSS/JS.

The purpose of this section is to link to in those other parts of the tutorials to copy these files, but it may also serve as an example of a simple website setup that shows some of the fundamental concepts of HTML, CSS and Javascript.

Feel free to use it for any part of your learning or projects in any way that you like.

It consists of three files called index.html, script.js and style.css which are all intended to go into the same folder/directory. The contents of each of those three files is as follows:

index.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>My Animal Blog</title>    <link rel="stylesheet" href="style.css" />    <script defer src="script.js"></script>  </head>  <body>    <header>      <h1>My Favourite Animals</h1>      <h2>Enjoy these furry friends</h2>    </header>    <main>      <article class="card">        <img          src="https://res.cloudinary.com/dqse2txyi/image/upload/v1657421273/blogs/intro-to-web-development/cat_k4fcww.png"          alt="Cat Playing Chess"        />        <div class="card__container">          <h3>Chess Cat</h3>          <p>He's planning his next move.</p>          <button onclick="likeButton()">Like</button>        </div>      </article>    </main>    <footer>      <p>&copy; 2022</p>    </footer>  </body></html>

style.css

body {  color: #333333;  font-family: Helvetica, sans-serif;  margin: auto;  max-width: 800px;}main {  margin-bottom: 40px;}header,footer {  text-align: center;}h1 {  font-family: Arial, sans-serif;}h2 {  font-style: italic;  font-weight: lighter;}.card {  width: 350px;  margin: auto;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  border-radius: 10px;  overflow: hidden;}.card > img {  width: 100%;  height: auto;}.card__container {  padding: 16px;}

script.js

var likes = 0;// Adds 1 to the number of likes, and updates the text of the buttonfunction likeButton() {  likes = likes + 1;  var myButton = document.querySelector("button");  myButton.innerText = " " + likes;}

When placed together and hosted with a web server, this will be the output when you visit the URL:

Conclusion

I hope you found this guide useful and informative. It's been extremely challenging to try and decide the right format to present it so that it can be helpful to as many people as possible.

If you have any suggestions or feedback please leave a comment behind. Despite the length and scope of this guide I still consider it to be a work in progress and am very open to any ideas for improvement.

Lastly, to everyone, I wish you good luck on your learning journey. Learning a new skill, especially one as complex as software development, takes a lot of time. Go easy on yourself, and remember that the goal is not overnight success, but rather a little bit of progress each day.

All the best,

~ Alex