Welches Backend + Hosting für kleine Webseiten?

Ich möchte eine Webseite für ein kleines Unternehmen erstellen.

Sie wird ziemlich Frontend-lastig sein bis auf ein zwei Besonderheiten:

  • Ein Kontakt-Formular, bei dem man eine Nachricht eingeben kann, die dem Unternehmer dann automatisch per Email zugesandt wird
  • Ein Blog, bei dem der Unternehmer selbst Posts (bestehend aus Text & Bildern) erstellen kann, in einer Art Admin-Panel mit WYSIWYG-Editor, und diese direkt oder zu einem bestimmten Zeitpunkt automatisch veröffentlichen kann

Beim Frontend fällt die Technologie-Auswahl noch relativ leicht, TypeScript und ein gängiges Framework wie z.B. React.
Als Datenbank würde ich MySQL oder PostgreSQL verwenden.

Beim Backend weiß ich nun aber nicht weiter.

Welches Framework würde sich für eine Webseite dieser Größe am besten anbieten?
Es sollte beim Hosting billig sein (z.B. durch niedrigen RAM-Verbrauch), der Code sollte einfach und schnell zu schreiben sein, und es sollte die oben genannten Features möglichst einfach ermöglichen.

Express, Next.js, Laravel, Django, Flask, ASP.Net, Spring, ... ?
Was würdet ihr nehmen und warum?

Und zum Hosting, muss ich die Webseite auf einem vServer hosten, oder reicht auch ein Webspace?

Homepage, HTML, Webseite, programmieren, CSS, WordPress, Java, JavaScript, ASP.NET, Datenbank, Express, Hosting, Informatik, PHP, Programmiersprache, Python, Softwareentwicklung, vServer, Webdesign, Webentwicklung, Webspace, Backend, Frontend, Flask
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
DE Sonderzeichen Fehler in HTML?

Hi,

ich sitze momentan an einer Datei, um ein paar Dinge auszuprobieren. Ich habe die Meta-Tags wie gewohnt aus einer anderen (funktionierenden) Datei kopiert.

Nun werden allerdings ausschließlich in meiner Datei die Umlaute wie Ä,Ö,Ü und ß mit

"�"

angezeigt. Auch das rein-kopieren Tags aus anderen Dateien, oder das entfernen des Stylesheets hat nix geändert. Kurzzeitig hatte ich auch den Meta-Tag:

<meta http-equiv="content-language" content="de" />

mit reingenommen, allerdings ohne Erfolg oder Veränderungen. Auch das Debugging von W3C hat nix auffälliges gefunden:

Für alle helfenden Hände großes Danke!

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="example, html, head, meta">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="formate.css">
    <title>Das Box-Modell</title>
  </head>


<body>
  <header>
      
    <div class="flex">
     <img src="bilder/logo.svg" alt="logo">
    </div>
    
     <h1>Wilkommen auf der Test-Seite!</h1>
     <nav>
              <a href="#link_1.html">Blog</a>
              <a href="#link_1.html">Unterseite 1</a>
              <a href="#link_1.html">Unterseite 2</a>
              <a href="#link_1.html">Kontakt</a>
     </nav>
          
    </header>
      
      <main>
          
          <h2>ÜÜÜCCS-basierte Layouts <br><br />HTML-Struktur ohne CSS</h2>         
          
      </main>
    
    
    
    <footer>
     <a href="kontakt.html">Kontakt</a>
     <p>&copy; 2024 by GTA1A</p>
    </footer>


</body>
</html>
Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Code, Programmiersprache, Webdesign
Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

E-Mail, HTML, Webseite, CSS, JavaScript, HTML5, Code, Datenbank, JQuery, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, phpMyAdmin
HTML CSS Background Filter?

Hi ich habe seit einer Woche angefangen mit das Programmieren beizubringen, und bin nun auf folgendes Problem gestoßen.

Ich habe bei der HTML Datei in <body> das hier drin :

<body>

    <header id="header">

        <ul>

            <li><a href="" class="active">Home</a></li>

            <li><a href="" class="active"><b>Tv Shows</b></a></li>

            <li><a href="" class="active">Movies</a></li>

            <li><a href="" class="active">Recetly Added</a></li>

        </ul>

        <a href="" class="logo">NETFLIX</a>

    </header>

    <section>

        <img src="logo.png" alt="" style="width: 700px; height: 300px; position: absolute; left: 40px; top: 100px;">

        <div class="content">

            <div class="details">

                <span>99% Match</span>

                <span>2011-2022</span>

                <span>18+</span>

            </div>

            <div class="button">

                <span class="btn1"> <img src="playbtn.png" alt="" style="position: relative; top: 8px;"> Play</span>

                <span class="btn2">+ My List</span>

            </div>

        </div>

    </section>

