TECHY360
Everything You Need To Know About Tech

What are HTML, CSS, and Javascript? How to get started.

0 200
HTML CS JavaScript
HTML CS JavaScript

So, you are interested in the development of sites and decided to make your own. But where to start? All the ways start with the simplest, and in web development, the simplest is HTML, CSS, and Javascript.

Basically, HTML and CSS is used to style the website it decides how the user interface looks and it shapes the frontend of the website.

What is HTML?

HTML is not a programming language, it is a markup. Imagine that the whole site consists of rectangles

HTML Example Website
In the screenshot, I circled in red for an example of how the markup is built.

There is a block, inside there is also a block for a picture, inside a block for a title, and a block for text is next to it. For each block, there is a tag. For example, for a post block in which a picture, text, etc. will go, there is a tag div

<div>        // Open the block
             // What is inside the block
</div>       // Close the block

It is necessary to comply with the grammar, so to speak. what the tag consists of Triangular brackets and inside them the name of the tag. It is also necessary to explain where the beginning and where the end is, as seen in the example above, we have the beginning of the <div> block and the end of the </div> block. The end of the block is defined by the slash “/” before the name. Not all tags have a closing tag.

Let’s create a simple block markup in which we will have a title and text:

<div>
    <h3> Hello world </h3>
       <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       </p>
</div>

And so what we did:

  • Opened div unit
  • Added header 3 tag you can use another header it’s your choice. The title must also have a closing tag.
  • Added plain text to the p tag
  • Closed block div

For all the tags available in HTML visit the link and learn it’s syntax.

And if you already know HTML check the cheatsheet of HTML for quick learning.

There is a convenient service: jsfiddle or codepen where you can create your own web pages or scripts online, check code without filling your computer with garbage.

codepen io coding
Codepen online code editor and tester

All the examples that I show here, you can copy to jsfiddle and check how it works.

And so, we made a block, add text to it, and how to change the color of the text or how to indent more from the edges. CSS will help us here.

What is CSS?

css styling
CSS used to style the HTML

CSS – This is the visual part, these are the styles that are superimposed on the tags.

Let’s try to add styles to our block.

<div>
    <h3> Hello world </h3>
       <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       </p>
</div>


div {                  // Which tag include the following styles
    padding: 15px;     // Indentation from all sides by 15 pixels
    max-width: 400px;   // Maximum block width 400 pixels
    margin: 0 auto;//External top and bottom 0, left and right automatically
    text-align: center; // Align text to center
 } // All for this tag.


h3 {                 // Which tag include the following styles
    font-size: 25px; // Font size
    text-transform: uppercase; // Text in capital letters
 }
// Option 1
div{
  padding: 10px 20px 10px 20px;
}

// Option 2
div{
  padding: 10px 20px;
}

// Option 3
div{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}


In the first version, the padding is 10, on the right, 20, on the bottom, 10, on the left, 20

The second option is top and bottom – 10, left and right – 20

In the third option, we prescribe each side separately.

In order to align the block in the center, I set the external margin, and set it to automatic left and right margin, but in order for the block to stand in the center, I set the block 400 pixels wide.

There are many rules and exceptions, both in styles and in HTML, unfortunately, I can not describe everything. There are styles that some browsers do not support and you should definitely take this into account when the site is made up.

What is JavaScript?

What is JavaScript
What is JavaScript

JavaScript is the best friend of HTML and CSS. HTML sets the site markup, CSS is responsible for the appearance, and JavaScript animates it all. Using JavaScript code, the developer can determine how the page responds to user actions.

Now JavaScript – the only programming language for browsers. It works under Windows, macOS, Linux and on mobile platforms, that is, everywhere. If you do not know JavaScript, there is nothing to do in programming interactive sites.

In 2009, the NodeJS launched, which brought javascript outside of browsers. Now it can be run even on the washing machine. About what is Node.js and why we need it, we have already written, so I will not talk about it in detail.

How javascript works

Related Posts
1 of 6

Any user action on the page raises an event. JavaScript programming is event handling. This is what a regular script looks like:

 The user did something on the page 
                           ↓ 
The event worked in the browser 
                           ↓ 
JavaScript started, which is assigned to the event 
                           ↓ 
JavaScript changed something on the page.  

