{"id":137218,"date":"2024-10-14T17:01:17","date_gmt":"2024-10-14T11:31:17","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137218"},"modified":"2024-10-17T11:29:35","modified_gmt":"2024-10-17T05:59:35","slug":"integrating-our-knowledge-so-far-custom-properties-and-css-functions","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/integrating-our-knowledge-so-far-custom-properties-and-css-functions\/","title":{"rendered":"Integrating Our Knowledge So Far | Custom Properties and CSS Functions"},"content":{"rendered":"\n

Building a Responsive Website<\/strong><\/p>\n\n\n\n

Let’s combine the concepts and techniques we’ve learned to create a responsive website.<\/p>\n\n\n\n

HTML Structure<\/strong><\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<!DOCTYPE html><\/p>\n\n\n\n

<html><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

  <title>Responsive Website<\/title><\/p>\n\n\n\n

  <link rel=”stylesheet” href=”styles.css”><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<body><\/p>\n\n\n\n

  <header><\/p>\n\n\n\n

    <h1>My Website<\/h1><\/p>\n\n\n\n

  <\/header><\/p>\n\n\n\n

  <main><\/p>\n\n\n\n

    <section class=”hero”><\/p>\n\n\n\n

      <h2>Welcome<\/h2><\/p>\n\n\n\n

      <p>This is a responsive website.<\/p><\/p>\n\n\n\n

      <img src=”image.jpg” alt=”Image”><\/p>\n\n\n\n

    <\/section><\/p>\n\n\n\n

    <section class=”content”><\/p>\n\n\n\n

      <\/section><\/p>\n\n\n\n

  <\/main><\/p>\n\n\n\n

  <footer><\/p>\n\n\n\n

    &copy; 2023 My Website<\/p>\n\n\n\n

  <\/footer><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

CSS Styling<\/strong><\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

body {<\/p>\n\n\n\n

  font-family: Arial, sans-serif;<\/p>\n\n\n\n

  margin: 0;<\/p>\n\n\n\n

  padding: 0;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

header {<\/p>\n\n\n\n

  background-color: #f0f0f0;<\/p>\n\n\n\n

  padding: 20px;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

main {<\/p>\n\n\n\n

  max-width: 960px;<\/p>\n\n\n\n

  margin: 0 auto;<\/p>\n\n\n\n

  padding: 20px;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.hero {<\/p>\n\n\n\n

  text-align: center;<\/p>\n\n\n\n

  padding: 40px;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.hero img {<\/p>\n\n\n\n

  max-width: 100%;<\/p>\n\n\n\n

  height: auto;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

@media only screen and (max-width: 768px) {<\/p>\n\n\n\n

  .hero {<\/p>\n\n\n\n

    padding: 20px;<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Key Concepts<\/strong><\/p>\n\n\n\n