Html semibold und bold schauen gleich aus?

Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.

Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.

Code zum Nachmachen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Test</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Using a widely available font */
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .semibold {
            font-weight: 600;
        }
        .bold {
            font-weight: 700;
        }
        .extrabold {
            font-weight: 800;
        }
        .black {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Font Weight Test</h1>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="semibold">This is semibold text (600).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extrabold">This is extrabold text (800).</p>
    <p class="black">This is black text (900).</p>
</body>
</html>   
Bild zu Frage
HTML, Webseite, CSS, Mozilla Firefox, Google Chrome, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code, Microsoft Edge
HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

  • ...dass Content 1 von Opacity 100 auf 0 geht
  • ...dass Content 1 in Minus Y-Richtung 20px bewegt wird
  • ...dass Content 2 von Opacity 0 auf 100 geht
  • ...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>

Animation, Technik, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
PHP Upload funktioniert auf PC aber nicht aufm Handy?

Hallo,

dieser Code funktioniert nicht auf Handy aber auf dem PC, hat wer tipps?

Clientseite (JavaScript):
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script></head>
<body>
<form id="fileUploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput" required>
    <button type="button" id="uploadButton">Hochladen</button>
</form>


<script>
    $(document).ready(function(){
        $('#uploadButton').on('click touchend', function(){
            var formData = new FormData($('#fileUploadForm')[0]);
            $.ajax({
                url: 'https://sub-upload.main.de/upload.php',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    console.log(response);
                    alert(response);
                },
                error: function(xhr, status, error){
                    alert(error + xhr.status);
                }
            });
        });
    });


</script>
</body>
</html>
Serverseite (upload.php):
<?php
$targetDirectory = '../uploads/';
header("Access-Control-Allow-Origin: https://sub.main.de");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");
if (!file_exists($targetDirectory)) {
    mkdir($targetDirectory, 0777, true);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    $targetFile = $targetDirectory . basename($_FILES['file']['name']);
    if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFile)) {
        echo 'Die Datei wurde erfolgreich hochgeladen.';
    } else {
        echo 'Beim Hochladen der Datei ist ein Fehler aufgetreten.';
    }
} else {
    echo 'Keine Datei zum Hochladen gefunden.';
}
?>
HTML, Webseite, JavaScript, HTML5, Code, Datenbank, JQuery, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung
HTML Zufallsgenerator funktioniert nicht/keine Ausgabe?

Ich habe mir von ChatGPT einen Zufallsgenerator coden lassen. Jedoch kommt keine Augabe, bitte hilfe.

Das hier ist der Code btw

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Randomizer</title>

<style>

  body {

    font-family: Arial, sans-serif;

    text-align: center;

  }

  .column {

    float: left;

    width: 20%;

    padding: 10px;

  }

  /* Clear floats after the columns */

  .row:after {

    content: "";

    display: table;

    clear: both;

  }

</style>

</head>

