Web Development Fundamentals: HTML, CSS, JavaScript

Web programming, or web development, is, simply put, the creation of websites. Moreover, the concept of “web development” is preferable, since when creating sites, not all actions are programming in the usual sense of the word. When using HTML and CSS, that is, when creating a site or page template, they talk about site layout. Setting up the server that hosts the site is more akin to the work of a system administrator than a programmer.

Web development is not limited to one language. So the client part of the sites is based on three pillars – HTML, CSS, JavaScript (JS). The server part can be developed in any of the many programming languages (PHP, JS, Python, SQL, and others).

To create simply arranged small sites, you can only know HTML and CSS, it will be enough to have an idea about the role of JavaScript. Such sites do not actually have server-executable programs. The server hosts only files that are ready to be sent over the network, including html and css code.

What is HTML

HTML stands for HyperText Markup Language, that is, Hypertext Markup Language. To make it easier to understand, let’s put it simply: a text markup language. This means that the commands of the HTML language describe what is what on the text page. What is the title, what are the paragraphs, picture, list, metadata and so on.

In other words, with the help of HTML create the structure of the page. As if they say what elements it includes. HTML page layout is important for search robots. They crawl the pages hosted on the Internet and index them. Markup is also important for the browser (the program with which you browse the web). By interpreting the html code, the browser displays the page as the programmer intended.

An HTML page is a text file, usually with an .html extension, and containing a specific sequence of basic language tag commands. In the name HTML, adding the word “hyper” to the word “text” means that the text provides for the markup of links leading to other HTML pages. When the link is clicked, another HTML document is loaded into the user’s browser window. The one to which the link points.

What is CSS

So, CSS is by and large a page design language. What exactly is meant by this? What is the width of the site menu, the color of the links, what size of the letters of the paragraph text, what font style is used, whether frames are needed somewhere, how quotes are highlighted, pictures are framed, and so on.

In addition to links, other interactive elements are often added to pages. So the content and appearance of the page may change depending on certain actions of the user. For example, when you click on an image, it expands to full screen. Or when you click on a button on the page, some kind of animation starts. This dynamism of the content is usually provided using the JavaScript programming language.

Here we are talking about JS in the context of its execution, what is called on the client side, that is, the user’s browser (the browser is considered the client). However, JS is often used, including on the server side (where files are stored, where they are transferred from). That is, programs are written in JS that are executed before the html page is sent to the browser of the person who requested it. At the same time, the purpose of such server-side JS programs is somewhat different than that of client-side JS.

JS is an imperative (we will consider these as real) programming languages. HTML and CSS are descriptive languages, they do not order, but declare, in this case, how something should look. It is easier to learn such languages.

Some things that can be done with JS can also be done with CSS. For example, the applied styles can change dynamically, and different stylistic features can be applied for different screen sizes. Also, CSS can “track” mouse hover, and within certain limits it allows you to create animations.

To get started with web development, you need a minimum of software: any text editor for programmers (these support syntax highlighting) and a browser with which you access the Internet.

JavaScript is a browser-based programming language for front-end development. It is supported by all popular browsers. Every site, every web application you use contains JavaScript code. It’s often recommended for beginners because it’s quite simple, but it contains all the fundamental things: object-oriented model and data structures.

Why learn HTML and CSS

Many people wonder where to start learning to program. Theoretically, the site structure can be written in a regular text editor, such as Notepad. But it is better to use special applications that make it easier to work with HTML and CSS codes. Usually such programs are divided into 2 types:

  • visuals that are great for dummies. If you just want to make a template site, then an editor-constructor will be enough for you, in which any user will assemble a page from the proposed blocks. You don’t need to write any codes for this
  • text used by developers. Here you can not do without knowledge of HTML markup and CSS classes. These are not yet programs for professionals, but an excellent simulator for young professionals

A handy text editor is a web programmer’s best ally, so don’t be afraid to test and find the one that’s right for you. For Windows, the free Notepad++ works great, and for macOS, CodeRunner. These are great options for beginners.

Sublime Text is also popular. It is free to use, but with a limited set of features. If you like it, then pay extra for access to all the functionality. Based on the Electron framework, editors such as Atom and VS Code work, but they are still more suitable for developers with experience.

However, remember that working in text editors is the final stage of creating a site, which is preceded by the preparation stage. First you have to develop a layout that will allow you to visually see the future site. You can do this in any graphics editor or even on a sheet of paper.

Never skip the development phase unless you want to redesign your site from scratch. It is important that both you and your customer understand what the end result should be. 

To do this, follow a simple algorithm:

  • determine with the customer the purpose of creating an Internet resource, its structure and design
  • fix it in the form of a technical task
  • create a layout and approve it with the client
  • design a website and fill it with content. If the customer will place the materials himself, then your task is to explain to him how to do it correctly
  • launch website online

Sometimes a client needs help with hosting and domain, as well as SEO promotion. Agree on this at the stage of the technical task, so that there are no surprises later.

VPS Windows

VPS Windows KVM Virtualization

Remote access/control

Ready solution

KVM virtualization

24 hours a day support

Facebook
Twitter