Skip to content

nicksonjohn254-hash/Learning-Html-CSS-JavaScript-and-Bash-Scripting-

BranchesTags

Repository files navigation

Code Learn. Project web develop.html

<title>Code Learning Platform</title> <style> :root { --primary-color: #4361ee; --secondary-color: #3a0ca3; --accent-color: #4cc9f0; --text-color: #333; --bg-color: #f8f9fa; --card-bg: #ffffff; --header-bg: #ffffff; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --border-radius: 8px; } 
    .dark-mode {
        --primary-color: #4cc9f0;
        --secondary-color: #4361ee;
        --accent-color: #3a0ca3;
        --text-color: #f8f9fa;
        --bg-color: #121212;
        --card-bg: #1e1e1e;
        --header-bg: #1a1a1a;
        --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        transition: background-color 0.3s, color 0.3s;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--bg-color);
        color: var(--text-color);
        line-height: 1.6;
    }

    header {
        background-color: var(--header-bg);
        box-shadow: var(--shadow);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .container {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
    }

    .logo {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--primary-color);
        text-decoration: none;
    }

    .nav-links {
        display: flex;
        gap: 25px;
    }

    .nav-links a {
        text-decoration: none;
        color: var(--text-color);
        font-weight: 500;
        padding: 8px 12px;
        border-radius: var(--border-radius);
    }

    .nav-links a:hover, .nav-links a.active {
        background-color: var(--primary-color);
        color: white;
    }

    .theme-toggle {
        background: none;
        border: none;
        font-size: 1.2rem;
        color: var(--text-color);
        cursor: pointer;
    }

    .hero {
        text-align: center;
        padding: 80px 0;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        margin-bottom: 40px;
    }

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

    .hero p {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto 30px;
    }

    .btn {
        display: inline-block;
        background-color: white;
        color: var(--primary-color);
        padding: 12px 30px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        box-shadow: var(--shadow);
        transition: transform 0.3s;
    }

    .btn:hover {
        transform: translateY(-3px);
    }

    .section-title {
        text-align: center;
        margin-bottom: 40px;
        font-size: 2.2rem;
        color: var(--primary-color);
    }

    .tech-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
        margin-bottom: 60px;
    }

    .tech-card {
        background-color: var(--card-bg);
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: transform 0.3s;
    }

    .tech-card:hover {
        transform: translateY(-10px);
    }

    .tech-icon {
        background-color: var(--primary-color);
        color: white;
        font-size: 2.5rem;
        padding: 25px;
        text-align: center;
    }

    .tech-content {
        padding: 25px;
    }

    .tech-content h3 {
        margin-bottom: 15px;
        font-size: 1.5rem;
    }

    .tech-content p {
        margin-bottom: 20px;
    }

    .card-btn {
        display: inline-block;
        background-color: var(--primary-color);
        color: white;
        padding: 10px 20px;
        border-radius: var(--border-radius);
        text-decoration: none;
        font-weight: 500;
    }

    footer {
        background-color: var(--header-bg);
        padding: 40px 0;
        margin-top: 60px;
        text-align: center;
        box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.05);
    }

    /* Page-specific styles */
    .page {
        display: none;
        padding: 40px 0;
    }

    .page.active {
        display: block;
    }

    .code-example {
        background-color: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 20px;
        margin: 25px 0;
        box-shadow: var(--shadow);
    }

    .code-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .code-title {
        font-weight: 600;
        color: var(--primary-color);
    }

    .copy-btn {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9rem;
    }

    pre {
        background-color: #2d2d2d;
        color: #f8f8f2;
        padding: 15px;
        border-radius: 5px;
        overflow-x: auto;
        margin: 0;
    }

    .bash-example {
        background-color: #1a1a1a;
        color: #00ff00;
        font-family: 'Courier New', monospace;
        padding: 15px;
        border-radius: 5px;
        margin: 15px 0;
    }

    .example-output {
        background-color: #f0f0f0;
        padding: 15px;
        border-radius: 5px;
        margin-top: 15px;
    }

    .dark-mode .example-output {
        background-color: #2a2a2a;
        color: #e0e0e0;
    }

    /* Responsive styles */
    @media (max-width: 768px) {
        .nav-links {
            display: none;
        }
        
        .hero h1 {
            font-size: 2.2rem;
        }
        
        .hero p {
            font-size: 1rem;
        }
        
        .section-title {
            font-size: 1.8rem;
        }
    }
