Starting out coding especially in frontend design, it can be difficult/overwhelming to know where to start. Your experience can be different from person to person, but the approach that worked for me is the minimalistic approach. Starting off with HTML, CSS and vanilla javascript (javascript without a framework, eg. React, Angular, etc.) A lot of these online courses, have built IDE (Integrated development Environments), which hide how these languages are connected/work together. Especially, when starting out you don’t need to use any of these frameworks, to learn JavaScript.
Step-by-Step Guide
This is a basic setup of how code HTML, CSS & vanilla JavaScript without a framework.
Pre-Installed
- Create a folder
- Create 3 new Files:
- index.html
- app.js
- styles.css
- Paste this in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fascinate&display=swap" rel="stylesheet">
<title>Vanilla JavaScript Setup </title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="container">
<center>
<header class="headline">
<h1>Vanilla JavaScript Setup</h1>
</header>
<script type="text/javascript" src="app.js"></script>
<button onclick="myAlert()">Click Me</button>
<p div id="main"></p>
</center>
</body>
</html>- Paste this in app.js
function myAlert() {
document.getElementById("main").innerHTML = "This is displayed through the use of a javascript function.";
}- Paste this in styles.css
body {
background-color: #E0D268;
font-family: 'Fascinate';
}
.headline, p {
color: #f8f8ff;
}- Open Microsoft Visual Studio Code, and install the Live Server Extension.
- Open the index.html in Microsoft Visual Studio Code, right-click anywhere in the file. Click Open with live server.
- Live server is started locally then opened automatically in your browser. Which will show your webpage.
This is all you would need for learning the HTML, CSS and JavaScript language basics. You can checkout the github, repo for the code.
I hope this helps.
