Create your own website with HTML and CSS
This challenge has been written by Marko Šolić and is part of the EU CODE WEEK CHALLENGES.
Purpose of the challenge
- The purpose of this challenge is to introduce beginners to the world of web development.
- By completing this project, participants will learn the basics of HTML and CSS, which are fundamental for creating and styling web pages.
- The challenge emphasizes hands-on learning, helping you build your own website from scratch.
- You'll gain essential skills for web design and become more confident in building your own online presence.
Duration
This challenge is expected to take about 1 to 2 hours, depending on your experience level and how much you explore beyond the basics.
Experience
This is a beginner-level challenge. While some prior knowledge of basic computer operations, such as using a text editor, may be helpful, it is not necessary. • The challenge is designed to be an introduction to HTML and CSS.
Target audience
- This challenge is aimed at beginners who are interested in learning how to create websites.
- It is perfect for individuals who are new to web development, students, or anyone curious about how websites are built.
- No prior coding experience is required.
Recommended tools:
- PC / Laptop
- Regular text editor, such as Notepad (Windows) or TextEdit (Mac)
Create your own website with HTML and CSS
This challenge is aimed at beginners who are interested in learning how to create websites.
It is perfect for individuals who are new to web development, students, or anyone curious about how websites are built.
No prior coding experience is required.
Description of the challenge
Websites are the foundation of Internet presence. Through this lesson, you will learn how to use HTML to structure content and CSS to stylize and create your first website.
Through fun steps, you'll create a page that can contain text, images, colors, and links.
Instructions
If you are new to web development, don’t worry! Here are some tips to help you guide students through the process:
Start with the basics: Focus on explaining the core concepts of HTML (structure of a webpage) and CSS (styling elements).
Be patient and allow students time to understand the purpose of each tag and property.
Explain the structure: When introducing HTML tags, visually break down how the document is structured.
Show students the relationship between opening and closing tags, attributes, and nesting.
Avoid common mistakes: Beginners often forget to close tags properly or misplace curly brackets {} in CSS.
Remind students to check for syntax errors regularly.
Interactive learning: Encourage students to experiment with changing text and styles.
Show them how small changes in HTML or CSS can immediately reflect on the page by refreshing the browser.
Be open to creativity: There’s no one "right" way to design a website.
Encourage students to explore different fonts, colors, and layouts.
Common mistakes to watch out for:- Forgetting to link the CSS file to the HTML file.
- Incorrect tag nesting in HTML.
- Typos in CSS properties (e.g., using colour instead of color in some cases).
- Overcomplicating the page structure – simple websites can look very professional with just a few lines of code!
To create a website, you do not need to install special tools other than a regular text editor, such as Notepad (Windows) or TextEdit (Mac).
The whole website can be made in a plain text editor, and there are even websites on the Internet that are completely made that way.
If you want to see an example of such a site, look at the web site of the Croatian Association of Informatics: hsin.hr
Open a new document in your editor and save it as index.html
Depending on the version of Windows or Macs you're using for this, you'll first need to find an option that allows you to modify file extensions, because your index.txt needs to become index.html
In an editor such as Notepad, enter the basic structure of the HTML document:
<!DOCTYPE html> <html lang="en"> <head> <target charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My first website</title> </head> <body> <h1>Welcome to my website!</h1> <p>This is my first website I created using HTML and CSS.</p> </body> </html>
This is what your website should look like without CSS (in Croatian, your example is of course in English):
CSS is used to stylise elements on the page. To get started, we'll add basic styles like background colour, text colour, and font size.
In the same folder, create a new text document and call it style.css.
In style.css, type the following:
body {
background-colour: #f0f8ff; /* Light blue background */
colour: #333; /* Dark Gray Text */
font-family: Arial, sans-serif; /* Font for text */
text-align: centre; /* Align text to centre */
}
h1 {
colour: #4CAF50; /* Green title */
}
p {
font-size: 18px; /* Paragraph font size */
colour: #555; /* Gray-blue text for paragraph */
}
Once you have created the CSS file, you must link it to the HTML file.
You'll do this in the <head> section of the HTML by adding the following line of code:
<link rel="stylesheet" href="style.css">
This will let the HTML document "know" that it needs to use styles from the CSS file.
Save both files: index.html and style.css.
Double-click index.html and open it in your Internet browser.
Now you'll see your website with text in the middle and the basic styles you've added
This is what your website should look like now:
Web development is for everyone! Whether you are a young student, an adult looking for a new career, or someone from an underrepresented group, this challenge invites you to explore the exciting world of creating websites.
STEM (Science, Technology, Engineering, and Mathematics) fields have historically lacked diversity, and it’s important to encourage all people—regardless of gender, race, or background—to explore coding and technology.
Everyone has unique perspectives and experiences that can make the world of web development more creative and inclusive.
As you work on your website, think about how you can make the digital world a place where everyone feels represented and welcome.
You don’t have to be a tech expert to begin—just start learning and build from there!
When building a website, it's important to ensure that it can be easily accessed by as many people as possible, including those with disabilities.
Here are some tips for creating more accessible websites:
- Contrast: Ensure good contrast between the background and text color so that it’s easier for people with visual impairments to read. For example, a light background with dark text works best.
- Alt Text for Images: If you add images to your website (in future steps), make sure to add alt text to describe what’s in the image. This is especially helpful for people using screen readers.
- Semantic HTML: Use correct HTML tags for better structure and accessibility. For example, use <h1> for the main title, and <p> for paragraphs to help screen readers understand the content better.
- Focus on Readability: Make sure the text is easy to read with a simple, sans-serif font like Arial. You can also increase the font size for readability.
1. What is HTML?
- Computer language for image creation
- Content structuring language on the website
- Image Editor
2. What is CSS?
- Language for creating online databases
- Language for styling and layout of websites
- Computer file management program
3. How do we connect CSS to HTML?
- By using the <link> tag in the HTML document
- Using <style> tags within a HTML
- Unable to connect
Correct answers: 1.b, 2.b, 3.a
Modify your page:- Try changing the background color.
- Add another heading (h2) with text below the main title.
- Add a link to another website, e.g. Google.
- After any change – refresh the page!
Share the link to your work in your Instagram Bio: tap the Edit Profile button on your Instagram and add the link to your work in the Website field. After that, create a new post, add a screenshot of your work, write “Link in Bio”, add the hashtag #EUCodeWeekChallenge and mention @CodeWeekEU.
Download this challenge as a word document