CSS – die besten Beiträge

Verwandte Themen
Gesichterbuch
12.06.2024, 05:50

Als Anfänger Chat-App programmieren aka (Facebook)?

Eigentlich wollte ich eine vereinfachte Uber-App versuchen nachzubauen, habe aber in der ersten Frage viele Antworten bekommen, dass es zu schwer für einen Anfänger ist und z.B. eine Chat-App etwas einfacher wäre.

Deswegen will ich in drei Monaten mein erstes großes Projekt anfangen zu bauen und zwar so eine Chat-App, wo man mit Freunden schreiben und Fotos teilen kann. Also so eine Art Facebook (aber sehr sehr vereinfacht!).

Ich habe gestern auch den Film "The Social Network" nochmal geguckt und jetzt will ich noch mehr die App bauen.

Jetzt die Frage: Hat jemand schon von euch Erfahrung mit einer Chat-App?

Was müsste ich alles wissen (Webentwicklung)?

Und wie viele Stunden brauche ich circa für die einzelnen Themen, um sich an dieses Projekt zu trauen?

Ich finde, dass man beim Learning-by-doing sehr gut lernt und deswegen will ich auch nicht nur lernen, sondern einfach versuchen, auch etwas zu bauen und wenn ich nicht weiterkomme, dann kurz nachschauen, versuchen zu verstehen und zu lernen, was ich machen muss und dann umsetzen, usw..

Auch wenn es ein mega Fail und die App am Ende nicht gut wird, habe ich trotzdem dann viel gelernt und werde es beim nächsten Mal besser machen.

Also zwei Fragen: Was müsste ich alles dafür können und wie viele Stunden Lernzeit ungefähr braucht man dafür, um damit anfangen zu können?

Computer, Software, App, Chat, Programm, HTML, Webseite, Programmierer, programmieren, CSS, Facebook, Java, JavaScript, Android, Informatik, Programmiersprache, Softwareentwicklung, Webentwicklung
5 Antworten
Trismegisto
04.02.2025, 05:40

Frage zu Responsive Nav, Burger Button?

Hi, also ich verstehe hier folgendes nicht :

Warum das Hamburger Symbol bei bei zutreffender Mediaquerry "@media (max-width: 768px)", angezeigt wird, denn schließlich ist doch der ".menu-toggle" auf "display: none;" ???

Eventuell verstehe ich es richtig, dass durch ".classList.toggle('nav-active');" in der "function toggleMenu()" irgendwie der Burger aktiviert wird, durch eine versteckte VanillaJS Funktion, aber wie genau?

Danke

LG

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Meine Website</title>
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: Arial, sans-serif;
       }
       body {
           display: flex;
           flex-direction: column;
           align-items: center;
       }
       .navbar {
           width: 100%;
           background-color: #333;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 15px;
       }
       .logo {
           color: white;
           font-size: 24px;
           font-weight: bold;
       }
       .nav-links {
           list-style: none;
           display: flex;
       }
       .nav-links li {
           margin: 0 15px;
       }
       .nav-links a {
           color: white;
           text-decoration: none;
           font-size: 18px;
       }
       .menu-toggle {
           display: none;
           font-size: 24px;
           color: white;
           cursor: pointer;
       }
       @media (max-width: 768px) {
           .nav-links {
               display: none;
               flex-direction: column;
               background-color: #333;
               position: absolute;
               top: 60px;
               right: 0;
               width: 100%;
               text-align: center;
           }
           .nav-links li {
               padding: 10px 0;
           }
           .menu-toggle {
               display: block;
           }
           .nav-active {
               display: flex;
           }
       }
   </style>
</head>
<body>
   <nav class="navbar">
       <div class="logo">Mein Logo</div>
       <span class="menu-toggle" onclick="toggleMenu()">&#9776;</span>
       <ul class="nav-links">
           <li><a href="#">Home</a></li>
           <li><a href="#">Über</a></li>
           <li><a href="#">Leistungen</a></li>
           <li><a href="#">Kontakt</a></li>
       </ul>
   </nav>
   <script>
       function toggleMenu() {
           document.querySelector('.nav-links').classList.toggle('nav-active');
       }
   </script>
