DEV Community

Cover image for 3 Basic Web Languages For Coders That help you in web design and development.
Shristi
Shristi

Posted on • Updated on

3 Basic Web Languages For Coders That help you in web design and development.

Insert picture description

There are so many Web languages nowadays, so people are confused about which language to learn to create high-quality web pages. If you want to do something exciting in Web Language, here are three basic level languages, and you should start from here.

HTML

HTML is a great language. It defines the structure of web pages, and it determines how data is displayed online. But this doesn't make HTML a programming language.

A markup language

HTML encapsulates or "marks up" data within HTML tags or elements, defining the data and describing its purpose on the web page. The web browser then reads the HTML elements, which tells it things like headings, which parts are paragraphs, which parts are links, etc. The HTML describes the data to the browser, and the browser then displays the data accordingly.

That's how the browser knows that.

However, this is not programming, as I said before. The above is not an example of an executable script. HTML used to mark up the text for the browser to read and interpret as web page content. HTML is used for structural purposes on a web page, not functional ones.

LearnHtml tutorial to start the basic structure of the web page to advance.

CSS

Now come with the new language that CSS uses to create a creative website, or you can say HTML is the sole of CSS; without CSS, you can't imagine a creative website * (most cases).

How it CSS works? CSS describes how HTML elements should be displayed. Cascading Style Sheets (CSS) is a style sheet language used to describe a document written in a markup language like HTML. It describes the Web pages, including colours, layout, and fonts. It allows one to adapt the presentation to different devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.

LearnCSS tutorial to design and create interactive web pages.

JavaScript

JavaScript is the most popular and widely used client-side scripting language, i.e. it runs within the client's (user) browser. It is used to make web pages interactive and to add dynamic effects to the web pages. JavaScript is an object-oriented language, i.e. it supports all object-oriented concepts like C ++ or java. But, JavaScript is not related to the Java language in any way.

LearnJavascript tutorial and start a complete web development Course.

Top comments (17)

Collapse
 
robortworner profile image
Robort Worner

Thanks for the Article. I really appreciate the way you explain it.
Regard : Socialgoodreads

Collapse
 
alvaromorte786 profile image
AlvaroMorte786

Nice Article. But for the beginners.

Collapse
 
digital_hub profile image
hub

good day dear Shristi

many thank you so much for spending your time creating and posting this article.

i just found your article and i like it. The way you talk about Basic Web Languages and Wordpress-development.

Many thanks for the article it is just great!! It looks very promising and your thoughts regarding the usage of Basic Web Languages for Wordpress
development are interesting. Many thanks for your inspiring ideas.

i am currently working on some issues - that have to do with the CSS and google fonts.

to begin with the beginning:i have found out that my wordpress-site fetches two google fonts:

one of them is montserrat

i decided to host them locally. so i have to

a. fetch the fonts
b. correct the css code

with the following tool i fetch them

google-webfonts-helper.herokuapp.c...

here i have the option to add the paths - to customize the path in the css-data

/* montserrat-regular - latin / u/font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v25-latin-regular.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), / Modern Browsers / url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); / Legacy iOS */ } Customize folder prefix (optional):

and now i have to add a path to set the correct path - (that means to customize the path )

../fonts/

some additional thought: what makes me wonder is the fact that some of the examples show full paths as reference - others dont:

see the following examples;

a. wp-ninjas.de/wordpress-google-font...

url("https://wp-ninias.de/fonts/muilti-latin-300.woff2") format (
url("https://wp-ninias.de/fonts/muilti-latin-300.woff") format (

b. pixelgrade.com/docs/advanced-custo...

Copy the URL Path field and paste it before each URL in the Embed Code field. The example code will look like this:

@font-face {
font-family: 'Name of the font';
src: url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff2') format('woff2'),
url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff') format('woff');
}

c. themeisle.com/blog/custom-fonts-wo...

Once the file is in place, open up your child theme’s stylesheet. Now you’ll need to call on that font so you can use it, via a snippet that should look like this:

`

@font-face {
font-family: New Font;
src: url(yourwebsite.com/wp-content/themes/...);
font-weight: normal;
}

`

and now compare it with the following example here:

  1. Copy CSS: (default is Best Support) Modern Browsers Choose Best Support if old browsers still need to be supported. Formats in this snippet: [eot,woff,woff2,ttf,svg]

Code:
/* montserrat-regular - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */

see the helper-tool google-webfonts-helper.herokuapp.c...

the question: so the question is: how to set the path correct for the CSS... which path should we use here!?

Dear Shristi i look forward to hear from you

Collapse
 
katnel20 profile image
Katie Nelson

Cool. Those are the 3 I already know. Which one should I learn next?

Collapse
 
shristi26281534 profile image
Shristi

Jquery and then JavaScript. If you're completely new at this I would recommend Codecademy or CodeRepublics.

Collapse
 
katnel20 profile image
Katie Nelson

I have done both of those in the past. I really like jQuery.

Collapse
 
bayuangora profile image
Bayu Angora

Next, you can learn framework like Vue, React, etc.

Collapse
 
porterroan profile image
Roan Porter

Nice one.
Regard: GeekRepublics

Collapse
 
robert14694741 profile image
Robert

Nice Article

Collapse
 
vijeshcormaty profile image
Vijesh Cormaty

I am a content creator at Crazum, Minisma and USAttorneyWiki

Some comments may only be visible to logged-in visitors. Sign in to view all comments.