A programmer writes a handler only for those events that are worth responding to:

 The user clicked the mouse 
                   ↓ 
The event on click 
                   ↓ 
triggered the function changePhoto 
                   ↓ 
The photo was changed in the gallery  
The user pressed the ↓ key.
The onkeydown event worked. 
                     ↓ 
The developer did not assign an event handler. 
                     ↓ 
Nothing happened.  

Not all events are a reaction to a user action. For example, the “welcome” window shows the site after the onload event. It works itself after a full page load.

What is good javascript

JavaScript is fully integrated with HTML, it is able to change the web page in any way. In response to an event, the developer may:

  • insert any tags into the HTML code on the fly ;
  • set the appearance of elements through the class and attributes of HTML;
  • move any item;
  • request user data;
  • send a request to the server ( AJAX technology).

This is just what immediately came to mind JavaScript can do much more, within its page it is God.

JavaScript Game
To make such a game in JavaScript, you need 30 
() lines of code.

JavaScript is a suitable language for learning programming. It is quite simple, but it contains all the fundamental things: algorithms, object-oriented model, data structures. If traditional languages ​​for learning – Pascal and Basic – are of little practical use, then JavaScript is a workhorse.

Starting with JavaScript is good, and because it is syntactically similar to the great and terrible language C. Having studied JavaScript, you will get a basic idea of ​​all the “ sigilant” languages: C ++, C #, Java, PHP. They set the trend in their fields and are very popular, so for a beginner it is important to get acquainted with the syntax C.

A javascript program is a plain text. You can write in JavaScript in any text editor.

Restrictions

Classic JavaScript is a programming language for the Internet, it is powerless outside of the browser. With the help of JavaScript you can not run the program on your computer or write the file in the desired folder.

Because of the security rules, browsers limit the power of javascript beyond the native page. Tabs can be managed under certain conditions or not at all. For example, JavaScript can close only the tab that you created yourself. 

A year or two ago, Node.js and React Native platforms appeared, with the writing in JavaScript not only for the browser but also for computers with smartphones. These are trendy and trendy technologies, but globally JavaScript is a programming language for the Internet.

Competitors

Now there is nothing in web programming that can shake JavaScript positions. Language is so successful that there is no reason to invent something else.

Only add-ins compete with pure JavaScript: CoffeeScript, TypeScript, Dart. The code of add-ons is sometimes more compact, it is easier to read and catch errors, but it will still be converted to JavaScript before execution.

The main strength of javascript is eternal youth. It was released 21 years ago, but not outdated, but developed and develops after HTML.

What to learn before javascript

You can start javascript without any idea about programming. JavaScript is a good choice for the first language, especially if you associate the future with web development. In this case, any knowledge in the field of programming will be a plus.

If you have experience with HTML and CSS, quite good. Creating a site is logical to start with static pages in HTML and CSS, and then revive them with JavaScript. Plus HTML and CSS give a basic understanding of how the Internet works and how sites work.

Where to develop a JavaScript programmer

After learning the basics of JavaScript, you can dig as deep as you want.

Well to master libraries and frameworks for JavaScript – sets of ready-made classes with functions. Some of them are so powerful that they completely change the programming scripts. For JavaScript, the most popular frameworks and libraries are React, jQuery and Angular.

jQuery and JavaScript code
The code in both lines does the same thing – hides the element with the identifier ” helloDiv”

In addition to frameworks, it is useful to explore add-ins over JavaScript: CoffeeScript, TypeScript, and Dart. Some add-ons will make your code cleaner and more compact.

Finally, you can take up server programming and Node.js. This is a trending technology that is used by BMW, Amazon, Apple and other serious companies. This will expand your JavaScript knowledge beyond web page management.

Useful sites

It’s normal when a beginner has a million questions and fortunately has platforms, communities where everyone helps each other.

One of the most useful sites that helped me a lot in due time – StackOverflow

You ask any question if it is not repeated, then almost a moment is answered and explained. If the question has already been, then it is very easy to find and you will immediately find the answer.

To check in advance whether a particular style can be used so that all browsers support it. You can check on the website caniuse.

Write the name of the style and you will be immediately shown all the information on which browsers and with which versions this style is supported.

Get real time updates directly on you device, subscribe now.

Comments
Loading...

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More