<body>

  <h1>Randomizer</h1>

  <form>

    <div class="row">

      <!-- Column 1 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence1">Sentence 1:</label>

        <input type="text" id="sentence1" name="sentence1"><br><br>

        <label for="sentence6">Sentence 6:</label>

        <input type="text" id="sentence6" name="sentence6"><br><br>

        <label for="sentence11">Sentence 11:</label>

        <input type="text" id="sentence11" name="sentence11"><br><br>

        <label for="sentence16">Sentence 16:</label>

        <input type="text" id="sentence16" name="sentence16"><br><br>

        <label for="sentence21">Sentence 21:</label>

        <input type="text" id="sentence21" name="sentence21"><br><br>

      </div>

      <!-- Column 2 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence2">Sentence 2:</label>

        <input type="text" id="sentence2" name="sentence2"><br><br>

        <label for="sentence7">Sentence 7:</label>

        <input type="text" id="sentence7" name="sentence7"><br><br>

        <label for="sentence12">Sentence 12:</label>

        <input type="text" id="sentence12" name="sentence12"><br><br>

        <label for="sentence17">Sentence 17:</label>

        <input type="text" id="sentence17" name="sentence17"><br><br>

        <label for="sentence22">Sentence 22:</label>

        <input type="text" id="sentence22" name="sentence22"><br><br>

      </div>

      <!-- Column 3 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence3">Sentence 3:</label>

        <input type="text" id="sentence3" name="sentence3"><br><br>

        <label for="sentence8">Sentence 8:</label>

        <input type="text" id="sentence8" name="sentence8"><br><br>

        <label for="sentence13">Sentence 13:</label>

        <input type="text" id="sentence13" name="sentence13"><br><br>

        <label for="sentence18">Sentence 18:</label>

        <input type="text" id="sentence18" name="sentence18"><br><br>

        <label for="sentence23">Sentence 23:</label>

        <input type="text" id="sentence23" name="sentence23"><br><br>

      </div>

      <!-- Column 4 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence4">Sentence 4:</label>

        <input type="text" id="sentence4" name="sentence4"><br><br>

        <label for="sentence9">Sentence 9:</label>

        <input type="text" id="sentence9" name="sentence9"><br><br>

        <label for="sentence14">Sentence 14:</label>

        <input type="text" id="sentence14" name="sentence14"><br><br>

        <label for="sentence19">Sentence 19:</label>

        <input type="text" id="sentence19" name="sentence19"><br><br>

        <label for="sentence24">Sentence 24:</label>

        <input type="text" id="sentence24" name="sentence24"><br><br>

      </div>

      <!-- Column 5 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence5">Sentence 5:</label>

        <input type="text" id="sentence5" name="sentence5"><br><br>

        <label for="sentence10">Sentence 10:</label>

        <input type="text" id="sentence10" name="sentence10"><br><br>

        <label for="sentence15">Sentence 15:</label>

        <input type="text" id="sentence15" name="sentence15"><br><br>

        <label for="sentence20">Sentence 20:</label>

        <input type="text" id="sentence20" name="sentence20"><br><br>

        <label for="sentence25">Sentence 25:</label>

        <input type="text" id="sentence25" name="sentence25"><br><br>

      </div>

    </div>

    <button type="button" onclick="generateRandomSentence()">Generate Random Sentence</button><br><br>

    <label for="result">Random Sentence:</label>

    <input type="text" id="result" readonly>

  </form>

  <script>

    function generateRandomSentence() {

      var sentences = [];

      // Get all sentence inputs and push their values into sentences array

      for (var i = 1; i <= 30; i++) {

        var sentence = document.getElementById("sentence" + i).value.trim();

        if (sentence !== "") {

          sentences.push(sentence);

        }

      }

      // If there are sentences in the array, choose one randomly and display it

      if (sentences.length > 0) {

        var randomIndex = Math.floor(Math.random() * sentences.length);

        document.getElementById("result").value = sentences[randomIndex];

      } else {

        document.getElementById("result").value = "No sentences provided";

      }

    }

  </script>

</body>

</html>

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend
Warum funktioniert Flask und Websockets nicht?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Frontend, Python 3, Pycharm, Flask
Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Frontend, Python 3, Flask
Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed: 

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Python 3
Welchen Weg sollte ich als angehender Frontend-Entwickler einschlagen: JavaScript Vanilla oder ein Framework?

Hallo Leute,

ich hoffe, euch geht es gut und ihr habt einen angenehmen Tag.

Ich habe eine Frage an die erfahrenen Frontend-Entwickler unter euch, wie ihr dem Titel unschwer entnehmen könnt :).

Mein Ziel ist es, mich eigenständig so weit zu bilden, dass ich einen Job als Junior/Berufseinsteiger Frontendentwickler bekommen kann.

Bis dato habe ich bereits einen HTML5- und CSS3-Udemy-Kurs durchlaufen und einige Tutorials nachgebaut. Nun fühle ich mich fit genug für den nächsten Schritt.

Hierbei wollte ich wissen, ob ich mit JavaScript Vanilla starten soll und einen Kurs dazu machen soll oder direkt mit einem der bekannten JS-Frameworks wie Angular, React oder Vue.js?

Da ich während meiner Ausbildung bereits mit C# und WinForms gearbeitet habe, sind mir die Programmierungsgrundlagen nicht ganz fremd :D

