Looking forward to creating your website? You need a web page to start a blog, an online store, or even create your company homepage. When your mission is either of them, two building blocks help in the process. These include HTML (HyperText Markup Language) and CSS (Cascading Style Sheets).
Follow this guide to discover the basics of creating your website. Start from scratch, and by the end, you will have a simple but functional web page ready! After this, you will be able to get the hang of HTML and CSS and will be eligible for an HTML and CSS Full Course.
What are HTML and CSS?
HTML stands for HyperText Markup Language. One can think of HTML as the skeleton of the website. This is because it tells the browser what each part of the web page consists of. This can range from headings and paragraphs to images and links.
Some basic examples would be:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
CSS, or Cascading Style Sheets, adds style to your webpage. It includes colour, fonts, spacing, and layouts. CSS helps control how everything looks on your website.
A basic example:
h1 {
colour: blue;
font-family: Arial;
}
Adding both HTML and CSS forms the front-end of your website in the making. Mastering them is the first step in becoming a web developer or designer.
Setting Up Your Environment
Before you start writing the necessary HTML and CSS code, you need some basic tools like:
- Text Editor: Use a free editor like Visual Studio Code or Sublime Text to write your code.
- Web Browser: Google Chrome is perfect for viewing and testing your webpage.
- Optional Online Editors: You can use platforms like CodePen or JSFiddle if you don’t want to install anything.
Now, create a folder on your desktop entitled ‘my-first-website’, and inside it, create a file named ‘index.html.’
Writing Your First HTML Page
Start by opening your ‘index.html’ file and paste the following code there:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage using HTML and CSS!</p>
<a href=”https://www.google.com”>Visit Google</a><br>
<img src=”https://via.placeholder.com/150″ alt=”Placeholder Image”>
</body>
</html>
(Note: This example uses the standard HTML5 document structure.)
Explanation:
- <!DOCTYPE html>: Declares the document type. It informs the browser about the version of HTML the page is written in
- <html>: The root element.
- <head>: Contains metadata and the page title.
- <body>: Holds visible content like text, images, and links.
- <h1>: Main heading.
- <p>: Paragraph text.
- <a>: Hyperlink.
- <img>: Image with a source URL and alternative text.
Upon entering your first code, save the file and open it in your browser. This way, you will be able to see your first web page!
Styling with CSS
After creating your first web page from scratch, it is time for you to make it look stylish. Add some basic CSS and make it look better. You must add the CSS directly inside your HTML using the <style> tag.
Update your HTML file like this:
<head>
<title>My First Website</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
text-align: centre;
}
h1 {
color: #3366cc;
}
p {
color: #333;
font-size: 18px;
}
a {
color: #cc0000;
text-decoration: none;
}
</style>
</head>
Explanation:
- ‘body’ styles the entire page: background colour, font, and alignment.
- ‘h ‘, ‘p’, and ‘a’ are styled individually.
- CSS follows a pattern: selector { property: value; }
Putting it Together: Your First Web Page
Congratulations! You have successfully learnt how to curate a working HTML page with some CSS styling. Given below is a starting idea for your website, a mini project, you might say:
<body>
<h1>Hi, I’m Alex!</h1>
<p>Welcome to my first website. I love coding, coffee, and cats.</p>
<img src=”https://via.placeholder.com/150″ alt=”My Photo”>
<p>Follow me on <a href=”https://twitter.com/”>Twitter</a></p>
</body>
This layout introduces basic elements you can reuse in personal projects. Don’t worry about making it perfect. What matters is that you are learning how HTML and CSS work together.
Things to Keep in Mind While Using HTML and CSS
Here is a list of things one must keep in mind while using HTML and CSS as a beginner. These tips will help you write cleaner code, avoid mistakes, and learn better:
- Always Use Proper Structure: Start with <!DOCTYPE html> to define the document type. Use the standard structure: <html>, <head>, and <body>. Nest elements properly. Do not leave tags unclosed or improperly nested.
- Write Clean Code: Use indentation and spacing for readability. Consistent formatting helps you and others understand the code quickly.
- Avoid Inline CSS: While learning, you might start with inline styles. But, try to move to internal or external CSS as soon as possible. This keeps your HTML and styling separate and easier to manage.
- Test Your Pages In Multiple Browsers: Your website might look different in Chrome, Firefox, or Safari. Always preview and test your work across browsers to ensure compatibility.
Excel Web Development With Moople Academy
Moople Academy offers a 15-month comprehensive website development course using HTML and CSS. With us, it is not just about learning the basics. We train you to build professional, responsive websites from the ground up. Here is how we can help you in your journey:
- Program Diversification: Our courses cover everything from foundational HTML and CSS to advanced layout techniques and responsive design. That’s not all. We also introduce JavaScript essentials and UI/UX principles.
- Practical Training: Hands-on experience is always better than theoretical lectures. And no one understands it better than us. Our courses are designed to offer practical experiences while building real-world web projects.
- Industrial Connections: We help our students connect with the best industries. There are hands-on sessions and internships arranged for them.
Conclusion
Congratulations! You have just created your first webpage using HTML and CSS. These foundational skills are the building blocks of everything you see on the internet. As you continue practising, you will quickly gain confidence and begin building more complex websites.
Remember, every great developer started with a single line of HTML. Stay curious, keep experimenting, and never stop building. Your journey has just begun!
FAQs
Q. Should I be familiar with coding to learn HTML and CSS?
No. HTML and CSS are beginner-friendly and intuitive, so prior coding experience is not necessary.
Q. Can I build a complete website with just HTML and CSS?
Yes. You can easily build a fully functional ‘static’ website using HTML and CSS.
Q. How long does it take to Learn HTML and CSS?
You can learn the basics of HTML and CSS in a few days. With proper practice, you can build websites in just a few weeks.