Finish School Help Desk

Monday, 13 January 2025

3. Sass Concepts

A simple set of Sass (SCSS) examples demonstrating core concepts, along with corresponding HTML for visualization.

1. Variables

`variables.scss` (Sass file)

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size: 16px;

styles.scss

@import "variables";

.button {
    background-color: $primary-color;
    color: #fff;
    font-size: $font-size;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
  
    &:hover {
      background-color: $secondary-color;
    }
  }

Compile sass code to generate styles.css file

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try 1 Sass </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    Check this button <button class="button">Click Me</button>
</body>

</html>

Output

2. Nesting

`nesting.scss` (Sass file)

.navbar {
    background-color: #daf50a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 36px;

  
    ul {
      list-style: none;
      padding: 0;
  
      li {
        display: inline;
        margin-right: 15px;
  
        a {
          color: rgb(10, 10, 9);
          text-decoration: none;
  
          &:hover {
            color: #e40b28;
          }
        }
      }
    }
  }
  

styles.scss

@import "nesting";

Compile styles.scss to generate styles.css

nesting.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nesting</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

output

3. Imports

button.scss

.button {
    background-color: $secondary-color;
    color: rgb(18, 170, 240);
    padding: 10px 20px;
    border: rgb(0, 255, 98) solid;
    border-radius: 15px;
    font-family: $font-family;
    font-size: medium;
  
    &:hover {
      background-color: white;
    }
  }

`styles.scss`

@import 'variables';
@import 'nesting';
@import 'buttons';

body {
  font-family: $font-family;
  margin: 0;
  padding: 0;
  background-color: $primary-color;
}

.container {
  max-width: 400px;
  max-height: 200px;
  margin: 0px auto;
  text-align: left;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass @import Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<div class="container">
<h1>Welcome to Sass @import Example</h1>
<button class="button">Click Me</button>
</div>
</body>
</html>

Compile styles.scss to generate styles.css file

Check the outpit

Mouse over to check the change in color Red in Top Menu and white over button.

4. Partials

Partials are partial SCSS files (e.g., _variables.scss) that don’t generate CSS. Use @import to include them.

`_variables.scss`

$primary-color: #e74c3c;
$secondary-color: #2ecc71;

`_mixins.scss`

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

`main.scss`

@import 'variables';
@import 'mixins';

.container {
  height: 100vh;
  background-color: $primary-color;

  @include center {
    color: white;
    font-size: 24px;
  }
}

HTML

<div class="container">Centered Content</div>

5. Mixins

`_mixins.scss`

@mixin button-style($bg-color, $text-color: rgb(14, 1, 1), $radius: 5px) {
    background-color: $bg-color;
    color: $text-color;
    border: none;
    border-radius: $radius;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
  
    &:hover {
      background-color: lighten($bg-color, 30%);
    }
  }
  
  @mixin flex-center {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

_variables.scss

$primary-color: #4ae73c;
$secondary-color: #312ecc;

_main.scss

@import 'mixins';

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  height: 10vh;
  background-color: #3498db;
  color: white;

  @include flex-center;
    

  h1 {
    font-size: 3rem;
  }
}

.button-primary {
  @include button-style(#2ecc71, white, 10px);
}

.button-secondary {
  @include button-style(#6f3ce7, white, 20px);
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Mixins Example</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="header">
<h1>Welcome to Mixins Example</h1>
</header>
<div style="text-align: center; margin-top: 20px;">
<button class="button-primary">Primary Button</button>
<button class="button-secondary">Secondary Button</button>
</div>
</body>
</html>

output

6. Extends

`_extends.scss`

%btn {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    border-radius: 5px;
    color: white;
  }
  
  .button-primary {
    @extend %btn;
    background-color: $primary-color;
  }
  
  .button-secondary {
    @extend %btn;
    background-color: $secondary-color;
  }

styles.scss

@import 'variables';
@import 'extends';

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Extends Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <a href="#" class="button-primary">Primary</a>
    <a href="#" class="button-secondary">Secondary</a>
</body>
</html>

output

7. Operators

`_operators.scss`

$base-size: 16px;

.container {
  font-size: $base-size * 1.5; // 24px
  padding: $base-size / 2;    // 8px
}

styles.scss

@import 'operators';

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Operators </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">Responsive Container</div>
</body>

output

8. Interpolation

Variable Interpolation is a SASS feature that developers can use to dynamically inject the value of a variable into selectors and properties. It can be done by utilizing the '#{}' syntax. Developers can create dynamic stylesheets by using static text with variable values via variable interpolation.

`_interpolation.scss`

$breakpoints: (small: 50px, medium: 100px, large: 150px);

@each $name, $size in $breakpoints {
  .container-#{$name} {
    height: $size;
    width: $size;
    background-color: lime;
    padding: 20px;    
  }
}

styles.scss

@import 'interpolations';

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Interpolation Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container-small">Small</div>
    <div class="container-medium">Medium</div>
    <div class="container-large">Large</div>
</body>

</html>

output

9. Directives

`_directives.scss`

$primary-color: #3498db;

@if $primary-color == #3498db {
    .info {
      background-color: $primary-color;
      color: rgb(230, 238, 231);
      height: 20px;
    }
  } @else {
    .info {
      background-color: grey;
      color: black;
      height: 20px;
    }
  }

styles.scss

@import 'directives';

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Directive Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="info">Conditional Styling</div>
</body>
</html>

output

Profile Awesome web site Project

styles.scss

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(rgb(162, 240, 72), rgb(247, 247, 238));
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 2rem;
 
  .icons i {
    margin-left: 20px;
    font-size: 20px;
    cursor: pointer;
  }

  ul li {
    display: inline;
    margin-left: 20px;
    list-style: none;
    a {
      text-decoration: none;
      //text-decoration: underline solid;
      font-family: sans-serif;
      color: #181818;
    }
  }
}

main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin: 6rem;
  background-image: linear-gradient(rgb(162, 240, 72), rgb(247, 247, 238));
}