Ich habe mal gehört, dass man JavaScript Vanilla nur lernen sollte, wenn man keinerlei Programmiererfahrung hat, z.B. über Schleifen, Verzweigungen usw., ansonsten sollte man direkt mit einem Framework starten.

Aktuell würde ich mich für React entscheiden, da man später das Wissen auch super in React Native implementieren kann und somit auch Apps entwickeln kann. Da Web und App meine Interessenbereiche in der Entwicklung sind, würde es sich super anbieten, es sei denn, die Mehrheit sagt nein, auf keinen Fall React. Dann bitte mit einer Begründung und was ich alternativ dazu dann lernen sollte :)

Ach ja, natürlich anhand meines Ziels dürft ihr mir auch alle anderen Tipps geben, was ich noch alles lernen könnte oder draufhaben sollte, damit eben keine Absagen mehr eintreffen als Junior :)

Ich bedanke mich bei allen schon einmal herzlich für die Zeit, die Ihr aufwendet, für das Lesen und Antworten :)

Viele Grüße,

JrDev

JavaScript Vanilla 100%
Framework / Bibliothek (Angular, React, Vue.js) 0%
CSS, JavaScript, HTML5, berufseinsteiger, Frontend, Junior
Welches CMS für Online-Shop?

Ich bin Fullstack-Programmierer und möchte einen Online-Shop für einen Verwandten bauen.

Er möchte darin eine Handvoll Artikel zum bestmöglichen Preis verkaufen. Um Lagerung und Versand der Artikel kümmert er sich. Er verwendet aufgrund der geringen Artikelzahl auch keine fertige Warenwirtschaft sondern macht die Verwaltung manuell per Excel.

Das Bezahlen der Waren soll rein über PayPal laufen. (Kein Stripe, weil kostet mehr). PayPal zu integrieren sollte also möglichst einfach gehen.

Außerdem sollen sich Kunden einen Kunden-Account machen können (natürlich mit automatischer Anmeldung via Token usw), damit ihre Daten beim nächsten Checkout automatisch vor-ausgefüllt werden, und um ihre bisherigen Käufe in einer Order-History einzusehen. Da das Authentication-Zeug kein Spaß zu implementieren ist sollte es schon irgendwie vom CMS gegeben sein.

Mein Verwandter will außerdem eine kleine Admin-Seite haben auf der er die Preise und Mengen seiner Artikel verwalten kann und neue Artikel hochladen kann. Außerdem will er sehen können, was er wann an wen verkauft hat (in Zukunft evtl. auch mit Excel-Export, Graphen zur Analyse, usw.). Seitenlayout usw. soll er auf seiner Admin-Seite aber nicht ändern können, um das soll ausschließlich ich mich kümmern.

Das CMS und die zugehörige Datenbank sollen auf einem vServer komplett selbst gehostet werden können (um Geld zu sparen). Fertiglösungen wie Shopify, Squarespace, Sanity, Webflow, usw. fallen also raus.

Die Website soll möglichst performant sein und maximale SEO-Möglichkeiten bieten.

Das Design des Frontends soll komplett individuell von mir gestaltet werden können. Ich möchte dafür TailwindCSS oder Bootstrap verwenden.

Meine Überlegungen:

- Wordpress + WooCommerce (sehr altbacken und ich hasse PHP :D)
- Headless Wordpress + Svelte / Astro (Vorteile wie bessere Performance & komplett separate Admin-Seite?)
- Magento + Next.js + React
- Payload + Next.js + React
- Strapi + Svelte / Astro

Was würdet ihr vorschlagen?

Homepage, Online-Shop, HTML, Webseite, CSS, WordPress, JavaScript, HTML5, CMS, Datenbank, PHP, Programmiersprache, Webdesign, Webentwicklung, Webserver, React
zahl 9999 in der xml als value rauskommt?

vielleicht kann ja jemand hier helfen:

