# data[].attributes.headline
Abgleich mit der Checkliste (Kriterien einer guten Webseite) und mit den Kundenvorgaben

# data[].attributes.subject
Abgleich mit der Checkliste (Kriterien einer guten Webseite) und mit den Kundenvorgaben

# data[].attributes.body
Wir analysieren den Kundenauftrag und erstellen ein Rebriefing.

# data[].attributes.body
Die einzelnen Arbeitsphasen werden strukturiert und erstellt.

# data[].attributes.body
Die Schüler können selbstständig eine Webseite konzipieren, gestalten und mit HTML/CSS umsetzen.

# data[].attributes.body
• HTML-Grundstruktur verstehen und anwenden
• CSS für das Layout einsetzen
• Responsive Design-Prinzipien beachten
• Benutzerfreundlichkeit berücksichtigen
• Kriterien für ein gutes Webdesign kennenlernen und anwenden

# data[].attributes.body
Was macht eine gelungene Webseite aus? Wir lernen die Kriterien gelungenen Webdesigns kennen.

# data[].attributes.body
Welche Kriterien für eine gute Webseite haben wir kennengelernt? Eine Checkliste für die Webseitenerstellung erstellen wir gemeinsam.

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Umsetzung der Webseite durch das Mockup (Abgabe der Webseite am 12.03.2025 Ende der 7. Stunde) 

# data[].attributes.subject
Umsetzung der Webseite durch das Mockup (Abgabe der Webseite am 12.03.2025 Ende der 7. Stunde) 

# data[].attributes.body
Erstellung einer responsiven Webseite nach vorgegebenen Kundenkriterien.

Die Umsetzung des Mockups geschieht per HTML- und CSS-Sprache über das Programm Dreamweaver oder Visual Studio.

# data[].attributes.headline
Planung eines Wireframes (Abgabe am 18.12. Ende der 7. Stunde)

# data[].attributes.subject
Planung eines Wireframes (Abgabe am 18.12. Ende der 7. Stunde)

# data[].attributes.body
Was ist ein Wireframe?

Wofür brauche ich einen Wireframe?

Erstellt jeweils drei Wireframes für die Webseite des Architekturbüros. Nutzt hierfür das Programm Figma oder Sketch.

# data[].attributes.body
Was waren die größten Herausforderungen bei der Webseitengestaltung?

# data[].attributes.body
Präsentation der Wireframes in Padlet mit Feedback von Mitschülern.

# data[].attributes.body
Gab es große Abweichungen vom anfangs erstellten Arbeitsplan?

# data[].attributes.body
Recherchieren Sie aktuelle Webdesign-Trends und erstellen Sie eine kurze Präsentation hierüber.

# data[].attributes.body
Präsentation der Wireframes

Peer-Feedback

Kundenfeedback

Entscheidung für einen Wireframe für die Umsetzung des Mockups

# data[].attributes.body
Mobile-First Ansatz und Media Queries in der Praxis.

# data[].attributes.attachment_link.title
Responsive Webdesign: Tutorial für Anfänger! #01 (4K) | SIFA Digital

# data[].attributes.headline
Mockup erstellen (Desktop, Tablet, Handy) über InDesign (Abgabe des Mockups am 15.1. Ende der 7. Stunde)

# data[].attributes.subject
Mockup erstellen (Desktop, Tablet, Handy) über InDesign (Abgabe des Mockups am 15.1. Ende der 7. Stunde)

# data[].attributes.body
Was ist ein Mockup?

Wofür brauchen wir ein Mockup?

# data[].attributes.body
Suche dir im Internet eine gelungene Webseite (Positivbeispiel) heraus. Verfasse eine schriftliche Begründung für das Beispiel, weshalb es gelungen ist.

# data[].attributes.body
Praktische Übung: Styling einer vorgegebenen HTML-Struktur mit CSS.

# data[].attributes.attachment_link.readable_text
CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

Start learning CSS now "

Examples in Each Chapter

This CSS tutorial contains hundreds of CSS examples.

With our online editor, you can edit the CSS, and click on a button to view the result.

CSS Example

body {
background-color: lightblue;
}

Try it Yourself "
Click on the "Try it Yourself" button to see how it works.
CSS Examples

Learn from over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.
Go to CSS Examples!
Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign ☰.

CSS Templates

We have created some responsive W3.CSS templates for you to use.

You are free to modify, save, share, and use them in all your projects.
Free CSS Templates!
CSS Exercises

CSS Quiz

Test your CSS skills with a quiz.
Start CSS Quiz!
My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

CSS References

At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.

Kickstart your career

Get certified by completing the course

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.body
Suche dir im Internet eine weniger gelungene Webseite (Negativbeispiel) heraus. Verfasse eine schriftliche Begründung für das Beispiel, weshalb es nicht gut gelungen ist.

# data[].attributes.body
Absolvieren Sie mindestens 3 Übungen auf FreeCodeCamp.

# data[].attributes.attachment_link.title
Learn HTML and CSS with this free 11 hour course

# data[].attributes.attachment_link.description
HTML and CSS are essential skills to have for a career in web development. This eleven hour course from John Smilga of Coding Addict will teach HTML and CSS from the scratch. By the end of this course you will be creating your own projects. HTML is a…

# data[].attributes.body
Einführung in HTML-Struktur und wichtige Tags.

# data[].attributes.attachment_link.title
HTML Grundlagen für absolute Anfänger - Learn by Doing Kurs - Deutsch

# data[].attributes.body
Vollständige Handlung

HTML-Grundstruktur

8 Kriterien guten Webdesigns

Wireframe, Mockup und Prototyp

Breadcrumb

Typografie im Web

Farbkreis nach Itten

Kalte und warme Farben

Farbwirkung

Primär-, Sekundär- und Tertiärfarben

Farbkontraste