.image-container {
  background: #fff;
  border-radius: 200px;
  padding: 20px;
  box-shadow: 4px 4px 10px -4px #ccc;

  .image {
    background: url(rmc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 300px;
    height: 500px;
    border-radius: 150px;
    margin-top: 30spx;
    
  }
}

.content {
  margin: 3rem 0;
  font-family: sans-serif;

  .badge-label {
    margin-bottom: 20px;
    font-size: 1.4rem;
  }

  p.info {
    width: 300px;
    color: #4a4a4a;
    line-height: 1.5;
  }
}

.pills-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  gap: 10px;
  .pill {
    border: 2px solid white;
    box-shadow: 4px 4px 10px -4px #ccc;

    padding: 10px 20px;

    border-radius: 100px;
    width: 100px;
    text-align: center;
  }
}

.content2 {
  text-align: right;

  .info {
    transform: translateX(20px);
  }
}

index.html (Thanks to HUXN Web Dev)

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Awesome Header</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <nav>
      <div class="icons">
        <i class="fa-brands fa-youtube"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-github"></i>
        <i class="fa-brands fa-instagram"></i>
      </div>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">WORK</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>

    <main>
      <div class="content1">
        <div class="content">
          <p class="badge-label">BADGE</p>
          <p class="info">I'm a Life Long Learner  and UI/UX lover.</p>
        </div>
        <div class="content">
          <p class="badge-label">TOOLS</p>
          <p class="info">
            I've worked with lots of popular & unpopular technologies,
            frameworks, and libraries.
          </p>
        </div>
        <div class="content">
          <p class="badge-label">Languages</p>
          <div class="pills-container">
            <p class="pill">JS</p>
            <p class="pill">C</p>
            <p class="pill">Python</p>
            <p class="pill">Java</p>
            <p class="pill">Dart</p>
            <p class="pill">C++</p>
          </div>
        </div>
      </div>

      <div class="image-container">
        <div class="image"></div>
      </div>

      <div class="content2">
        <div class="content">
          <p class="badge-label">Previous Work</p>
          <p class="info">Previously I've worked with Aurele, Tata NELCO, Anna, Annamalai Universities & Etiacm Inc, CA, USA</p>
        </div>
        <div class="content">
          <p class="badge-label">Hobbies</p>
          <div class="pills-container">
            <p class="pill">Teaching</p>
            <p class="pill">Learning</p>
            <p class="pill">Reading</p>
            <p class="pill">Writing</p>
            <p class="pill">Coding</p>
          </div>
        </div>
        <div class="content">
          <p class="badge-label">Location</p>
          <p class="info">Annamalai Nagar</p>
        </div>
      </div>
    </main>
  </body>