ich weil, wenn nichts im Feld drin steht, dass die zahl 9999 in der xml als value rauskommt

              <input type="hidden" name="Geburtsjahr_Sorgeberechtigter_1" value="9999">
            <input type="hidden" name="Geburtsjahr_Sorgeberechtigter_2" value="9999">
                    <div class="col-xs-3" style="width: 187px;">Geburtsjahr</div>
                        <div class="col-xs-4"   style="width: 272px;">
                            <div class="form-group">
                                <input type="text" class="form-control" style="width: 125px;" placeholder="JJJJ" name="Geburtsjahr_Sorgeberechtigter_1" id="Geburtsjahr_Sorgeberechtigter_1" value="{if $pdf}{$values.Geburtsjahr_Sorgeberechtigter_1}{/if}" maxlength="4" min="1900" max="2100">
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="form-group">
                                <input type="text" class="form-control" style="width: 125px;" placeholder="JJJJ" name="Geburtsjahr_Sorgeberechtigter_2" id="Geburtsjahr_Sorgeberechtigter_2" value="{if $pdf}{$values.Geburtsjahr_Sorgeberechtigter_2}{/if}" maxlength="4" min="1900" max="2100">
                            </div>
                        </div> 


                        // Geburtsjahr 
            $(document).ready(function(){
                $('#Geburtsjahr_Sorgeberechtigter_1').on('input', function(){
                    var eingabeWert = $(this).val();
                    if(eingabeWert === ''){
                        eingabeWert = '9999';
                    }
                    $('input[name="Geburtsjahr_Sorgeberechtigter_1"]').attr("value", eingabeWert);
                });
            });


            $(document).ready(function(){
                $('#Geburtsjahr_Sorgeberechtigter_2').on('input', function(){
                    var eingabeWert = $(this).val();
                    if(eingabeWert === ''){
                        eingabeWert = '9999';
                    }
                    $('input[name="Geburtsjahr_Sorgeberechtigter_2"]').attr("value", eingabeWert);
                });
            });
HTML, Webseite, CSS, JavaScript, HTML5, Code, Datenbank, JQuery, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend
Wie kann man Untertitel bei einem Bootstrap Slider über das ganze Bild gehen lassen?

Hallo,

Da der Slider erst einmal den wichtigsten Satz zeigen soll, der eigentliche Text aber viel länger ist, würde ich gerne die Untertitel meines Bootstrap Sliders beim hovern über das ganze Bild gehen lassen...

--> Hinter den Untertiteln liegt ein roter, halbtransparenter, Balken und dieser sollte sich beim hovern über das ganze Bild ziehen und der ganze Text soll erscheinen.

hier der html-code:

 <div class="carousel-item active"> <img src="img_beispiel" class="d-block w-100" alt="Beispielbild">

     <div class="carousel-caption d-none d-md-block">

      <h5>Dies ist ein Beispielbild</h5>

      <button type="button" class="btn btn-link">Mehr lesen</button>

     </div>

    </div>

-->den Button "mehr lesen" bräuchte ich dann nicht (außer ihr habt eine Idee wie man dies umsetzt)

--> den Balken habe ich in einem Bildbearbeitungsprogramm eingefügt, vielleicht weiß jemand ja auch noch wie ich den in html und css in den Slider einbauen kann :D

so sieht die css Datei jetzt noch aus:

.carousel-caption{

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

}

mehr habe ich da bis jetzt noch nicht drin stehen.

Da ich mich noch nicht so gut mit html, css und Bootstrap auskenne, bin ich für jede Hilfe dankbar :)

Vielen Dank schonmal im Vorraus!

Homepage, HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Bootstrap
Ab wann beginnt Full-Stack Entwicklung im Webbereich und wie sieht es mit dem Gehalt aus?

Hallo liebe Community,

kurze Einleitung:

Ich bin Junior Webentwickler seit zirka 1 Jahr bei einer (relativ) kleinen Firma. Wir arbeiten viel mit Freelancer zusammen.

Ich bin mit HTML / CSS / JS eingestiegen und programmiere hier jetzt hauptsächlich über Wordpress die Websiten und Plugins.

Dazu wird bekannterweise → php genutzt. Daher geht hier Jquery, PHP, JS, MySQL, Git/hub und das Wissen in vielen bewährten Plugins und derer Programmierung für erweitere Funktionen einher.

