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:
[html autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”0″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false” title=”HTML Code Example”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorialslides</title>
</head>
<body>
<h1> welcome to tutorialslides.com</h1>
</body>
</html>
[/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:
[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”0″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false” title=”CSS Code Example”]
body {
   background-color: lightblue;
}
h1Â {
   color: white;
   text-align: center;
}
p {
   font-family: verdana;
   font-size: 20px;
}
[/css]
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:
[html autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”0″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false” title=”Javascript Code Example”]
document.write(5 + 6);
[/html]
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. jQuery
jQuery is a fast and concise JavaScript library created by John Resig in 2006. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development.
Sample Code:
[html autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”0″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false” title=”jQuery Code Example”]
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
[/html]
Before learning jQuery
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 jQuery, it will be good if you have an understanding of how the internet and web-based applications work.
5. Photoshop
Adobe Photoshop is a raster graphics editor developed and published by Adobe Systems for macOS and Windows.
Photoshop files have default file extension as.PSD, which stands for “Photoshop Document.” A PSD file stores an image with support for most imaging options available in Photoshop. These include layers with masks, transparency, text, alpha channels and spot colours, clipping paths, and duotone settings.
This is in contrast to many other file formats (e.g., .JPG or .GIF) that restrict content to provide streamlined, predictable functionality. A PSD file has a maximum height and width of 30,000 pixels, and a length limit of 2 Gigabytes.
This is how it looks if we include all codes in a single HTML Page:
Sample Code:
[html autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”0″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false” title=”Combined Code Example”]
<!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>
[/html]