</style>

<main>
    <!-- Home Page -->
    <section id="home" class="page active">
        <div class="hero">
            <div class="container">
                <h1>Learn Web Development & Bash Scripting</h1>
                <p>Master HTML, CSS, JavaScript, and Bash with our comprehensive tutorials and interactive examples.</p>
                <a href="#" class="btn" data-page="html">Start Learning</a>
            </div>
        </div>

        <div class="container">
            <h2 class="section-title">Technologies You'll Learn</h2>
            <div class="tech-grid">
                <div class="tech-card">
                    <div class="tech-icon">
                        <i class="fab fa-html5"></i>
                    </div>
                    <div class="tech-content">
                        <h3>HTML</h3>
                        <p>Learn the building blocks of web pages with HTML. Structure content and create semantic markup.</p>
                        <a href="#" class="card-btn" data-page="html">Learn More</a>
                    </div>
                </div>
                <div class="tech-card">
                    <div class="tech-icon">
                        <i class="fab fa-css3-alt"></i>
                    </div>
                    <div class="tech-content">
                        <h3>CSS</h3>
                        <p>Style your web pages with CSS. Create beautiful layouts, animations, and responsive designs.</p>
                        <a href="#" class="card-btn" data-page="css">Learn More</a>
                    </div>
                </div>
                <div class="tech-card">
                    <div class="tech-icon">
                        <i class="fab fa-js"></i>
                    </div>
                    <div class="tech-content">
                        <h3>JavaScript</h3>
                        <p>Add interactivity to your websites with JavaScript. Create dynamic content and handle user events.</p>
                        <a href="#" class="card-btn" data-page="javascript">Learn More</a>
                    </div>
                </div>
                <div class="tech-card">
                    <div class="tech-icon">
                        <i class="fas fa-terminal"></i>
                    </div>
                    <div class="tech-content">
                        <h3>Bash Scripting</h3>
                        <p>Automate tasks and work efficiently with Bash scripting. Master the command line interface.</p>
                        <a href="#" class="card-btn" data-page="bash">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- HTML Page -->
    <section id="html" class="page">
        <div class="container">
            <h2 class="section-title">HTML Tutorial</h2>
            <p>HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page.</p>
            
            <div class="code-example">
                <div class="code-header">
                    <div class="code-title">Basic HTML Structure</div>
                    <button class="copy-btn">Copy</button>
                </div>
                <pre><code>&lt;!DOCTYPE html&gt;

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello World!</h1> <p>This is a paragraph.</p> </body> </html> 

            <div class="code-example">
                <div class="code-header">
                    <div class="code-title">HTML Forms</div>
                    <button class="copy-btn">Copy</button>
                </div>
                <pre><code>&lt;form action="/submit" method="post"&gt;
&lt;label for="name"&gt;Name:&lt;/label&gt;
&lt;input type="text" id="name" name="name" required&gt;

&lt;label for="email"&gt;Email:&lt;/label&gt;
&lt;input type="email" id="email" name="email" required&gt;

&lt;input type="submit" value="Submit"&gt;

</form> 

    <!-- CSS Page -->
    <section id="css" class="page">
        <div class="container">
            <h2 class="section-title">CSS Tutorial</h2>
            <p>CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content.</p>
            
            <div class="code-example">
                <div class="code-header">
                    <div class="code-title">Basic CSS Syntax</div>
                    <button class="copy-btn">Copy</button>
                </div>
                <pre><code>/* Selector */

body { /* Declaration block */ font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; }

/* Class selector */ .container { max-width: 1200px; margin: 0 auto; }

/* ID selector */ #header { background-color: #333; color: white; padding: 10px; } 

            <div class="code-example">
                <div class="code-header">
                    <div class="code-title">CSS Flexbox</div>
                    <button class="copy-btn">Copy</button>
                </div>
                <pre><code>.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;

}

