Master HTML, CSS & JavaScript Beginner to Pro Web Development
Master the essentials of web development with Mendskills' Web Building Crash Course. Learn HTML, CSS, JavaScript, and more to build professional websites fast.
-
Using an HTML Skeleton
A Skeleton is the supporting framework of a living organism.
It is typically made out of something hard, to protect a more vulnerable body.
Encyclopedia Britannia
Every Web developer should have an HTML skeleton.
You should keep it in your pocket, and use it for every job:
Try to change the text "This is a Heading" to "This is my Wedding".
Did you make it?
Congratulations! Now you know how to edit HTML.
HTML Skeleton Explained
The DOCTYPE must be present. It informs the browser that this is an HTML document:
An html start tag and an html end tag define the start and end of an HTML document.
The language is English:
<html lang="en">
</html>A meta charset tag defines the character set (UTF-8):
The HTML page is missing head tags. Head tags are not needed in HTML.
In HTML, everything before the body tag is considered a part of the head.
<meta charset="UTF-8">The HTML standard requires a proper page title:
<title>Page Title</title>A meta viewport tag makes the page look good on all screen sizes (Laptop, Mobile):
<meta name="viewport" content="width=device-width,initial-scale=1">The link tag links to a stylesheet:
<link rel="stylesheet" href="name">Start tag and end tag surround future CSS styling:
<style>
</style>The script tag links to a script:
<script src="name"></script>Start tag and end tag surround the visible body of the HTML document:
<body>
</body>Image tags define HTML images:
<img src="img_la.jpg" alt="LA" style="width:100%">Make it a habit to "pack" HTML sections in div elements.
Prepare yourself for giving each section a class name:
<div class="class name">
</div>Heading tags define HTML headings:
<h1>This is a Heading</h1>Paragraph tags define HTML paragraps:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>You have just learned the basics of using a HTML. Learn More Advance Live Virtual Training
-
Using a CSS Stylesheet
Change this:
<link rel="stylesheet" href="">To this:
<link rel="stylesheet" href="https://www.mendskills.com/css/5/common.css">To use the stylesheet you must add a class to the HTML elements you want to style:
<div class="w3 black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>HTML / CSS Skeleton
Try to change the background color of the container from teal to black.
Did you make it?
Congratulations!
You have just learned the basics of using a style sheet. Learn More Advance Live Virtual Training
Keep on reading!
How to Be Responsive
HTML Code
How to Create a Card
Ready for something really advanced?
How about a Business Card in HTML?
Including both image and text.
Play with the code below for a while, until you think you got a grip on it.
After that, we will start coding really fantastic HTML pages.
-
Using a JavaScript Library
<script src=""></script><script src="https://www.mendskills.com/lib/common.js"></script>
Hide/Show HTML Elements
JavaScript Example
Congratulations!
You have just learned the basics of using a JavaScript library. Learn More Advance Live Virtual Training
-
Page Layout
A CSS "Layout Draft"
It is always wise to draw a layout draft before building a webpage.
Make a draft on a piece of paper:
You have just learned the basics of using a style sheet. Learn More Advance Live Virtual Training
-
How To Create a Web Page
How to create fully responsive web page that will look nice on all devices (desktop, laptop, tablet, and phone):
Create a Skeleton
Use the skeleton from the previous chapter.
A simple skeleton with only one picture:
Add Navigation
Add a navigation bar for navigating to Home, About, Members and Contact.
Add Slide Show
Change the image to a side show.
Add About
Add some information about the band
The Band
This is our band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Add Band Members
Add a picture of each band member
Add Contact Info
Add contact info and a contact form.
Example
You have just learned the basics of using a How To Create a Web Page. Learn More Advance Live Virtual Training
