Thread by @dSebastien

If you want to #learntocode, focus on learning and understanding concepts.

Here's a small thread to help you out! 👇🏻

Start with #HTML because it'll allow you to quickly get something on the screen. That is the ultimate motivator, and the feedback loop is perfect: edit, save, refresh!

The Mozilla Developer Network (MDN) Website includes an awesome tutorial for HTML: developer.mozilla.org/en-US/docs/Lea…

While exploring HTML, start using a tool like VSCode, which is a free Integrated Development Environment (#IDE).

An IDE is an environment made for the purpose of developing software. At the core, it's a text editor, but it's actually so much more. It includes tools to troubleshoot problems, test your code & ensure it works as expected, manipulate code efficiently, and many more.

IDEs support a myriad of file formats and programming languages. Also, most IDEs such as VSCode and WebStorm include a vast ecosystem of extensions, allowing to do tons of cool things.

Note that you can customize IDEs extensively, which is awesome: dsebastien.net/blog/2019-10-0…

While learning HTML, you will learn a few things about syntax, structure, logic, tags, elements, attributes, code structure, etc.

Those are concepts you'll encounter all the time with software development. Coding is mostly about syntax, structure, and logic.

It's also a great occasion to discover the developer tools in your Web browser (i.e., user agent) of choice. If you press F12, you'll discover what's under the hood of any page you visit.

TIP: Focus on the "Elements" tab at first.

developer.chrome.com/docs/devtools/

You should also learn about the difference between the HTML code you write and the DOM, the representation of your page in the browser. Your HTML code is exactly what you wrote. The DOM is the interpretation of the browser, and the current state, which can change with code.

Right after HTML, start exploring Cascading Style Sheets (CSS). #CSS will enable you to make things beautiful. You'll be able to use different fonts, sizes, colors, manipulate how things are displayed, add borders, change backgrounds, etc

MDN tutorial: developer.mozilla.org/en-US/docs/Web…

You'll discover rules, styles, declarations, properties, values, and more.

CSS is not a programming language, but it includes concepts (e.g., declaration, properties, values) which you'll also encounter (albeit in a different form) in programming languages.

CSS is TONS of fun but can feel a little overwhelming given how complex it is. Don't worry and don't try to learn everything. Web design is a career in and of itself.

While learning about CSS, you'll discover how to define stylesheets (i.e., collections of CSS rules) in your HTML pages, whether by including the CSS code in your HTML file (using an HTML style tag), or keeping it separate and loading it using an HTML link tag.

Even if you don't plan on becoming a Web designer and design Websites all day long, it's very useful to understand some core concepts.

At a minimum, I recommend learning about the box model (margin, border, padding etc), block vs inline elements, selectors, flexbox, and grid.

Flexbox and grid will allow you to easily arrange different elements on the page to create more elaborate page designs. You could skip those, but you'd be missing out on very powerful tools!

Once you start playing with CSS, take some time to go back to the developer tools and explore the utilities it includes for CSS.
You'll see that you can actually manipulate the styles of any Web page you visit. It's a ton of fun 🎉

DevTools are incredibly useful for Web dev.

Once you're able to put some life in your Websites, you can either decide to dive much deeper into HTML and CSS, allowing you to become a Web designer, or dive into programming and become a front-end or back-end developer.

It's a matter of taste.

If you prefer Web design, then you might also want to learn about UX design, #UI design, and explore tools such as Figma.

Figma includes tools to assemble screens, create wireframes, interactive prototypes, detailed designs, etc.

If you want to code, start with JavaScript. It's the programming language of the Web, but can actually be used for almost anything. You can create Web applications with it, back-end systems, etc.

You'll start by exploring coding basics, which are concepts that you'll find in all programming languages with syntactic differences.

Those include: pseudocode, variables, constants, operators, statements, expressions, conditional structures, functions, loops (continued)

Arrays and other data structures, error handling, debugging, programming paradigms, etc.

The easiest starting point is to open the developer tools and test code in the console. But that's only useful at the very beginning.

Again MDN has great tutorials: developer.mozilla.org/en-US/docs/Web…

To go further, you should install node.js, which is a JavaScript interpreter. Thanks to node, you'll be able to write code in a .js files, and ask node to execute those for you (e.g., node myfile.js). This will allow you to explore most concepts without mixing things up.

My advice is to create one file for each concept you learn about (e.g., loops.js, conditionals.js, error-handling.js, etc), play a lot, and most importantly, have fun!

In the beginning, it's difficult to understand the difference between JavaScript in the browser and JavaScript outside of a browser. The language itself is the same, but each environment provides a different set of things you can use: Application Programming Interfaces (APIs)

The language itself is JavaScript but is actually a standard called EcmaScript, standardized by ECMA.
All "runtime environments" include at least what is part of the EcmaScript standard (e.g., variables, constants, loops, functions, etc). But each environment is specific

Web browsers include tons of APIs to do all sorts of things that aren't part of the EcmaScript specification but are useful on the Web. For instance, the DOM API is a JavaScript library that we can use to manipulate the DOM of a page.

Look at this list: developer.mozilla.org/en-US/docs/Web…

Similarly, Node.js includes a while Software Development Kit (SDK) with many APIs: nodejs.org/api/

It's important to understand that Node is not a Web browser, so it focuses on different goals, and can be used for various purposes.

The two most popular uses for Node are Web APIs (more on this later) and tools.

Here are some examples of APIs that the SDK of Node includes:
- Manipulate files
- Read/write from/to the console
- Interact with the operating system

Unless you want to focus on back-end development, it's probably best to ignore the Node SDK, and instead, focus on the core features of JavaScript.

I wanted to mention this because it's important to understand the distinction.

Once you understand the basics of JavaScript, you can start exploring JavaScript on the Web. To do so, you'll add scripts to your HTML pages, and you'll dive into the DOM API (that's one you should definitely know about).

Another super useful one is the Console API.

Once you include JavaScript code with your Web pages, you'll be creating Web applications.
Web applications include logic, as opposed to Websites, which are "static". Without being pedantic, the difference is important.

Once a Web application is loaded in the browser, the DOM of the page (i.e., the representation of the page) will evolve based on what your code does to the DOM.

Again, it will be time to learn more about the Dev Tools. You should explore the "Sources" tab where you'll be able to inspect and debug (i.e., troubleshoot) your code as it executes.

Another key concept you'll have to dive into is the difference between synchronous and asynchronous code. Many operations such as fetching data take time and are thus asynchronous. Those are dealt with using the Promise API (part of JavaScript).
Check out developer.mozilla.org/en-US/docs/Web…

At this point, there are avenues in front of you.

Some ideas:
- You can start exploring the HTTP protocol and the network tab
- You can learn about Web APIs (RESTful, GraphQL), and discover how to exchange data
- You can dive into back-end development
- ...

Once you build actual applications, you'll quickly notice that structuring the code is important for readability. At that point, you should explore JavaScript modules to split your code into multiple files. In particular, look at ESM.

You'll notice the APIs at your disposal are limited. You'll want to reuse code shared by the
community. You'll then learn how to import and use libraries, and how to build more complex projects. You'll hear about npm, yarn, Webpack, etc. But that is a subject for another day.

It's only once you're comfortable with the above concepts that you should look into frameworks like React, Vue, Remix, or Angular and their ecosystems. Those are incredibly useful and powerful, but shouldn't be used too soon.

In conclusion, learn the basics first and get to more advanced topics step by step. That way you'll build upon solid foundations.

I could tell you a whole lot more, but this thread is quite long already 😂

Don't hesitate to reach out to me if you have questions!

If you found this thread interesting, then please share it around, and follow me for more! 🙏

Check out my Dev Concepts collection: dev-concepts.dev
Dev Concepts is a series of 12-ebooks covering the fundamentals of IT and software development.