</body>

Und in der CSS Datei habe ich den Body so definiert:

body{

    background: url(wallpaper1.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    height: 100vh;

Nun habe ich das Problem wenn ich nun einen Filter wie z.B Brightness anwenden will macht es ja nun logischerweise den ganzen Body Dunkler aber ich möchte nur den background verdunkelnm, sodass die anderen Elemente stärker zum Vorschein kommen.

Und meine zweite Frage wäre diesen background zu Skalieren weil auf dem Original Bild ist unten links ein kleiner Schriftzug der auf der Website nun abgeschnitten ist.

Vielen Dank :)

Bild zum Beitrag
HTML, Webseite, CSS, Webdesign, Webentwicklung
JavaScript: Warum springt die Galerie immer wieder zum ersten Bild zurück?

Hallo,

ich habe auf meiner Seite eine Galerie mit einigen Bildern. Diese kann ich öffnen/schließen und durchklicken.

Leider habe ich das Problem, dass wenn ich mich durch die Galerie durchklicke, er leider, warum auch immer, wieder zurück zum ersten Bild springt, anstatt die Bilder komplett durchzulaufen.

Ich finde den Fehler nicht.

HTML Code:

<div class="gallery-container">
  <div class="gallery" id="gallery">
    <!--Erste Reihe-->
    <img src="1_1.webp" alt="Bild 1_1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor gallery-img" data-index="1">
    <img src="1_2.webp" alt="Bild 1_2" onclick="openModal();currentSlide(2)" class="hover-shadow cursor gallery-img" data-index="2">
    <img src="2.1.webp" alt="Bild 2_1" onclick="openModal();currentSlide(3)" class="hover-shadow cursor gallery-img" data-index="3">

    usw. bis

    <img src="8_2.webp" alt="Bild 8_2" onclick="openModal();currentSlide(23)" class="hover-shadow cursor gallery-img" data-index="23">
    <img src="8_3.webp" alt="Bild 8_3" onclick="openModal();currentSlide(24)" class="hover-shadow cursor gallery-img" data-index="24">
  </div>
  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <!-- Fügen Sie für jedes Bild in der Galerie eine Modal Slide hinzu -->
      <div class="mySlides">
        <img src="1_1.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="1_2.webp" style="width:100%">

        bis

      <div class="mySlides">
        <img src="8_2.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="8_3.webp" style="width:100%">
      </div>
    </div>

    <!-- Vorwärts/Rückwärts Kontrollen -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>

JavaScript:

function currentSlide(n) {
  showSlidesModal(slideIndex = n);
}

function showSlidesModal(n) {
  var i;
  var slidesModal = document.getElementsByClassName("mySlides");

  if (n > slidesModal.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slidesModal.length
  }

  for (i = 0; i < slidesModal.length; i++) {
    slidesModal[i].style.display = "none";
  }

  slidesModal[slideIndex - 1].style.display = "block";
}

var galleryImages = document.getElementsByClassName("gallery-img");

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].onclick = function(event) {
    openModal();
    currentSlide(parseInt(event.target.getAttribute('data-index')));
  }
}

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].setAttribute('data-index', i + 1);
}

window.onclick = function(event) {
  if (event.target == document.getElementById('myModal')) {
    closeModal();
  }
}

function plusSlides(n, modal = false) {
  var slides;

  if (modal) {
    slides = document.getElementsByClassName("mySlides");
  }
  else {
    slides = document.getElementsByClassName("slide");
  }

  slideIndex += n;

  if (slideIndex > slides.length) {
    slideIndex = 1
  }

  if (slideIndex < 1) {
    slideIndex = slides.length
  }

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";

  if (!modal) {
    resetAnimations(slides[slideIndex - 1]);
  }
}

document.querySelector(".modal .prev").onclick = function() {
  plusSlides(-1, true);
};
document.querySelector(".modal .next").onclick = function() {
  plusSlides(1, true);
};

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

showSlides(slideIndex);
HTML, Webseite, JavaScript, Code, Webdesign, Visual Studio Code

Meistgelesene Beiträge zum Thema Webdesign