When learning HTML, CSS, and JavaScript for the first time, starting with a complex project may feel overwhelming. To help, we’ve provided a basic skeleton file.
This skeleton file is designed for beginners to understand the basics of HTML, CSS, and JavaScript while practicing hands-on. Learning programming basics through books or programming schools is effective, but modifying code yourself and checking the results can also be highly beneficial.
The skeleton file provided here is meant to support this “learn by doing” approach to education.
- What is a Skeleton File?
- Directory Structure of Beginner HTML, CSS, and JS Skeleton Files
- Content of the Skeleton HTML File (test.html)
- Content of the Skeleton CSS File (style.css)
- Content of the Skeleton JS File (index.js)
- Download the Beginner HTML, CSS, and JS Skeleton Files from GitHub
- [HTML for Beginners] Learn by Editing Template HTML Files [HTML Tutorial #1] YouTube Video
- Summary
What is a Skeleton File?
A skeleton file is a set of files with the basic structure for a specific project or webpage. Writing code from scratch can be a high hurdle for beginners. Therefore, by providing a basic template of HTML, CSS, and JavaScript, learners can edit the code and advance their understanding step by step.
By using this file set, you can expect the following learning benefits:
- Understanding basic directory structures
- Distinguishing between relative and absolute paths
- Learning the basics of HTML tags and attributes
- Studying how to adjust layouts and designs with CSS
- Adding simple interactions with JavaScript
Directory Structure of Beginner HTML, CSS, and JS Skeleton Files
The directory structure of the skeleton file provided is as follows:
template1
│ test.html
│
└─assets
├─css
│ style.css
│
├─images
│ 1.jpg
│
└─js
index.js
This structure makes it easy to understand how CSS, JavaScript, and image files are linked to the HTML file.
Content of the Skeleton HTML File (test.html)
This HTML file provides the basic structure of a webpage. It includes sections for a header, main content, and footer, making it easy to test connections with CSS and JavaScript files.
To ensure the files work locally, CSS, JS, and image files are loaded using relative paths (e.g., “./”) instead of absolute paths (e.g., “/”).
Feel free to modify the content of this file. As long as the file extension remains “.html,” you can rename the file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Website Name</title>
<meta name="description" content="Website description">
<meta property="og:title" content="Website Title">
<meta property="og:type" content="website">
<meta property="og:image" content="">
<meta property="og:description" content="Website description">
<meta property="og:site_name" content="Website Name">
<meta name="twitter:card" content="summary_large_image">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="./assets/css/style.css"/>
</head>
<body>
<header>
<div class="logo">Website Logo</div>
</header>
<main>
<section>
<h1>Website Name and Description (Copy or Title)</h1>
<div class="dummyimg"><img src="./assets/images/1.jpg" alt=""></div>
</section>
</main>
<footer>
<div class="copy">©Company Co., Ltd.</div>
</footer>
<script src="./assets/js/index.js"></script>
</body>
</html>
Edit the content of this file to customize the page and enhance your learning.
Content of the Skeleton CSS File (style.css)
Next is the CSS file, which determines the visual appearance of the page. This stylesheet includes basic reset styles and layout settings.
/* Reset and basic styles */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Display block elements */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* Body styling */
body {
margin: 0 auto;
background-color: #fff;
width: 100%;
color: #000;
}
/* Header styling */
header {
width: 100%;
background-color: #000;
padding: 20px 0;
text-align: center;
}
/* Logo styling */
header .logo {
font-size: 18px;
font-weight: bold;
color: #fff;
}
/* Section styling */
section {
font-size: 14px;
padding: 60px 0;
}
section h1 {
font-size: 18px;
text-align: center;
}
section .dummyimg {
width: 70%;
margin: 20px auto 0 auto;
}
section .dummyimg img {
width: 100%;
}
/* Footer styling */
footer {
width: 100%;
text-align: center;
background-color: #000;
}
footer .copy {
color: #fff;
padding: 20px 0;
font-size: 12px;
}
Using this CSS, you can achieve a simple yet beautiful layout. It’s especially important for beginners to observe how each CSS selector affects specific parts of the page and modify them accordingly.
Content of the Skeleton JS File (index.js)
The JavaScript file includes a simple alert function, commented out by default. You can use this as a starting point to add various interactions.
//alert("test");
Download the Beginner HTML, CSS, and JS Skeleton Files from GitHub
The provided skeleton files are available for download on GitHub. Visit the GitHub page, click the “Code” button, and select “Download ZIP” to download the complete set of files.
Download from “yo1tec/template1” ＞＞
We plan to create HTML tutorials on YouTube using this skeleton template. Additionally, we aim to update and provide second and third versions of beginner-friendly templates in the future.
※ Please use these files at your own risk.
[HTML for Beginners] Learn by Editing Template HTML Files [HTML Tutorial #1] YouTube Video
This is my first attempt at creating an HTML tutorial, YouTube video, and video editing. I hope you watch it with kind eyes.
Summary
Use this skeleton file to enhance your learning of HTML, CSS, and JavaScript. By editing each file and experimenting, you can deepen your understanding. In the future, you can use this template as a foundation for more advanced projects.
Enjoy learning the basics of web development and the joy of building your own site using this template.
※ Use this as a reference at your own risk.