Daher mache ich Backend und Frontend Entwicklung gleichermaßen. Das kann ich auch schon relativ gut, ich musste hier mir alles selbst beibringen und hab hauptsächlich mit Udemy und unserer tollen AI ChatGPT Hilfe mir alles beigebracht.
Die Codereviews hab ich mir von der AI machen lassen, Fehler aufzeigen, den Code bewerten und Verbesserungsmöglichkeiten zeigen.

So bin ich nun der Meinung, ein relativ solides Wissen angeeignet zu haben.
Jetzt zu meinen Fragen:

Frage 1:
Ab wann dürfte ich mich Full-Stack-Entwickler nennen? Ich hab großen Respekt vor erfahrenen Full-Stack-Entwicklern, weil da eine Menge zugehört. Aber ist es schon Full-Stack, wenn man Frontend und Backend macht?

Frage 2:
Ich arbeite in MV und bekomme noch 2600 € brutto gezahlt. Es ist noch relativ niedrig, weil ich zu Anfang viel gelernt habe, die ersten Monate, um den Anforderungen gerecht zu werden. 2400 € in den ersten 6 Monaten und bis jetzt (12. Monat) 2600.

Was wäre so eine faire Preisspanne? Die Firma gibts bald seit 10 Jahren und wir sind kein Start-up mehr. Auch läuft es gerade gut und ich konnte alle Aufgaben bewältigen, die mir seither gestellt wurden. Wenn ich auch für manche länger gebraucht habe (aber dafür bin ich ja auch ein Junior). Mich würde interessieren, wo es fair wäre? Ich möchte bald in die Gehaltsverhandlung gehen und wäre sehr dankbar über Ratschläge und eure Meinungen.

Liebe Grüße

Beruf, HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Entwicklung, PHP, Programmiersprache, Webdesign, Webentwicklung, Backend, Frontend
Erfahrene Web-Entwickler gesucht für Road-Map?

Hallo zusammen,

da mir auf meine letzte Frage so super geantwortet wurde von der Community, wollte ich erneut um Hilfe bitten.

Aufbauend auf meiner letzten Frage:
https://www.gutefrage.net/frage/kaum-erfahrung-nach-der-ausbildung-zum-fachinformatiker-fuer-anwendungsentwicklung-tipps-fuer-die-zukunft

und den Antworten die ich dazu erhalten habe (noch einmal vielen dank), habe ich mich nun für den Weg des Web-Entwicklers entschieden.

Ich habe mir für den Start, um in die Thematik reinzukommen, einen Kurs auf Udemy namens "Der HTML5, CSS, Bootstrap 5 & JavaScript Entwicklerkurs 2021" geholt.

Der HTML5, CSS, Bootstrap 5 & JavaScript Entwicklerkurs 2021

Link: https://www.udemy.com/course/der-html-css-bootstrap-5-javascript-entwicklerkurs-2021/

Ich bin aktuell bei Abschnitt 8 angelangt.

Neben dem Kurs habe ich mir noch GitHub Desktop heruntergeladen und gewöhne mir an, die Sachen, die ich erstelle, damit auf mein GitHub hochzuladen, damit ich lerne, wie man mit Git umgeht.

Nun zu meiner Frage:
Anhand des Bildes (ich hoffe, man kann etwas darauf erkennen), sieht man die weiteren Abschnitte, die noch folgen.

Was ist eure Meinung, sind das noch aktuelle Skills, oder würdet ihr anders vorgehen?
Eventuell, wenn ihr die Zeit habt, eine Roadmap, anhand derer sich ein totaler Anfänger ran hangeln kann.

Für die Zukunft:
Wenn ich nach dem Kurs fit bin, will ich anfangen, kleinere Projekte zu erstellen.

Eventuell hat hier auch jemand gute Ideen von "total kinderleicht" bis hin zu "Impostor-Syndrom / du wirst dir wünschen nie gefragt zu haben "

Ich bedanke mich bei allen, die sich die Zeit nehmen, einem fremden angehenden Junior Web-Entwickler unter die Arme zu greifen :-)

Bild zu Frage
Anfänger, Web, CSS, JavaScript, HTML5, developer, Jobsuche, Softwareentwicklung, Webentwickler, Junior

Meistgelesene Fragen zum Thema HTML5