</html>

output

Final Notes:

Save each .scss file as separate files if using imports and partials.
Compile the SCSS files into a single .css file using a tool like sass CLI or online compilers.
Link the resulting .css file in your HTML.

Tuesday, 6 August 2024

2.9. Bonus - Student friendly Learning Hub Web Site

Project:

Designing a creative and student-friendly homepage for a learner website involves balancing aesthetics, ease of navigation, and engaging elements. Here's a suggested layout:

Header

Logo: Place the logo in the top-left corner.
Navigation Bar: Horizontal menu with links to:
- Home
- Course List
- Course Contents
- Course Test
- Course Resources
- Contact Us
- Profile/Log In

Hero Section

Background Image/Video: Use an engaging image or video related to education.
Welcome Message: A warm and inviting headline, e.g., "Welcome to Your Learning Hub!"
Search Bar: Prominently placed for easy access to search for courses or resources.
Call-to-Action Buttons:
- "Explore Courses"
- "Join Now"

Featured Courses

Carousel/Slider: Showcasing popular or new courses with images, brief descriptions, and "Enroll Now" buttons.

Course Links Section

Create visually distinct cards for each major section with icons or images:

Course List:
- Icon: A list or grid icon.
- Description: "Browse our extensive catalog of courses."
- Link/Button: "View Courses"
Course Contents:
- Icon: A book or document icon.
- Description: "Access your enrolled course materials."
- Link/Button: "Access Contents"
Course Test:
- Icon: A test or quiz icon.
- Description: "Test your knowledge with our quizzes."
- Link/Button: "Take a Test"
Course Resources:
- Icon: A toolbox or resource icon.
- Description: "Find additional learning materials and resources."
- Link/Button: "Explore Resources"

Interactive Section

Student Testimonials: Display quotes from students with their photos.
Progress Tracker: A dynamic progress bar showing the user's course completion status.

Announcements/News

Latest Updates: A section for news, updates, and important announcements related to courses and the platform.

Footer

Quick Links: Reiterate the main links (Course List, Course Contents, etc.)
Contact Information: Email, phone number, and physical address.
Social Media Icons: Links to the website's social media pages.
Newsletter Signup: A field to subscribe to the newsletter for updates.

Visual Elements

Color Scheme: Use a soothing yet vibrant color palette.
Typography: Clear, readable fonts with varying sizes for hierarchy.
Icons/Graphics: Use consistent and friendly icons or illustrations to make the site appealing.

Accessibility Features

Ensure the website is accessible with features like alt text for images, keyboard navigation, and screen reader compatibility.

By combining these elements, you can create a homepage that is both visually appealing and highly functional, catering to the needs and preferences of students.

-------------------------------------------------------------------------------------------------------------------------

Below is a simple implementation of the suggested layout using HTML, CSS, and a bit of JavaScript.

HTML

