Welcome to this beginner's guide on building a personal website from scratch using HTML and CSS! 👋 Whether you want to create a simple portfolio site, blog, or online resume, having your own website is a great way to showcase your interests, share your work, and establish an online presence. The good news is you don't need any prior coding experience to follow along - just a text editor and web browser.
By the end of this post, you'll have the foundations to create and publish a basic personal website using fundamental HTML tags for content and structure paired with CSS for styling and layout. Let's dive in!
Getting Started with HTML
HTML, or HyperText Markup Language, is the backbone of web pages. It's used to structure and organize content like text, images, videos, and more for display in a web browser.
Some common HTML tags you'll become familiar with include:
- `` - The parent tag that contains the whole document - `` - Holds metadata like title and links to CSS - `` - Contains visible page content - `
` to `
` - Headline tags for different levels
- `
` - Paragraph blocks of text - `` - Anchor tags for hyperlinks - `` - Adds images
With these basic building blocks, you can create a simple HTML page for your personal website:
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page!</p>
</body>
</html>
Proper indentation makes the code much easier to read! Let's look at some key concepts in more detail.
Key HTML Tags
Some essential HTML tags include:
- `
` to `
` tags create headings. `
` is the largest and `
` is the smallest.
- `
` tags contain paragraphs of text. - `` anchor tags create hyperlinks using the `href` attribute. - `` tags add images with the `src` attribute pointing to the file. - `` and `` emphasize text as bold or italic.
Try adding some of these tags to your personal site:
<h1>Welcome to My Site</h1>
<p>This is my <strong>first paragraph</strong> on my new page!</p>
<p>Click [here](about.html) to read more <em>about me</em>.</p>
<img src="photo.jpg" alt="Picture of me">
Page Structure
All HTML pages share a common structure:
- `` is the parent tag wrapping the full document. - `` contains metadata like the page ``.</x-turndown> - `` holds the visible page content.
Proper indentation of two or more spaces per level makes the code neater and more readable. Add the basic page structure to your HTML file now!
Styling with CSS
Now that you have HTML for content and structure, it's time to add styling with CSS!
CSS stands for Cascading Style Sheets. It's used to control the appearance of HTML elements like size, color, layout, and more.
Some common CSS properties include:
color- Sets text colorbackground- Defines background colorfont-family- Specifies font typewidth- Sets an element's widthtext-align- Aligns text left/right/center
There are a few ways to add CSS:
- Inline CSS applies to a single element via a
styleattribute - **Internal** CSS sits inside the HTML file in a `` tag </x-turndown> - External CSS lives in a separate .css file that is linked to
Let's look at CSS selectors and rules to build up some style for your site.
CSS Selectors
CSS selectors target HTML elements to apply styling. Some examples:
- Type selector - `p {}` targets `
` tags
- ID selector -
#unique {}matches an element with that ID - Class selector -
.box {}selects elements with that class - Descendant - `div p {}` styles `
` inside `
`
Try selecting elements on your page:
/* All h1 tags */
h1 {
color: blue;
}
/* Element with id "intro" */
#intro {
font-size: 20px;
}
/* Elements with class "highlight" */
.highlight {
background: yellow;
}
Applying CSS Rules
Once you've targeted elements, you can style them inside curly braces:
h1 {
color: red;
font-size: 36px;
text-align: center;
}
Some key points:
- Declarations go inside curly braces
- Properties and values are separated by a colon
- End each declaration with a semicolon
- Multiple declarations are separated by a semicolon
Try setting colors, fonts, sizes, margins, and more!
Basic Page Layout
With HTML and CSS basics down, let's look at organizing content on the page.
Some key layout properties and tools:
widthandmax-widthcontrol element sizesmarginandpaddingadd spacingdisplay: block;vsinlinechanges flow- Floats position elements side-by-side
- Flexbox and Grid arrange boxes in rows or columns
Responsive design with CSS media queries adapts your site for mobile devices by using breakpoints. For example, you can have columns on desktop but stack content vertically on mobile screens under 600px.
For your page, try structuring it with:
- A header with your name and logo
- A content section with columns for text, images, videos
- A footer with links, contact info
Think about where each element should go and how to size, align, and space them out properly.
Hosting and Publishing
To share your finished website with the world, you'll need web hosting. Here are a few options:
- Shared hosting like Bluehost offers simple, low-cost plans to get started.
- Virtual Private Servers (VPS) like DigitalOcean give more control for higher traffic sites.
- Website builders like Unicorn Platform provide easy website building, hosting, and custom domains all-in-one.
Once you have hosting, get a domain name and point it to your account. Upload your site files via FTP or cPanel.
Configure the DNS settings to direct traffic to your host. And then you can share your live website!
Conclusion
Congratulations, you've now got the foundation to build your own personal HTML and CSS website from scratch! ✨
In this guide you learned:
- HTML tags for structuring content
- Using CSS for styling and layout
- Organizing page elements and making designs responsive
- Finding web hosting and publishing your site
With these core skills, you can expand your website by adding more pages, new features like forms or galleries, tweaking the design, and integrating tools like Unicorn Platform for easy website building and blog integration.
The possibilities are endless! Keep learning, improve your skills, and most importantly - have fun building your own space on the web. Feel free to reach out and share your website for feedback and ideas on how to further enhance it!
