So where should you start? let us help you in deciding the languages you should learn to become a professional Web Designer.
1. HTML
HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but “HTML 2.0” was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Tutorialslides</title>
</head>
<body>
<h1> welcome to tutorialslides.com</h1>
</body>
</html>Before learning HTML
You should be familiar with:
Before proceeding for learning HTML you should have a basic working knowledge of Windows or Linux operating system, Some important must learned skill is given below:
- Experience with any text editor like notepad, notepad++, or Edit plus etc.
- How to create directories and files on your computer.
- How to navigate through different directories.
- How to type content into a file and save them on a computer.
- Understanding about images in different formats like JPEG, PNG format.
2. CSS
CSS is used to control the style of a web document in a simple and easy way. CSS is the acronym for “Cascading Style Sheet”.
CSS will help the professionals who want to make their websites or personal blogs more attractive.
Sample Code:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}Before learning CSS
You should be familiar with:
- Basic word processing using any text editor.
- How to create directories and files.
- How to navigate through different directories.
- Internet browsing using popular browsers like Internet Explorer or Firefox.
- Developing simple Web Pages using HTML or XHTML.
3. Javascript
JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications. It is complementary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform.
Sample Code:
document.write(5 + 6);Before learning Javascript
You should be familiar with:
- Basic word processing using any text editor.
- How to create directories and files.
- How to navigate through different directories.
- Internet browsing using popular browsers like Internet Explorer or Firefox.
- Developing simple Web Pages using HTML or XHTML.
- A programmer who has some prior exposure to object-oriented programming concepts
4. Reactjs
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);Before learning Javascript
You should be familiar with:
- You should have a basic understanding of HTML, CSS, JavaScript, Document Object Model (DOM) and any text editor.
- As we need to develop a web-based application using Javascript, it will be good if you have an understanding of how the internet and web-based applications work.
5. Figma
Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows.
This is how it looks if we include all codes in a single HTML Page:
Sample Code:
<!DOCTYPE html>
<html>
<head>
<!–– Jquery Code ––>
<script>
document.write(5 + 6);
</script>
<!–– Javascript Code ––>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
<!–– CSS Code ––>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
<meta charset=”utf-8″>
<title>Tutorialslides</title>
</head>
<body>
<h1> welcome to tutorialslides.com</h1>
<p>Hi, Make me invisible</p>
</body>
</html>