Stage 4 of 5

Modern Interfaces

Apply your skills in complete interfaces and learn component and tooling basics.

Before you startBe able to change page content and handle button clicks using JavaScript.

GoalYou can turn a design into a responsive interface and use Git to publish it.

PracticeOrganise your personal website into clear sections with navigation and a light/dark switch. Learn from course examples, then apply the ideas to your own website.

What to focus on in the course

You can turn a design into a responsive interface and use Git to publish it.

This page organises your learning and project; the course below supplies the detailed teaching. Use the task as your guide when choosing which lessons to study.

Teaching material for this stage

Choose a course, then apply it to your project

Focus on the topics needed for the stage task. Practise during the course; completing every video is not the readiness check.

Elzero Web SchoolFree

Frontend developer path

Resource language: Arabic
Level: Intermediate
Format: Learning path and practical work
Practice: Layouts and small applications

Learners who want to move from lessons to practical website projects.

Recommendation details

Elzero Web SchoolFree

Build a website and its features with JavaScript

Resource language: Arabic
Level: Intermediate
Format: Guided project
Practice: Complete website project

Learners who want a project combining the DOM, local storage, and design.

Recommendation details

MaharaTechFree

Frontend developer career path

Resource language: Arabic
Level: Intermediate
Format: Career learning path
Practice: Topics covering several skills

Learners who want a broader view of the skills used by frontend developers.

Recommendation details

Build it yourself

Organise your personal website into clear sections with navigation and a light/dark switch. Learn from course examples, then apply the ideas to your own website.

Start with the smallest working part. Test it, then add one requirement at a time. Keep your project for the next stage.

If you get stuck

Save your work and repeat the smallest step that shows the problem. Compare what you expected with what happened. Read the error message, check the last change, and use a resource above to revisit that idea.

Ready for the next step?

You can turn a design into a responsive interface and use Git to publish it. I can complete the stage task and explain the main parts without copying the whole solution. I have tested my project and can make a small change myself.

If a point is still difficult, practise it again before continuing.

Next: Portfolio Project