Scribd
Upload
4 views

1st_week_html_css_learning_plan

Uploaded by

nurullahbastekin271
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

1st_week_html_css_learning_plan

Uploaded by

nurullahbastekin271
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

1st Week HTML & CSS Learning Plan

This is the learning plan for the first week of HTML and CSS to help you get started with web
development. The plan includes daily topics and exercises for each day.

Day 1: Introduction to HTML and Basic Structure


Goal: Learn the basic structure of an HTML document.

Topics to Cover:
- Understanding the <html>, <head>, and <body> tags.
- Creating the basic skeleton of a webpage: <html>, <head>, <title>, <body>.
- Learn the purpose of different elements (metadata, body content, etc.).

Practice: Create a simple HTML file with the basic structure and add a title to the page.

Resources: [MDN Web Docs: HTML


Basics](https://developer.mozilla.org/en-US/docs/Web/HTML)

Day 2: HTML Text Elements


Goal: Understand and use text formatting tags in HTML.

Topics to Cover:
- Headings: <h1> to <h6>
- Paragraphs: <p>
- Text styling: <b>, <i>, <strong>, <em>.
- Line breaks: <br>, <hr>.

Practice: Write a short introductory paragraph using various text formatting elements.

Resources: [MDN Web Docs: HTML Text Fundamentals](https://developer.mozilla.org/en-


US/docs/Web/HTML/Elements)

Day 3: HTML Lists and Links


Goal: Learn to create lists and add hyperlinks.

Topics to Cover:
- Ordered and unordered lists: <ul>, <ol>, and <li>.
- Links: <a> tag with the href attribute.
- Learn how to link to internal and external webpages.

Practice: Create a list of favorite websites and link to them using the <a> tag.
Resources: [MDN Web Docs: HTML Links and
Lists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)

Day 4: HTML Images and Multimedia


Goal: Learn how to include images and multimedia in a webpage.

Topics to Cover:
- Images: <img> tag with the src and alt attributes.
- Embedding videos and audio using <video> and <audio> tags.

Practice: Add an image and a video to your webpage.

Resources: [MDN Web Docs: HTML


Images](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)

Day 5: Introduction to CSS


Goal: Start styling HTML elements with CSS.

Topics to Cover:
- Inline, internal, and external CSS styles.
- Selectors: element, class, and id selectors.
- Basic properties: color, background-color, font-size.

Practice: Style a simple webpage with background color, font size, and color changes.

Resources: [MDN Web Docs: CSS


Basics](https://developer.mozilla.org/en-US/docs/Web/CSS)

Day 6: CSS Layout - Box Model


Goal: Understand the box model and how it affects the layout.

Topics to Cover:
- The box model: content, padding, border, margin.
- Use width, height, padding, border, margin properties to manipulate box sizes.

Practice: Create a simple layout with padding, border, and margins applied to different
elements.

Resources: [MDN Web Docs: CSS Box


Model](https://developer.mozilla.org/en-US/docs/Web/CSS/box-model)

Day 7: CSS Positioning and Layouts


Goal: Learn basic CSS positioning to arrange elements on the page.
Topics to Cover:
- Positioning types: static, relative, absolute, fixed.
- Floats: Left and right floats to position elements.

Practice: Create a page with elements positioned using absolute, relative, and float.

Resources: [MDN Web Docs: CSS


Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position)

You might also like