html code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student-Friendly Learner Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">Learning Hub</div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Course List</a></li>
                <li><a href="#">Course Contents</a></li>
                <li><a href="#">Course Test</a></li>
                <li><a href="#">Course Resources</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Profile/Log In</a></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <h1>Welcome to Your Learning Hub!</h1>
        <input type="text" placeholder="Search for courses...">
        <div class="cta-buttons">
            <button>Explore Courses</button>
            <button>Join Now</button>
        </div>
    </section>

    <section class="featured-courses">
        <h2>Featured Courses</h2>
        <div class="carousel">
            <div class="course-card">
                <img src="course1.jpg" alt="Course 1">
                <h3>Course 1</h3>
                <p>Brief description of Course 1.</p>
                <button>Enroll Now</button>
            </div>
            <div class="course-card">
                <img src="course2.jpg" alt="Course 2">
                <h3>Course 2</h3>
                <p>Brief description of Course 2.</p>
                <button>Enroll Now</button>
            </div>
            <div class="course-card">
                <img src="course3.jpg" alt="Course 3">
                <h3>Course 3</h3>
                <p>Brief description of Course 3.</p>
                <button>Enroll Now</button>
            </div>
        </div>
    </section>

    <section class="course-links">
        <div class="course-link">
            <img src="course-list-icon.png" alt="Course List">
            <h3>Course List</h3>
            <p>Browse our extensive catalog of courses.</p>
            <button>View Courses</button>
        </div>
        <div class="course-link">
            <img src="course-contents-icon.png" alt="Course Contents">
            <h3>Course Contents</h3>
            <p>Access your enrolled course materials.</p>
            <button>Access Contents</button>
        </div>
        <div class="course-link">
            <img src="course-test-icon.png" alt="Course Test">
            <h3>Course Test</h3>
            <p>Test your knowledge with our quizzes.</p>
            <button>Take a Test</button>
        </div>
        <div class="course-link">
            <img src="course-resources-icon.png" alt="Course Resources">
            <h3>Course Resources</h3>
            <p>Find additional learning materials and resources.</p>
            <button>Explore Resources</button>
        </div>
    </section>

    <section class="interactive-section">
        <h2>What Our Students Say</h2>
        <div class="testimonials">
            <div class="testimonial">
                <p>"This platform has changed the way I learn!"</p>
                <span>- Student A</span>
            </div>
            <div class="testimonial">
                <p>"The resources and courses are top-notch."</p>
                <span>- Student B</span>
            </div>
        </div>
    </section>

    <section class="announcements">
        <h2>Latest Updates</h2>
        <div class="update">
            <h3>Update Title 1</h3>
            <p>Details about the latest update or announcement.</p>
        </div>
        <div class="update">
            <h3>Update Title 2</h3>
            <p>Details about the latest update or announcement.</p>
        </div>
    </section>

    <footer>
        <div class="footer-links">
            <a href="#">Course List</a>
            <a href="#">Course Contents</a>
            <a href="#">Course Test</a>
            <a href="#">Course Resources</a>
        </div>
        <div class="contact-info">
            <p>Email: contact@learninghub.com</p>
            <p>Phone: 123-456-7890</p>
            <p>Address: 123 Learning St, Education City</p>
        </div>
        <div class="social-media">
            <a href="#"><img src="facebook-icon.png" alt="Facebook"></a>
            <a href="#"><img src="twitter-icon.png" alt="Twitter"></a>
            <a href="#"><img src="instagram-icon.png" alt="Instagram"></a>
        </div>
        <div class="newsletter-signup">
            <input type="email" placeholder="Subscribe to our newsletter">
            <button>Sign Up</button>
        </div>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>

CSS (styles.css)

css code
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-size: 24px;
    font-weight: bold;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

