This tutorial is for those who want to go straight to the point and just setup a project and start coding.
Create a folder for your Html, css and Javascript files.
Create your files inside the folder you just created
while the way the files look may differ from PC to PC ensure the file description is the same as the image above.
Link the Css and JavaScript files to the Html file
When it comes to linking files it is crucial to take note of where each files are in the folder.In our case the files are all at the same level which would make linking straight forward.
The content of your html file should look something like this
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
`
We are going to use 2 different tags to link the css and js file as they require a different kind of tag to link them.
to link the css file we use the Tag. we then use the rel and href attributes to indicate the relationship the link tag content has with the page and the location the css file is in.It looks like this.
<link rel="stylesheet" href="index.css" />
The ink tag should be put in between the head tag.
as for the javascript file we use the script tag and the pass in the location of the javascript file in the src attribute. it looks like this.
<script src="index.js" ></script>
note that the script tag can be placed inside both the head tag and body tag however for performance purposes it is advised to place the script tag at the bottom of the body tag that way it is parsed last.It can also be placed in the head tag with either the
"Async" or "Defer" attributes added to it to replicate a similar loading behaviour.
If you have followed the instruction above your the content of you html file should look like this.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<script src="index.js" ></script>
</body>
</html>
`
And now you have a very basic Html, css and javascript setup. if you have any questions or are stuck please leave your question in the comment section and i'll respond to them.
Top comments (0)