Getting Started with HTML
HTML, or HyperText Markup Language, is the backbone of every website. It allows you to structure content and define elements like text, images, links, forms, etc.
HTML uses tags (inside angle brackets <>) to markup content. For example,
paragraph
defines a paragraph. There are hundreds of elements, but you just need to learn the common ones.
To begin, create a index.html file and add the standard HTML boilerplate code:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
</body>
</html>
This sets up the initial page structure. We add our content inside the tags.
It's good practice to validate your HTML using the W3C Markup Validation Service to catch errors.
For local development, you can use text editors like Visual Studio Code and preview pages on a local web server. Browser developer tools are also handy for inspecting and debugging code.
Key HTML Elements for Structure
Now let's go over some essential HTML elements for adding text, headings, lists, and hyperlinks:
Headings
Headings define the page outline and hierarchy using
to
tags:
<h1>Welcome to the Unicorn Platform Blog</h1>
<h2>This is a Subheading</h2>
This is a lower subheading
And so on...
Paragraphs
Paragraphs of text should go inside
tags:
<p>Here is a paragraph of text on the Unicorn Platform blog!</p>
Lists
For bullet point lists, use the
unordered list tag and- items:
<ul>
<li>Blog Post 1</li>
<li>Blog Post 2</li>
</ul>
For numbered lists, use the
ordered list tag instead:
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
Hyperlinks
To link other pages and sites, use the anchor tag:
[Visit Unicorn Platform](https://unicornplatform.com)
The href attribute defines the destination URL.
Adding Images, Videos and Other Media
Visual media like images, videos, audio clips, PDFs, etc. help spice up your page. Here's how to include them:
Images
Use the self-closing tag and set the src attribute to the image file url:
<img src="images/sample.jpg" alt="Sample Image">
The alt text provides a description for accessibility.
With Unicorn Platform, you can easily upload and embed images into your site.
Videos
You can embed videos from YouTube, Vimeo, etc. using their provided iframe embed codes:
<iframe width="560" height="315" src="https://www.youtube.com/embed/v64KOxKVLVg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Adjust the dimensions as needed.
Unicorn Platform offers seamless video embeds for startups to showcase video content.
The same concept applies for adding audio, PDFs, SVG vector images, and more.
Structuring Pages with Divs, Spans and Tables
Now let's look at elements that help structure the layout and styling of pages:
Divs
The
tag defines a division or section in your HTML document for better separation:
<div class="header">
<h1>Welcome</h1>
</div>
<div class="content">
<p>This is the main content</p>
</div>
Use CSS to style each div individually.
Spans
To apply styling to pieces of text within a paragraph, use :
<p>This text is <span class="blue">blue</span> and this text is <span class="red">red</span>!</p>
Tables
Tables organize data into rows and columns:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<!-- additional rows...-->
</table>
Adding Links and Navigation
Now let's connect other pages and add site-wide navigation:
Page Links
To link between pages in your site, use relative file paths in your hrefs:
[About](about.html)
Anchors
Jumping to sections within a page uses id anchors:
<div id="section2">Section 2</div>
[Jump to Section 2](#section2)
Navigation Menu
A common approach for site navigation is to use unordered list:
<ul>
<li>[Home](index.html)</li>
<li>[About](about.html)</li>
<li>[Contact](contact.html)</li>
</ul>
Play around by adding more pages and linking them together!
Styling and Customizing with CSS
Now that we have the basic page structure done in HTML, we can style and customize the look using Cascading Style Sheets (CSS).
CSS controls the visual design - colors, fonts, layouts, effects, and more. You can use CSS directly in HTML or link to external stylesheets. Let's look at the key concepts:
CSS Selectors, Properties and Values
CSS contains style rules made of:
- **Selectors** - Target HTML elements like
,
,
- Properties - Visual attributes like color, font-size, width
- Values - The property settings like red, 20px, 800px
For example:
p {
color: blue;
font-size: 14px;
}
Targets paragraphs and sets text color and size.
There are tons of CSS properties you can explore later!
Working with External Stylesheets
We keep CSS code in separate .css files to stay organized. Link them from any HTML page in the :
<head>
<link rel="stylesheet" href="styles.css">
</head>
Now you can reference those CSS selectors:
/* styles.css */
.blue {
color: blue;
}
<!-- index.html -->
<p class="blue">This will be blue!</p>
It's best practice to have folders like css, images, js to organize assets.
Typography and Text Styling
Some examples of CSS properties for styling text:
body {
font-family: Arial;
font-size: 16px;
line-height: 1.6;
}
p {
margin: 20px 0;
}
.large {
font-size: 2em;
}
.blue {
color: #00F;
}
Explore options from Google Fonts like Lato, Open Sans, Raleway for more professional typefaces.
Colors, Backgrounds and Images
CSS makes it easy to add color, images, and graphical flourishes:
.banner {
background-color: #F2F2F2;
background-image: url('images/banner.jpg');
background-size: cover;
height: 300px;
border-radius: 5px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
Consider exploring CSS gradients as an alternative to standard images.
Basic Responsive Design
Responsive design makes your website adapt smoothly to any device using CSS media queries like:
/* Mobile */
@media (max-width: 500px) {
.content {
width: 90%;
font-size: 14px;
}
}
/* Tablet */
@media (max-width: 768px) {
.content {
width: 80%;
font-size: 16px;
}
}
Adjust layout, typography, and more per screen size. Frameworks like Bootstrap take responsive design even further.
Enhancing Pages with Forms, Tables and Media
Now that you know the web design basics, let's look at some common ways to enhance pages:
Building Forms with HTML and CSS
Forms allow users to input data and interact with your site:
<form>
<label>Name:</label>
<input type="text">
<label>Message:</label>
<textarea rows="5"></textarea>
<button type="submit">Submit</button>
</form>
Style inputs, labels, submit buttons, and fieldsets using custom CSS. Validate data and process submissions on the backend.
With Unicorn Platform, you get access to pre-built form templates and integrations to easily capture leads.
Displaying Data in Tables
Tables present information clearly in rows and columns:
<table>
<tr>
<th>Plan</th>
<th>Price</th>
<th>Features</th>
</tr>
<tr>
<td>Basic</td>
<td>$9.99</td>
<td>Core features</td>
</tr>
<!-- Additional rows -->
</table>
Style tables extensively with CSS. Consider pagination or filtering for large data sets.
Embedding Rich Media and Components
Go beyond static content by embedding interactive elements:
<!-- Google Map -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.819084821914!2d-77.03656068560083!3d38.89767377979746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b6dc39ec3eff%3A0xac0e2e2be7f68c49!2sWhite+House!5e0!3m2!1sen!2sus!4v1553130259445" width="600" height="450" style="border:0" allowfullscreen></iframe>
<!-- YouTube Video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/v64KOxKVLVg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Explore libraries like MediaElement.js for fuller media support. Embed interactive JavaScript widgets from third-parties to create richer experiences.
With Unicorn Platform, you get drag and drop widgets to easily embed maps, calculators, calendars, and more.
Adding Interactivity with JavaScript
JavaScript (JS) lets you add complex interactivity like:
// Toggle menu open/closed
const menu = document.querySelector('#menu')
menu.addEventListener('click', () => {
menu.classList.toggle('open')
})
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Popular frameworks like React use JavaScript to build rich single page apps.
Unicorn Platform provides a wide range of interactive components like slideshows, modals, image carousels that can be added with no coding required.
Hosting and Launching Your Website
Once you complete your site, you'll need web hosting to put it online. Some top options are Bluehost, SiteGround, and HostGator.
When picking a hosting provider consider:
- Disk space - How much storage for your files
- Bandwidth - Monthly data transfer limit
- Domains - Do they offer free domains?
- Email - Webmail accounts included?
- Speed - How fast do they serve pages?
- Support - Do they offer 24/7 customer service?
A basic shared hosting plan starts around $5/month. Point your domain to use their DNS servers and upload your site!
With Unicorn Platform, hosting and speed optimization features are included with every plan to get your site online quickly.
Validating and Processing Forms
To make your forms actually do something:
- Use JavaScript to validate entries and show error messages
- When submitted, send the data to a backend language like PHP, Node.js, Python, etc. to process it
- Store and retrieve the input to/from a database
Or use a service like Formspree to handle the backend work.
Unicorn Platform integrates directly with CRMs like HubSpot and email services like Mailchimp to capture and process form data without any coding needed.
You Did It!
Congratulations! You now have all the foundation you need to start building your own personal website. The concepts you've learned apply to creating all kinds of professional sites.
Where to go from here?
- Learn more advanced HTML tags - Form input types, audio/video, SVG, Canvas, etc.
- Dive deeper into CSS - Responsive design, animations, variables, flexbox, grid layout
- Understand backend languages - JavaScript, PHP, Python, Ruby on Rails, Node.js
- Check out content management systems - WordPress, Drupal, Joomla
- Learn a web development framework - React, Vue.js, Angular, Ember.js
The world of web design is wide open. Enjoy the journey!
If you're looking for an easy way to build a professional website without coding, be sure to check out Unicorn Platform. Their intuitive drag and drop editor makes it simple to create a beautiful site tailored to your startup or SaaS business.