.item { flex: 1 0 200px; margin: 10px; padding: 20px; background-color: #f9f9f9; } 

    <!-- JavaScript Page -->
    <section id="javascript" class="page">
        <div class="container">
            <h2 class="section-title">JavaScript Tutorial</h2>
            <p>JavaScript is a programming language that enables interactive web pages. It is an essential part of web applications.</p>
            
            <div class="code-example">
                <div class="code-header">
                    <div class="code-title">JavaScript Variables and Functions</div>
                    <button class="copy-btn">Copy</button>
                </div>
                <pre><code>// Variables

let name = "John"; const age = 30; var isStudent = false;

// Function declaration function greet(person) { return Hello, ${person}!; }

// Function expression const multiply = function(a, b) { return a * b; };

// Arrow function const divide = (a, b) => a / b;

// Using the functions console.log(greet(name)); // Output: Hello, John! console.log(multiply(5, 3)); // Output: 15 

            <div class="code-example">
                <div class="code-header">
                    <div class="code-title">DOM Manipulation</div>
                    <button class="copy-btn">Copy</button>
                </div>
                <pre><code>// Select an element

const button = document.getElementById('myButton'); const output = document.querySelector('.output');

// Add event listener button.addEventListener('click', function() { output.textContent = 'Button clicked!'; output.style.color = 'green'; });

// Create and append new element const newElement = document.createElement('div'); newElement.textContent = 'This is a new element'; document.body.appendChild(newElement); 

    <!-- Bash Page -->
    <section id="bash" class="page">
        <div class="container">
            <h2 class="section-title">Bash Scripting Tutorial</h2>
            <p>Bash is a Unix shell and command language. It's widely used for its powerful command-line interface and scripting capabilities.</p>
            
            <div class="code-example">
                <div class="code-header">
                    <div class="code-title">Basic Bash Script</div>
                    <button class="copy-btn">Copy</button>
                </div>
                <pre><code>#!/bin/bash

This is a comment

echo "Hello, World!"

Variables

name="Alice" age=25

Using variables

echo "My name is $name and I am $age years old."

Reading input

echo "What's your favorite color?" read color echo "Your favorite color is $color." 

            <div class="code-example">
                <div class="code-header">
                    <div class="code-title">Conditionals and Loops in Bash</div>
                    <button class="copy-btn">Copy</button>
                </div>
                <pre><code>#!/bin/bash

If statement

if [ "$1" == "hello" ]; then echo "You said hello!" elif [ "$1" == "goodbye" ]; then echo "You said goodbye!" else echo "You said something else." fi

For loop

for i in {1..5}; do echo "Number: $i" done

While loop

count=1 while [ $count -le 3 ]; do echo "Count: $count" ((count++)) done 

<footer>
    <div class="container">
        <p>CodeLearn Platform &copy; 2023 | Learn HTML, CSS, JavaScript and Bash Scripting</p>
    </div>
</footer>

<script>
    // Navigation between pages
    document.querySelectorAll('.nav-link, .card-btn, .btn').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetPage = this.getAttribute('data-page');
            
            // Update active nav link
            document.querySelectorAll('.nav-link').forEach(nav => {
                nav.classList.remove('active');
            });
            this.classList.add('active');
            
            // Show target page
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(targetPage).classList.add('active');
            
            // Scroll to top
            window.scrollTo(0, 0);
        });
    });

    // Theme toggle
    const themeToggle = document.getElementById('themeToggle');
    const themeIcon = themeToggle.querySelector('i');
    
    themeToggle.addEventListener('click', function() {
        document.body.classList.toggle('dark-mode');
        
        if (document.body.classList.contains('dark-mode')) {
            themeIcon.classList.remove('fa-moon');
            themeIcon.classList.add('fa-sun');
        } else {
            themeIcon.classList.remove('fa-sun');
            themeIcon.classList.add('fa-moon');
        }
    });

    // Copy code functionality
    document.querySelectorAll('.copy-btn').forEach(button => {
        button.addEventListener('click', function() {
            const codeBlock = this.parentElement.nextElementSibling;
            const codeText = codeBlock.textContent;
            
            navigator.clipboard.writeText(codeText).then(() => {
                const originalText = this.textContent;
                this.textContent = 'Copied!';
                
                setTimeout(() => {
                    this.textContent = originalText;
                }, 2000);
            });
        });
    });
</script>
<style>/*Here write your styles*/</style><script>/*Here write your javascript code*/</script>

About

A Learning platform for Html,CSS,JavaScript and Bash Scripting with their examples

Resources

Readme

License

Apache-2.0 license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published