{"id":306,"date":"2022-01-15T20:56:00","date_gmt":"2022-01-15T19:56:00","guid":{"rendered":"https:\/\/clasenceneba.com\/?p=306"},"modified":"2023-10-31T11:29:34","modified_gmt":"2023-10-31T10:29:34","slug":"step-by-step-instructions-to-become-a-react-node-js-web-developer-from-scratch","status":"publish","type":"post","link":"https:\/\/clasenceneba.com\/en_gb\/step-by-step-instructions-to-become-a-react-node-js-web-developer-from-scratch\/","title":{"rendered":"Step-by-step instructions to become a React\/Node.js web developer from Scratch."},"content":{"rendered":"\n

1. Introduction<\/h2>\n\n\n\n

This material provides a guide and resources to become a react\/node.js developer. The text and links are gotten from external sources, mostly FreeCodeCamp<\/a> and other links which are helpful to learn programming. The aspects covered here are HTML, CSS, Javascript, Git, PostgreSQL, React.js, and Node.js, and Typescript. If you are already comfortable with Javascript, CSS, and HTML, you can skip to the #Development section.<\/p>\n\n\n\n

1.1 What is computer programming?<\/h3>\n\n\n\n

A computer program consists of code that is executed on a computer to perform particular tasks. This code is written by programmers. Programming is the process of giving machines a set of instructions that describe how a program should be carried out. Continue reading on freecodecamp<\/a><\/p>\n\n\n\n

<\/a>1.2 What is Web development<\/h3>\n\n\n\n

Web development is the act of building and maintaining websites for the internet or intranet (private network). Examples of websites you might build would include blogs, personal pages, E-commerce sites, or social media sites. Continue reading on freecodecamp<\/a><\/p>\n\n\n\n

<\/a>1.3 HTML<\/h3>\n\n\n\n

<\/a>What is HTML?<\/h3>\n\n\n\n

HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages. It is one of the most basic building blocks of every website, so it’s crucial to learn if you want to have a career in web development.Continue reading on freecodecamp<\/a><\/p>\n\n\n\n

<\/a>HTML Practice on W3school<\/a><\/h3>\n\n\n\n

W3school gives an interractive learning experience for web programming languages. It contains learning resources and a platform to write and run HMTL code. At any point of the lessons, click on Try it yourself<\/em> to code and see the results.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Edit on the left and press the run button to run the code<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

At the bottom of each page, there are Next<\/em> and Previous<\/em> buttons. Click on Next<\/em> to go to the next tutorial. Continue until HTML Examples<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Continue course on W3schools<\/a><\/p>\n\n\n\n

1.4 CSS<\/h3>\n\n\n\n

<\/a>What is CSS?<\/h3>\n\n\n\n

CSS (Cascading Style Sheets) is what makes web pages look good and presentable. It\u2019s an essential part of modern web development and a must-have skill for any web designer and developer.Continue reading on freecodecamp<\/a><\/p>\n\n\n\n

<\/a>CSS Practice on W3school<\/a><\/h3>\n\n\n\n

Start the course with css intro<\/a> and follow it up to CSS Examples<\/a><\/p>\n\n\n\n

<\/a>1.5 Javascript<\/h3>\n\n\n\n

<\/a>What is Javascript?<\/h3>\n\n\n\n

JavaScript is used with HTML and CSS to create dynamic and interactive web pages and mobile applications. We often call it one of the building blocks of web development. Continue reading on freecodecamp<\/a><\/p>\n\n\n\n

<\/a>JavaScript Practice on W3school<\/a><\/h3>\n\n\n\n

W3Schools Javascript course<\/a>. Follow the lessons up to JS JSONP<\/a><\/p>\n\n\n\n

Video alternative<\/a>.For the video alternative, you can sign up on the following sites to write and test code online Codepen<\/a> Direct html, css, javascript editing. Scrimba<\/a> Create a variety of web projects.<\/p>\n\n\n\n

<\/a>Online Project with HTML, CSS, and JavaScript<\/h3>\n\n\n\n

The project builds a calculator using what has been covered in HTML, CSS, and JavaScript. The calculator will work as the gif below. It is advisable to try building this on your own and then follow the tutorials on FreeCodpeCamp to see how it was built.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Follow along and build project with freecodecamp Project description here<\/a><\/p>\n\n\n\n

Other practice projects<\/h3>\n\n\n\n

If you want to practise with more projects, The link below contains some example projects good for beginners. Top 15+ JavaScript Projects<\/a><\/p>\n\n\n\n

<\/a>2 Development<\/h2>\n\n\n\n

This section contains tools and packages which will help a developer start building projects.<\/p>\n\n\n\n

<\/a>1. Git<\/h3>\n\n\n\n

<\/a>What is Git<\/h3>\n\n\n\n

Git is a version control system that developers use all over the world. It helps you track different versions of your code and collaborate with other developers. If you are working on a project over time, you may want to keep track of which changes were made, by whom, and when those changes were made. This becomes increasingly important if you end up having a bug in your code! Git can help you with this. Continue reading on freecodecamp<\/a><\/p>\n\n\n\n

<\/a>Git Learning resources<\/h3>\n\n\n\n