←ਸਾਰੀਆਂ ਮੰਜਿਲਾਂ

Raahaao Code: HTML & CSS

Build and style real web pages, from your first tag to a published site.

9+ ਪਾਠ ਦੇ ਘੰਟੇ · 2 ਪ੍ਰੋਜੈਕਟ · €35

ਇਹਨਾਂ ਪ੍ਰੀਖਿਆਵਾਂ ਦੀ ਤਿਆਰੀ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ: IT Specialist – HTML and CSS (Certiport)

ਜਾਂ ਇਸਨੂੰ ਮਹੀਨਾਵਾਰ ਪਲਾਨ ਵਿੱਚ ਲਓ, €3.46 ਪ੍ਰਤੀ ਹਫ਼ਤੇ ਤੋਂ (ਬਿੱਲ ਹਰ ਮਹੀਨੇ €15) →

ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਲੌਗ ਇਨ ਕਰੋ

ਕੋਈ ਵੀ ਪਾਠ ਖੋਲ੍ਹਣ ਲਈ ਖਾਤਾ ਚਾਹੀਦਾ ਹੈ। ਖਾਤੇ ਬਿਨਾਂ ਤੁਸੀਂ ਮੰਜ਼ਿਲਾਂ ਅਤੇ ਕੀਮਤਾਂ ਵੇਖ ਸਕਦੇ ਹੋ।

ਭੁਗਤਾਨ ਕਰੋ

ਤੁਸੀਂ ਸਿੱਖੋਗੇ, ਮੰਜਿਲ ਦਰ ਮੰਜਿਲ

  1. 1

    First page (Beginner)

    • How a web page works
    • Text, headings and links
    • Images, lists and tables
  2. 2

    Structure (Beginner)

    • Forms that work
    • Semantic layout
    • Accessibility basics
  3. 3

    Style (Intermediate)

    • Selectors and the cascade
    • The box model and spacing
    • Colour, type and contrast
  4. 4

    Layout (Intermediate)

    • Flexbox
    • Grid
    • Responsive design
  5. 5

    Pro (Job-ready)

    • Design tokens and dark mode
    • Animation and motion
    • SEO, meta tags and sharing
    • Performance and publishing

ਛੱਤ ਉੱਤੇ ਦੋ ਪ੍ਰੋਜੈਕਟ

Portfolio site

Build a small personal portfolio site: a header with navigation, an about section, a grid of project cards and a contact form. You will use proper landmark elements, labelled form fields and CSS custom properties, and make the cards reflow from one column on a phone to a multi-column grid on wider screens.

  • A header with a nav that links to #about, #projects and #contact.
  • Uses header, nav, main and footer landmarks, with exactly one h1.
  • A projects section with at least 3 article cards, each with an h3 and an image that has alt text.
  • A contact form where every input has a matching label, with a required email field of type email.
  • Colours and spacing come from CSS custom properties defined on :root.
  • The cards sit in one column on narrow screens and in a multi-column grid at 700px and wider.
  • Links and buttons have a visible :focus-visible style.
  • The page has a title and a meta description.

Product landing page

Build a landing page for a made-up smart water bottle called Ripple. It needs a hero with a call-to-action, a grid of features, three pricing plans and an FAQ built from details and summary.

  • A hero section with an h1, a short tagline and a call-to-action link styled as a button.
  • A features section laid out with CSS grid, holding at least 3 feature items.
  • A pricing section with 3 plans, each showing a price.
  • An FAQ with at least 3 questions using details and summary.
  • Dark mode follows prefers-color-scheme and can be toggled with a button that sets data-theme on the html element.
  • Animations are turned off under prefers-reduced-motion.
  • Body text colour has a contrast of at least 4.5:1 against the background.
  • Open Graph title and description tags are present.

ਸਵਾਲ

ਮੈਨੂੰ ਕੁਝ ਇੰਸਟਾਲ ਕਰਨਾ ਪਵੇਗਾ?

ਨਹੀਂ। ਸਭ ਕੁਝ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚਲਦਾ ਹੈ। ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਤੁਸੀਂ ਆਪਣੇ ਕੰਪਿਊਟਰ ਉੱਤੇ ਵੀ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੀਆਂ ਫਾਈਲਾਂ ਅੱਪਲੋਡ ਕਰ ਸਕਦੇ ਹੋ।

ਕੀ ਮੈਂ ਉਹ ਨੱਕ ਸਕਦਾ ਹਾਂ ਜੋ ਮੈਂ ਪਹਿਲਾਂ ਸੇ ਜਾਣਦਾ ਹਾਂ?

ਹਾਂ। ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਮੰਜਿਲ ਦੇ ਮਾਲਕ ਬਣ ਜਾਉ, ਹਰੇਕ ਮੰਡਲੀ ਦੀ ਇੱਕ ਪਰੀਖਿਆ ਹੈ: 10 ਵਿੱਚੋਂ 8 ਸਕੋਰ ਕਰੋ ਅਤੇ ਉਹ ਮੰਜਿਲ ਖੁੱਲ ਜਾਂਦੀ ਹੈ।

ਵਾਪਸੀ ਨੀਤੀ ਕੀ ਹੈ?

ਖਰੀਦ ਦੇ 5 ਦਿਨਾਂ ਅੰਦਰ ਵਾਪਸੀ। 5 ਦਿਨਾਂ ਦੇ ਬਾਅਦ, ਕੋਈ ਵਾਪਸੀ ਜਾਂ ਵਾਪਸ ਨਹੀਂ।

ਕੀ ਮੈਂ ਪਹੁੰਚ ਰੱਖਦਾ ਹਾਂ?

ਹਾਂ। ਜੋ ਮੰਜਿਲ ਤੁਸੀਂ ਖਰੀਦਦੇ ਹੋ ਉਹ ਤੁਹਾਡੀ ਹੈ, ਕੋਈ ਸਦਸਤਾ ਨਹੀਂ ਹੈ।

Refund policy

ਮੰਜਿਲਾਂ

JavaScript · Python · SQL · C++ · Node.js · ਡਾਟਾ ਲਈ ਪਾਇਥਨ · Flask · Logic & Problem Solving · Algorithms & Data Structures · Java · Machine Learning · Building with AI