header nav ul li {
    margin-left: 20px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

.hero {
    background: url('hero-background.jpg') no-repeat center center/cover;
    color: white;
    text-align: center;
    padding: 100px 20px;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero input {
    padding: 10px;
    font-size: 16px;
    width: 50%;
    margin-bottom: 20px;
}

.hero .cta-buttons button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
}

.featured-courses, .course-links, .interactive-section, .announcements {
    padding: 20px;
    background-color: white;
    margin: 20px 0;
}

.featured-courses h2, .course-links h2, .interactive-section h2, .announcements h2 {
    text-align: center;
    margin-bottom: 20px;
}

.carousel {
    display: flex;
    justify-content: space-around;
}

.course-card {
    background-color: #f9f9f9;
    padding: 10px;
    text-align: center;
    width: 30%;
}

.course-card img {
    width: 100%;
    height: auto;
}

.course-card h3 {
    font-size: 18px;
    margin: 10px 0;
}

.course-card p {
    font-size: 14px;
    color: #666;
}

.course-card button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.course-links {
    display: flex;
    justify-content: space-around;
}

.course-link {
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
    width: 22%;
}

.course-link img {
    width: 50px;
    height: auto;
    margin-bottom: 10px;
}

.course-link h3 {
    font-size: 18px;
    margin: 10px 0;
}

.course-link p {
    font-size: 14px;
    color: #666;
}

.course-link button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.testimonials {
    display: flex;
    justify-content: space-around;
}

.testimonial {
    background-color: #f9f9f9;
    padding: 20px;
    width: 45%;
    text-align: center;
}

.testimonial p {
    font-size: 16px;
    color: #666;
}

.testimonial span {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #999;
}

.announcements .update {
    margin-bottom: 20px;
}

.announcements .update h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.announcements .update p {
    font-size: 14px;
    color: #666;
}

footer {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

footer .footer-links a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

footer .contact-info p {
    margin: 5px 0;
}

footer .social-media a {
    margin: 0 10px;
}

footer .newsletter-signup input {
    padding: 10px;
    font-size: 16px;
    width: 200px;
    margin-right: 10px;
}

footer .newsletter-signup button {
    background-color: #fff;
    color: #4CAF50;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

JavaScript (scripts.js)

For the simplicity of this example, JavaScript isn't necessary. However, if you want to add some interactive features like a carousel for the featured courses, you can add the following JavaScript code:

javascript code

document.addEventListener('DOMContentLoaded', () => {
    const carousel = document.querySelector('.carousel');
    let scrollAmount = 0;

    const scrollToNext = () => {
        scrollAmount += 300;
        carousel.scrollTo({
            top: 0,
            left: scrollAmount,
            behavior: 'smooth'
        });
        if (scrollAmount >= carousel.scrollWidth - carousel.clientWidth) {
            scrollAmount = 0;
        }
    };

    setInterval(scrollToNext, 3000);
});

This code sets up an automatic scrolling effect for the featured courses carousel.

Feel free to customize the images, text, and layout to better suit your needs. This basic structure provides a solid starting point for a student-friendly learner website.

------------------------------

Sure! Here are simple HTML templates for each of the pages mentioned: "Course List," "Course Contents," "Course Test," and "Course Resources." Each page will have a similar layout for consistency.

1. Course List (course-list.html)

html code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Course List - Learning Hub</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">Learning Hub</div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="course-list.html">Course List</a></li>
                <li><a href="course-contents.html">Course Contents</a></li>
                <li><a href="course-test.html">Course Test</a></li>
                <li><a href="course-resources.html">Course Resources</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Profile/Log In</a></li>
            </ul>
        </nav>
    </header>

    <section class="course-list">
        <h2>Course List</h2>
        <div class="course-item">
            <h3>Course 1</h3>
            <p>Description of Course 1.</p>
            <button>View Details</button>
        </div>
        <div class="course-item">
            <h3>Course 2</h3>
            <p>Description of Course 2.</p>
            <button>View Details</button>
        </div>
        <div class="course-item">
            <h3>Course 3</h3>
            <p>Description of Course 3.</p>
            <button>View Details</button>
        </div>
    </section>

    <footer>
        <div class="footer-links">
            <a href="course-list.html">Course List</a>
            <a href="course-contents.html">Course Contents</a>
            <a href="course-test.html">Course Test</a>
            <a href="course-resources.html">Course Resources</a>
        </div>
        <div class="contact-info">
            <p>Email: contact@learninghub.com</p>
            <p>Phone: 123-456-7890</p>
            <p>Address: 123 Learning St, Education City</p>
        </div>
        <div class="social-media">
            <a href="#"><img src="facebook-icon.png" alt="Facebook"></a>
            <a href="#"><img src="twitter-icon.png" alt="Twitter"></a>
            <a href="#"><img src="instagram-icon.png" alt="Instagram"></a>
        </div>
        <div class="newsletter-signup">
            <input type="email" placeholder="Subscribe to our newsletter">
            <button>Sign Up</button>
        </div>
    </footer>
</body>
</html>

2. Course Contents (course-contents.html)

html code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Course Contents - Learning Hub</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">Learning Hub</div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="course-list.html">Course List</a></li>
                <li><a href="course-contents.html">Course Contents</a></li>
                <li><a href="course-test.html">Course Test</a></li>
                <li><a href="course-resources.html">Course Resources</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Profile/Log In</a></li>
            </ul>
        </nav>
    </header>

    <section class="course-contents">
        <h2>Course Contents</h2>
        <div class="content-item">
            <h3>Module 1</h3>
            <p>Description of Module 1.</p>
            <button>View Module</button>
        </div>
        <div class="content-item">
            <h3>Module 2</h3>
            <p>Description of Module 2.</p>
            <button>View Module</button>
        </div>
        <div class="content-item">
            <h3>Module 3</h3>
            <p>Description of Module 3.</p>
            <button>View Module</button>
        </div>
    </section>

    <footer>
        <div class="footer-links">
            <a href="course-list.html">Course List</a>
            <a href="course-contents.html">Course Contents</a>
            <a href="course-test.html">Course Test</a>
            <a href="course-resources.html">Course Resources</a>
        </div>
        <div class="contact-info">
            <p>Email: contact@learninghub.com</p>
            <p>Phone: 123-456-7890</p>
            <p>Address: 123 Learning St, Education City</p>
        </div>
        <div class="social-media">
            <a href="#"><img src="facebook-icon.png" alt="Facebook"></a>
            <a href="#"><img src="twitter-icon.png" alt="Twitter"></a>
            <a href="#"><img src="instagram-icon.png" alt="Instagram"></a>
        </div>
        <div class="newsletter-signup">
            <input type="email" placeholder="Subscribe to our newsletter">
            <button>Sign Up</button>
        </div>
    </footer>
</body>
</html>

3. Course Test (course-test.html)

html code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Course Test - Learning Hub</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">Learning Hub</div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="course-list.html">Course List</a></li>
                <li><a href="course-contents.html">Course Contents</a></li>
                <li><a href="course-test.html">Course Test</a></li>
                <li><a href="course-resources.html">Course Resources</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Profile/Log In</a></li>
            </ul>
        </nav>
    </header>

    <section class="course-test">
        <h2>Course Test</h2>
        <div class="test-item">
            <h3>Test 1</h3>
            <p>Description of Test 1.</p>
            <button>Start Test</button>
        </div>
        <div class="test-item">
            <h3>Test 2</h3>
            <p>Description of Test 2.</p>
            <button>Start Test</button>
        </div>
        <div class="test-item">
            <h3>Test 3</h3>
            <p>Description of Test 3.</p>
            <button>Start Test</button>
        </div>
    </section>

    <footer>
        <div class="footer-links">
            <a href="course-list.html">Course List</a>
            <a href="course-contents.html">Course Contents</a>
            <a href="course-test.html">Course Test</a>
            <a href="course-resources.html">Course Resources</a>
        </div>
        <div class="contact-info">
            <p>Email: contact@learninghub.com</p>
            <p>Phone: 123-456-7890</p>
            <p>Address: 123 Learning St, Education City</p>
        </div>
        <div class="social-media">
            <a href="#"><img src="facebook-icon.png" alt="Facebook"></a>
            <a href="#"><img src="twitter-icon.png" alt="Twitter"></a>
            <a href="#"><img src="instagram-icon.png" alt="Instagram"></a>
        </div>
        <div class="newsletter-signup">
            <input type="email" placeholder="Subscribe to our newsletter">
            <button>Sign Up</button>
        </div>
    </footer>
</body>
</html>

4. Course Resources (course-resources.html)

html code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Course Resources - Learning Hub</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">Learning Hub</div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="course-list.html">Course List</a></li>
                <li><a href="course-contents.html">Course Contents</a></li>
                <li><a href="course-test.html">Course Test</a></li>
                <li><a href="course-resources.html">Course Resources</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Profile/Log In</a></li>
            </ul>
        </nav>
    </header>

    <section class="course-resources">
        <h2>Course Resources</h2>
        <div class="resource-item">
            <h3>Resource 1</h3>
            <p>Description of Resource 1.</p>
            <button>View Resource</button>
        </div>
        <div class="resource-item">
            <h3>Resource 2</h3>
            <p>Description of Resource 2.</p>
            <button>View Resource</button>
        </div>
        <div class="resource-item">
            <h3>Resource 3</h3>
            <p>Description of Resource 3.</p>
            <button>View Resource</button>
        </div>
    </section>

    <footer>
        <div class="footer-links">
            <a href="course-list.html">Course List</a>
            <a href="course-contents.html">Course Contents</a>
            <a href="course-test.html">Course Test</a>
            <a href="course-resources.html">Course Resources</a>
        </div>
        <div class="contact-info">
            <p>Email: contact@learninghub.com</p>
            <p>Phone: 123-456-7890</p>
            <p>Address: 123 Learning St, Education City</p>
        </div>
        <div class="social-media">
            <a href="#"><img src="facebook-icon.png" alt="Facebook"></a>
            <a href="#"><img src="twitter-icon.png" alt="Twitter"></a>
            <a href="#"><img src="instagram-icon.png" alt="Instagram"></a>
        </div>
        <div class="newsletter-signup">
            <input type="email" placeholder="Subscribe to our newsletter">
            <button>Sign Up</button>
        </div>
    </footer>
</body>
</html>

These templates maintain the consistent header and footer from the main page and adapt the content for each specific tab. Make sure to replace placeholders like image sources and text with actual content relevant to your site.

Monday, 13 January 2025

3. Sass Concepts

1. Variables

variables.scss (Sass file)

styles.scss

Compile sass code to generate styles.css file

index.html

</html>

Output

nesting.scss (Sass file)

styles.scss

Compile styles.scss to generate styles.css

output

button.scss

styles.scss

@import 'variables';@import 'nesting';@import 'buttons';body { font-family: $font-family; margin: 0; padding: 0; background-color: $primary-color;}.container { max-width: 400px; max-height: 200px; margin: 0px auto; text-align: left;}

HTML

Compile styles.scss to generate styles.css file

4. Partials

_variables.scss

_mixins.scss

main.scss

HTML

5. Mixins

_mixins.scss

_variables.scss

_main.scss

HTML

6. Extends

_extends.scss

7. Operators

_operators.scss

styles.scss

HTML

8. Interpolation

_interpolation.scss

styles.scss

@import 'interpolations';

HTML

9. Directives

_directives.scss

styles.scss

HTML

Profile Awesome web site Project

output

Final Notes:

Tuesday, 6 August 2024

2.9. Bonus - Student friendly Learning Hub Web Site

Header

Hero Section

Featured Courses

Course Links Section

Interactive Section

Announcements/News

Footer

Visual Elements

Accessibility Features

HTML

CSS (styles.css)

JavaScript (scripts.js)

1. Course List (course-list.html)

2. Course Contents (course-contents.html)

3. Course Test (course-test.html)

4. Course Resources (course-resources.html)

3. Sass Concepts

`variables.scss` (Sass file)

`nesting.scss` (Sass file)

`styles.scss`

@import 'variables';
@import 'nesting';
@import 'buttons';

body {
font-family: $font-family;
margin: 0;
padding: 0;
background-color: $primary-color;
}

.container {
max-width: 400px;
max-height: 200px;
margin: 0px auto;
text-align: left;
}

`_variables.scss`

`_mixins.scss`

`main.scss`

`_mixins.scss`

`_extends.scss`

`_operators.scss`

`_interpolation.scss`

`_directives.scss`