</body>
</html>


ps:Ok hat sich geklärt...ich depp habe übersehen das die unteren css eigenschaften ja in der Mediaquerry drinne sind
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webdesign, Webentwicklung
1 Antwort
setoat
23.11.2024, 19:42

Warum wirft htmlspecialchars einen Syntaxfehler in meinem PHP-Webshop-Code?

<?php
include 'db.php';

$query = "SELECT * FROM products";
$result = $conn->query($query);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Webshop</title>
    <style>
        /* Basic styling for the body */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Styling for the main heading */
        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        /* Container for all products */
        .products-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        /* Individual product card */
        .product-card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 200px;
            text-align: center;
            padding: 15px;
            transition: transform 0.2s;
        }

        .product-card:hover {
            transform: scale(1.05);
        }

        /* Styling for the product image */
        .product-card img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            transition: opacity 0.2s;
        }

        .product-card img:hover {
            opacity: 0.8;
        }

        /* Styling for product name */
        .product-card h2 {
            font-size: 1.2em;
            color: #333;
            margin: 10px 0;
        }

        /* Styling for product description and price */
        .product-card p {
            color: #666;
            font-size: 0.9em;
            margin: 5px 0;
        }

        .product-card .price {
            font-weight: bold;
            color: #2a9d8f;
        }

        /* Link styling */
        a {
            text-decoration: none;
            color: inherit;
        }
    </style>
</head>
<body>
    <h1>Products</h1>
    <div class="products-container">
        <?php while ($product = $result->fetch_assoc()): ?>
            <div class="product-card">
                <a href="product.php?id_product=<?= htmlspecialchars( $product['id_product']) ?>">
                    <h2><?= htmlspecialchars( $product['produktname']) ?></h2>
                    <!-- Make the image clickable to open the product details page -->
                    <img src="<?= htmlspecialchars($product['image_url']) ?>" alt="<?= htmlspecialchars($product['produktname']) ?>">
              
                <p><?= htmlspecialchars($product['produktbeschreibung']) ?></p>
                <p class="price">Price: €<?= htmlspecialchars($product['preis_pro_prod']) ?></p>
                  </a>
            </div>
        <?php endwhile; ?>
    </div>
</body>
</html>
HTML, CSS
2 Antworten
johndont
13.07.2024, 22:00
Beitrag wurde 1 Mal erneut eingestellt
Mit Bildern

Wie React Icons ausfüllen / Alternative?

In meiner React Component (siehe unten) ist leider das Icon ArrowUpCircleSharp von "react-icons" innen unausgefüllt was nicht schön aussieht wenn es sich über Text und Bilder bewegt, andere Icons wie von FontAwesome Material Icons haben das gleiche Problem. Ich habe es versucht mit den Props Stroke, Fill und mit CSS background, ändert aber nur das Schwarze außen und nicht innerhalb vom Icon.
Was kann ich tun ? Will jetzt nicht umbedingt eine ganze Library einbinden für das Icon, bei react-icons hab ich den Vorteil das es nur die benutzen auch wirklich nutzt,

'use client';
import { useEffect, useState } from "react";
import "../.././assets/styles/components/ScrollToTop/ScrollToTop.scss";
import { IoArrowUpCircleSharp} from "react-icons/io5";


export const ScrollToTop = () => {

const [ScrollY,setScrollY] = useState<number>(0);

useEffect(() => {
    window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))

    return () => {
        window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))
    }
}, [ScrollY])

    return(

        <div
            onClick={()=>{ScrollY > 100 ?
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : 0})
            :
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : document.body.scrollHeight});
            }}
        className={`ScrollToTop ${ScrollY > 100 ? " ScrollToTop_Up" : "ScrollToTop_Down"}`}>
                <IoArrowUpCircleSharp/>
        </div>
    )
}
Bild zum Beitrag
App, HTML, Webseite, programmieren, CSS, JavaScript, Informatik, Programmiersprache, Webentwicklung, Frontend, React, node
2 Antworten

Meistgelesene Beiträge zum Thema CSS

Mehr meistgelesene Fragen zu CSS