Lessons·teens · beginner
HTML & CSS: Build Your First Web Page
Learn HTML structure and CSS styling by building a real web page from scratch. All instructions in English with Turkish vocabulary support.
About 30 minutes
Key Coding Terms
Before we start coding, learn these important words. You'll see them in every web development tutorial.
| English | Türkçe |
|---|---|
| tagAn HTML tag tells the browser what to display. | etiketBir HTML etiketi, tarayıcıya ekranda ne göstereceğini söyler. |
| elementA paragraph element holds text on the page. | öğeBir paragraf elemanı, sayfadaki metni tutar. |
| attributeThe src attribute tells the image where to load from. | özelliksrc özniteliği, görselin nereden yükleneceğini söyler. |
| headingUse a heading to title each section. | başlıkHer bölüme ad vermek için bir başlık kullan. |
| paragraphWrap your text in a paragraph tag. | paragrafMetnini bir paragraf etiketinin içine al. |
| styleCSS styles control how elements look. | stilCSS stilleri, elemanların nasıl görüneceğini kontrol eder. |
| propertycolor is a CSS property. | özellikcolor bir CSS özelliğidir. |
| valueThe value 'red' makes text red. | değer'red' değeri metni kırmızı yapar. |
| selectorA CSS selector picks which element to style. | seçiciBir CSS seçicisi, hangi elemana stil verileceğini seçer. |
| classA class lets you reuse the same style. | sınıfBir sınıf, aynı stili tekrar kullanmanı sağlar. |
What is HTML?
HTML stands for HyperText Markup Language. It is the skeleton of every website.
HTML uses tags to tell the browser what to show. Tags come in pairs:
<h1>This is a heading</h1>
<p>This is a paragraph</p>
The opening tag <h1> starts the element. The closing tag </h1> ends it.
Common HTML tags:
• <h1> to <h6> — headings (h1 is the biggest)
• <p> — paragraph of text
• <a> — a link to another page
• <img> — an image
• <div> — a container to group elements
• <ul> / <li> — a bullet list
Challenge 1: Create a Page Structure
Challenge 2: Links and Lists
What is CSS?
CSS stands for Cascading Style Sheets. If HTML is the skeleton, CSS is the clothing.
CSS controls how things look: colours, sizes, fonts, spacing, layout.
CSS has a simple pattern:
selector {
property: value;
}
For example:
h1 {
color: blue;
font-size: 32px;
}
This says: "Find every <h1> and make it blue, 32 pixels big."
CSS goes inside a <style> tag in the <head> of your HTML, or in a separate .css file.
Challenge 3: Style Your Page
Challenge 4: CSS Classes and Layout
Knowledge Check: HTML & CSS
Now actually practise it
Reading a lesson is the easy half. A free account unlocks the parts that make it stick — listen to every word in a British accent, and use it in a live conversation with James. Your progress is saved and the words come back for review before you forget them.