Hey babes! The easiest way to start programming is perhaps with web design. Well, maybe not but it’s the easiest to follow without hitting some sort of learner plateau.
Let’s start by saying two truths and one lie:
- HTML is short for HyperText Markup Language and with it we write the content of our page
- CSS (Cascading Style Sheets) are used to make the design of our page
- Javascript comes from java is the script or where the programming happens of our page Well it’s half a lie. Javascript doesn’t come from Java but it started on the idea of the old Java applets that were used before in browsers. The half truth comes from the fact that Javascript is the only one from these three in which you actually code.
At the end I will write some courses, pages and videos you can look for so you can actually immerse yourself in this.
What you will need:
- A code editor
- Browser
For code editor I recommend using Visual Studio Code for the extensions you can add.
HTML:
Most tags open and close in html. This is the basic template of how a html doc looks like.
Create a file named index.html, if you are using Visual Studio Code you can use the Emmet Abbreviation ! to create it.
Let’s add a Heading 1 tag <h1></h1> to be able to see the css.
Let’s open it. You can open your html by clicking in Your Files and opening it with a browser or with a server. Visual Studio Code has an extension called Live Server by Ritwick Dey that you can use to open it.
To be able to see the changes you might have to save and refresh your page in the browser. But you will have this page:
CSS
Now let’s add a simple design.
You can use tags like body, classes (.[name_of_your_class]), ids (#[name_of_your_id]), and general selectors like * to call what you want to style. Then you open and close curly brackets {} with the style you want to give them.
For your page to use the style, you have to connect them with <link/>. Link is a self-closing HTML tag.
The code above will look like this in your browser.
Javascript
In javascript you will code. Clicks, hovers, and keys you click are events that work on top of the document. You can select the part of the document you want (element) by getElementBy[...]. In this case we will only add an event to the whole document that will be triggered when you click any part of the page. We create a new element that has the phrase Welcome! And then we append it (add it to the end) of our body in html.
We then add it to our html with the tag . This will go either before the ending of the body tag or in the head with a defer option.
When you click your page it will add the new text.
Now you have your first page! It’s easy if you go step by step and understand why everything happens!
Resources to learn more
https://www.freecodecamp.org/learn/ - Responsive Web Design for html + css
https://learnjavascript.online/ - Interactive learning for javascript
https://mikkegoes.com/javascript-projects-for-beginners/ - Do projects instead of learning javascript theory
https://www.w3schools.com/html/default.asp - HTML documentation
https://www.w3schools.com/css/default.asp - CSS documentation
https://developer.mozilla.org/en-US/docs/Web/JavaScript - Javascript Documentation
https://javascript.info/ - Javascript Documentation
Top comments (0)