Webentwicklung – die neusten Beiträge

Verwandte Themen
SollIchOderNich
17.07.2024, 13:44

Was haltet ihr von diesen Premium-Domains?

Hallo Schwarmintelligenz,

ich überlege mir gerade, ob ich mir eine der nachfolgenden „Premium-Domains“ kaufe:

it-admin.de
it-superuser.de
domain-superuser.de
key-admin.de
key-superuser.de
max-superuser.de
web-superuser.de

www-superuser.de
www-root.de

Dazu habe ich in der Suche von IONOS.de und sedo.com ein Bisschen herumprobiert, was für Domains so möglich sind, die irgendwie nach IT, Webentwicklung bzw. Webdesign und dazu noch „wichtig“ klingen. Naja, das sind dann die besten, die ich finden konnte, die auch aktuell zum Verkauf stehen...

Findet ihr, die klingen zu allgemein und/oder hat man da vielleicht zu viel Traffic, wenn man darüber eine Website bzw. E-Mail-Adresse (info@ oder so) anlegt? Oder könnte man da vielleicht sogar versehentlich für ein Unternehmen gehalten werden, welches allgemein für Domain-Registriereungen etc. zuständig ist?

Aus Kostengründen würde ich mir davon zwar sowieso nur eine holen (auch wenn die Gebühr ja eh nur eine Einmalzahlung ist), aber da muss ich noch überlegen welche...

Eine „normale“ Domain mit meinem Namen habe ich schon, das ist ja keine „Premium-Domain“, aber ich finde die o. g. schon ziemlich cool. Besonders, wenn ich mich mal in den genannten Bereichen selbstständig machen würde, könnte ich die ja theoretisch auch dafür nutzen.

Was haltet ihr also von dieser Idee oder meint ihr, dass das übertrieben wäre?

Computer, Internet, IT, Admin, Administrator, Domain, Domainverkauf, Root, Root Server, Webdesign, Webentwicklung, WWW, domainname, superuser
3 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
JanMarcel01
04.07.2024, 19:54
Mit Links

NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

HTML, JavaScript, Framework, Webentwicklung, API, Frontend, React, node.js, TypeScript
1 Antwort
melisax795
03.07.2024, 11:19
Mit Bildern

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

Bild zum Beitrag
HTML, Webseite, JavaScript, Webentwicklung, React, node.js
2 Antworten
Dungeoneer
01.07.2024, 15:23

CSS Klassen mit Javascript ändern?

Hallo!

Obwohl ich schon etwas Erfahrung mit CSS und Javascirpt habe, bin ich gerade das erste mal auf folgendes Problem gestoßen:

Ich habe für eine Website im Kopf in einem <style> - Bereich einige Klassen definiert.
(z.B.:
.header { border:1px outset gray; margin:.5em; padding:.5em; border-radius: 50%; height: 8%; width: 90%; }
und unten im body dann:
 <div class="header">)
Den Stil dieser Klassen will ich durch Javascript dynamisch ändern.
Javascript soll also nicht den style von einzelnen HTML-Elementen ändern, und auch nicht HTML-Elementen neue Klassen zuweisen. Vielmehr soll der Stil der Klasse direkt geändert werden, so daß sich die Änderung auf alle Elemente dieser Klasse auswirkt.

Konkret möchte ich das Layout dynamisch an die Größe des Browserfensters anpassen. Ein onResize Eventhandler im Body löst eine Javascript-Funktion aus, die entsprechende Änderungen im Layout vornimmt. Dabei wäre es natürlich praktisch, wenn man ähnlich aussehende Elemente (= gleiche class = gleicher CSS-style) auch zusammen anpassen könnte, und zwar auch mit errechneten Werten (z.B. Math.floor(clientHeight / 2)).

Habe lange gegoogelt und auf den üblichen Plattformen gesucht, habe aber immer nur Anleitungen gefunden, wie man Elementen neue Klassen zuweist.

Im Moment löse ich das Problem mit einer for-Schleife:
const AllHeaders = document.getElementsByClassName("header");
for (let i = 0; i < AllHeaders.length; i++) {
var Radius = Math.floor(AllHeaders[i].clientHeight / 2)
AllHeaders[i].style.borderRadius = Radius.toString() + "px";
}
und so weiter, für alle Klassen einzeln.
Das kann irgendwie doch nicht die beste Lösung sein...
Es muß doch eine Möglichkeit geben, auf die Klassen-Definitionen im Stylesheet mit Javascript zuizugreifen. Ansonsten wäre die Funktionalität von CSS doch stark eingeschränkt.

Hoffe, jemand kennt sich aus...

HTML, CSS, JavaScript, Webentwicklung
4 Antworten
tian007
01.07.2024, 12:35

Quereinstieg als Frontend Entwickler mit Background in Business Administration fast unmöglich?

Hallo zusammen, ich habe kürzlich meine Weiterbildung als Frontend-Entwickler abgeschlossen und bin nun auf Jobsuche. Trotz des oft berichteten Fachkräftemangels scheint der Markt für Junior-Stellen hart umkämpft zu sein. Meine Bewerbungsunterlagen wurden von der Weiterbildung geprüft, also können sie nicht so schlecht sein.

Ich habe einen B.Sc. in Business Administration und habe vor kurzem meine Weiterbildung zum Frontend-Entwickler abgeschlossen. Ich habe während des Studiums ein Praktikum im Bereich Operations bei einem IT-Startup absolviert und arbeite derzeit wieder dort als Praktikant, diesmal als Frontend-Entwickler. Aus Budgetgründen können sie im Moment keine neuen Mitarbeiter einstellen. Während dieser Zeit plane ich, mich weiter zum Fullstack-Entwickler (TypeScript + React) zu qualifizieren.

Alternativ denke ich darüber nach, ein SAP-Zertifikat zu erwerben, um eine Stelle im SAP-Bereich zu suchen. Hier gibt es wirklich Stellenangebote (Trainee/Junior) ohne Ende.

Eine weitere Option wäre eine Bewerbung als IT-Consultant, obwohl ich das Gefühl habe, dass ich dafür mehr Erfahrung als Entwickler benötige. Wie soll ich Unternehmen beraten, wenn ich selbst keine Ahnung habe?

Es ist frustrierend, nach dem Sparen und Absolvieren der Weiterbildung keine Stelle zu finden, aber ich bleibe optimistisch und offen für Möglichkeiten. Ich hoffe, ihr könnt mir vielleicht ein paar Tipps geben.

Vielen Dank im Voraus

JavaScript, Jobsuche, Webentwicklung, Frontend, Junior
3 Antworten
Moni98799
26.06.2024, 03:10
Mit Links

FEHLERSUCHE bei einem nicht mitscrollenden "Nach-Oben" Button?

Mehrere Stunden hat es mich heute schon beschäftigt, ich komme und komme nicht darauf...

Es geht mir um den seitlichen (rechts) "skip-to-top" Button. Exakt alles habe ich genauso wie in diesem Pen Beispiel ( Link: https://codepen.io/jackherizsmith/pen/oNxVWrK ) gemacht.

Aber bei mir scrollt der Nach-Oben Button nicht mit wie in dem Pen Beispiel :

Meine Demo-Seite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html (aktualisiert)

Allerdings habe ich mein position: relative nicht main mitgegeben sondern der id "skiptop". Mein Dev-Tool zeigt mir an, das jeweils relative und absolute richtig erkannt wird und es wird mir auch so gezeigt.

Nur halt die Klasse "scroll-top_link" scrollt nicht in dem Bereich hoch und runter wie es soll.

Was mache ich da falsch. Könnt ihr mir bei der Fehlersuche helfen?

Vieles habe ich ausprobiert, auch meinem main habe ich position relative gegeben, aber auch anderen Elementen setzte ich position relative allerdings ohne Effekt.

Das Ding ist allerdings das dieser seitliche Bereich ein eigenes grit-Element ist. Sprich:

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto) [main-nav-start] 5em [main-nav-end];
    }


#navigations {
    grid-area: navigations;    
    grid-column-end: main-nav;
}

#main-nav {
    grid-area: navigations / main-nav;
    position: relative;
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}

Wo ich letztendlich das Hauptmenü anzeigen lasse, da habe ich noch keinen richtigen Plan.

Eventuell in der Zeile: #navigations und dann seitlich rechts.

Nicht zu verwechseln mit Seiten-Inhalt, das ist ein Seiten internes Sprungmenü zu einem bestimmten nach Datum geordneten Artikel. Bisher habe ich noch keine bessere Bezeichnung dafür gefunden. Irgendeine Idee dafür?

Zurück zum Hauptmenü, oder ich packe das Hauptmenü seitlich zum Nach-Oben Button, mache es ebenfalls sticky.

Was dann allerdings bei einem schmalen Browserfenster passiert?... Da habe ich eigentlich vor das Hauptmenü (oberhalb vom "Seiten-inhalt" Link) ohne Button (offen) untereinander anzuzeigen.

Sag mal bitte, da mir die Praxis fehlt, wie würdest Du es lösen?

Zurück zur eigentlichen Frage:

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Muss ich da was an der html-Struktur ändern. Ein zusätzliches div?

Ich habe da heute lange daran gesessen...

HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung, Visual Studio Code
3 Antworten
Mia1307
22.06.2024, 16:42
Mit Links

Wie bei html bei bild so copyright machen?

Also ich will dass bei jedem Bild so copyright an der Seite ist und habe so ein Code gemacht aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern.

       <figure>
            <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by Denis Nigmatullin on artstation
            </figcaption>  
           <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption>
           <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);position: absolute; right:91%;  top: 0%;">
               Image by Bibi Saint-Pol on wikimedia
           </figcaption>  
            <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by sheepskeleton on artstation
            </figcaption>   
           <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/564x/c6/10/5f/c6105feba2db225b5d7e52af0e427584.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption> 
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
    </p>
    </section>
Homepage, HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Frontend
2 Antworten
Moni98799
20.06.2024, 02:12

Richtige ARIA - Accessibility Auszeichnungen?

Heute geht es mir um eine korrekte ARIA - Accessibility Auszeichnung:

A) Die (TAB) Skip- Links

<!-- Skip links -->
<nav role="navigation" aria-label="skiplinks" id="skiplinks">
	<a href="#main-content" class="skip-link">Zum Haupt&shy;inhalt springen</a>
	<a href="#totop" class="skip-link">Zum Skip&shy;button springen</a>
	<a href="#foot-global"class="skip-link">Zum Footer springen</a>
</nav>

B) Meine Haupt - Navigation

<!-- HAUPT - Navigation -->
<nav id="main-nav" aria-label="MainNav">
  <details id="site-nav-heading">
	<summary aria-labelledby="site-nav-heading">Haupt-&shy;Navigation</summary>
	  <ul aria-labelledby="site-nav-heading">
		<li><a href="">Website Erika Mustermann</a></li>
		<li><a href="">Blog Max Mustermann</a></li>
	  </ul>
  </details>
</nav>

C) Ein INTERNES SKIPPEN zu einzelnen BLOG-ARTIKELN (geordnet nach Datum & Uhrzeit

<nav id="navigations" class="" aria-labelledby="skiptosection-label">
<h3 id="skiptosection-label" class="visually-hidden">Intern-Site-Navigation</h3>
<div class="skipsection-links">
<details>
	<summary class="site-navigation-header">Inhalt</summary>					
		<ul class="site-nav-skiplinks">
			<li><a href="#blogartikel05">20-02-2024<span>13:00 Uhr</span></a></li>
			<li><a href="#blogartikel04">12-02-2024<span>14:30 Uhr</span></a></li>
		</ul>
</details>
</div>
</nav>

D) Zum Schluss noch der Nach-OBEN (SKIP - to - Top) Button

<!-- SKIP - to TOP LINK -->	
<nav id="skiptop" aria-labelledby="skiptop-label" class="scroll-top-wrapper">
<h2 class="visually-hidden">Skip-to-TOP</h2>
	<div id="skiptop-label" class="scroll-top_link">
		<a href="#skip-to-top"><span>skip to top</span></a>
	</div>
</nav>

Bitte das mal zu korregieren.

HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
1 Antwort
JakeKlint
18.06.2024, 08:22
Mit Umfrage

Welche Methode zur Umsetzung einer Website?

Hallo ihr Lieben!

Ich habe einen Verein gegründet und wir brauchen eine ordentliche Website. Das Team der ITler besteht aus 3 Personen (inkl. mir). Einer davon kann Frontend (Design, CSS), einer kann Backend (Datenbanken, HTML, JS, Serverkonfiguration). Ich kann alles davon nur so ein bisschen und koordiniere das Projekt. Bisher haben wir eher provisorisch eine WordPress Seite, sind damit aber aus folgenden Gründen nicht zufrieden:

  1. Unübersichtlich mit den vielen Plugins usw. - es ist nicht einheitlich und wirkt zugemüllt und umständlich
  2. Der Code ist schwer zu lesen und nachzuvollziehen
  3. Man kann den Code (soweit ich weiß) nicht vollständig anpassen und ist daher in Hinblick auf Design und Funktionalität eingeschränkt (in unserem Theme „Astra“ kann man Designfarben einstellen, sieht aber nicht, wo sie verwendet werden)

Jetzt suchen wir nach einer Alternative. Man könnte versuchen, die Website ohne CMS o. Ä. auf die Beine zu stellen, man könnte ein anderes, anpassbareres CMS verwenden oder bloß ein CMF, wobei ich nicht sicher bin, ob das viel besser ist.

Wir können im Moment nicht genau einschätzen, ob es realistisch ist, die Webseite ohne CMS o. Ä. sicher, ordentlich und schön aufzubauen. Allerdings wissen wir auch nicht, ob es ein CMS gibt, das so viel Anpassbarkeit bietet, dass man (mit genug Programmierkenntnissen) theoretisch ALLES umsetzen kann. Funktionen, die wir brauchen, wären:

  • Beiträge (Blog, News)
  • Normale Inhaltsseiten
  • Eingebundene Mediendateien
  • Kleine eingebettete Online-Spiele
  • Kontakt/Anmeldeformulare
  • Suchfunktion
  • Design exakt, wie der Designer es sich vorstellt
  • evtl. ungewöhnliche Seitennavigation (Nicht nur mit Standard Menüs, wie bei WordPress von Anfang an drin)

Denkt ihr, WordPress oder Drupal ist durch Themes, Plugins/Modulen etc. doch anpassbar genug und wir müssten uns nur mal genauer hineindenken oder sollte man in unserem Fall lieber ganz auf Content-Management Optionen verzichten?

Vielen Dank schon mal für eure Antworten!

Benutzt Wordpress und verwendet vorhandene Themes und Plugins 56%
Baut die Seite von 0 auf selbst 44%
Benutzt Wordpress und programmiert Themes und Plugins selbst 0%
Benutzt Drupal und programmiert selbst 0%
Benutzt Drupal und verwendet vorhandenes 0%
Nutzt ein anderes CMS oder CMF 0%
Homepage, HTML, Webseite, CSS, WordPress, JavaScript, HTML5, CMS, Content-Management, Drupal, PHP, Typo3, Webdesign, Webentwicklung, Webhosting, Webserver, Website Design
6 Antworten
Moni98799
18.06.2024, 04:34

Wäre es eine korrekte Vorgehensweise wenn ich innerhalb eines wrappers ein GRID-Raster anlege?

Ich frage mich momentan, ob es eine korrekte Vorgehensweise wäre, wenn ich innerhalb eines wrappers ein GRID-Raster anlege?

Das sähe so aus:

.main-content-wrapper {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 72em;    
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    border: 2px dashed #551A8B;
}

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto); }


<body id="skip-to-top">
    <div class="main-content-wrapper">
        <header role="header" id="main-head">
[ ... ]

Ich habe festgestellt, wenn ich body als wrapper nutze, dann entstehen bei ganz schmalen Browserfenster einige Fehler, die u.a. so aussehen das (wenn ich bei den Dev-Tools grid anzeigen lasse) mein grid seitlich rechts vom body und html hinaus wandern würde oder: mein grid bleibt an einem Punkt stehen und nur html & body wird noch schmaler. Daher meine Entscheidung ein weiteres div einzusetzen.

Ist dies richtig? Wie seht ihr das?

Oder sollte ich eher eine Lösung ohne wrapper anstreben, die ganze Seite mit einem dreispaltigen grid lösen?

body {
	display: grid;
		grid-template-columns: [left] minmax(0.45em,1fr) [main] minmax(10em,78em) [right] minmax(0.45em,1fr);
		grid-template-rows: repeat(2,min-content) auto;
		grid-gap: 0;
		}

Die gridfelder rechts und links sind quasi mein Puffer, wenn ich mein Browserfenster zusammenziehe, und wird dann automatisch weniger/ kleiner.

Was wäre die bessere Herangehensweise?

HTML, Webseite, CSS, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
1 Antwort
Moni98799
18.06.2024, 04:01

Ist es möglich bei <details> & <summary> den Marker (zum Beispl. mit einem SVG) zu ändern?

Ich möchte bei <details> & <summary> den Marker , der ja momentan noch ein aufrechters Dreieck ist , mit einem eigenen SVG ändern. Einmal hätte ich die einzelnen SVG (bars-solid.svg & times-solid.svg) in einem Ordner auf dem Server, aber ich habe dort auch Font Awesome 5.

Folgendes habe ich ausprobiert, hat aber leider keinen Effekt:

details summary::-webkit-details-marker {
        background: url(../web-fonts/SVG/bars-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }    

    details[open] summary::-webkit-details-marker,
    details[open] summary::marker {
      background: url(../web-fonts/SVG/times-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }

Oder geht dies NUR mit einem ::after pseudo.element.

Könnt ihr mir es bitte mal zeigen?

<summary>Menü</summary>
   <ul>
       <li><a href="">Impressum &amp; rechtliches</a></li>
       <li><a href="">Website Erika Mustermann</a></li>
       <li><a href="">Blog Max Mustermann</a></li>
       <li><a href="">Blog Erika Mustermann</a></li>
   </ul>
</details>

Zusätzlich zu diesem Sandwich-Button würde ich in kleiner 
Schrift unter dem Botton dann noch Menü stehen haben.

Könnt ihr mir bitte helfen?
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung
1 Antwort
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
daili
10.06.2024, 11:42

PHP mail kommt nur lokal an?

Hallo, ich habe das problem, dass meine PHP mail nur lokal ankommtl, jedoch nicht wenn ich sie an einen externen Mailprovider schicke, dass ist mein code 

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Statusmeldung</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #191919;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }


        .container {
            text-align: center;
            padding: 20px;
            background-color: #2a2a2a;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            margin-bottom: 20px;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
        .back-button {
            margin-top: 20px;
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .back-button:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Statusmeldung</h1>
		<button class="back-button" onclick="window.history.back()">Zurück</button>
		
        <?php
        session_start();


        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            // Spam-Schutz: Überprüfen, ob genügend Zeit seit dem letzten Absenden vergangen ist (1 Stunde)
            if (isset($_SESSION['last_submit_time']) && time() - $_SESSION['last_submit_time'] < 600) {
                $timeLeft = 600 - (time() - $_SESSION['last_submit_time']);
                echo "<p class='error'>Bitte warten Sie noch $timeLeft Sekunden, bevor Sie das Formular erneut absenden. Die Ankunft der Email kann bis zu 24h dauern.</p>";
                exit;
            }


            // Aktualisieren der letzten Absendezeit
            $_SESSION['last_submit_time'] = time();


            // Weiter mit der E-Mail-Versendung
            $to = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
            $subject = 'Backup Bier aus dem Schlauch';
            $message = 'Hey, hier ist dein Backup von Bier aus dem Schlauch.';
            $headers = "From: noreply@bierausdemschlauch.de";


            $data = $_POST['exportedFile'];
            $fileName = $_POST['fileName'];
            $fileContent = base64_decode($data);


            $separator = md5(time());
            $eol = PHP_EOL;


            // Main headers
            $headers .= "MIME-Version: 1.0" . $eol;
            $headers .= "Content-Type: multipart/mixed; boundary=\"" . $separator . "\"" . $eol;


            // Message
            $body = "--" . $separator . $eol;
            $body .= "Content-Transfer-Encoding: 7bit" . $eol . $eol;
            $body .= $message . $eol;


            // Attachment
            $body .= "--" . $separator . $eol;
            $body .= "Content-Type: application/octet-stream; name=\"" . $fileName . "\"" . $eol;
            $body .= "Content-Transfer-Encoding: base64" . $eol;
            $body .= "Content-Disposition: attachment; filename=\"" . $fileName . "\"" . $eol . $eol;
            $body .= chunk_split(base64_encode($fileContent)) . $eol;
            $body .= "--" . $separator . "--";


            if (mail($to, $subject, $body, $headers)) {
                // Benachrichtigung über Erfolg
                echo "<p class='success'>E-Mail erfolgreich gesendet.</p>";
            } else {
                // Benachrichtigung über Misserfolg
                echo "<p class='error'>E-Mail konnte nicht gesendet werden.</p>";
            }
        } else {
            echo "<p class='error'>Ungültige Anforderung.</p>";
        }
        ?>
		
        
    </div>
	
</body>
</html>
Homepage, HTML, Webseite, HTML5, Code, PHP, Programmiersprache, Webentwicklung
3 Antworten
Moni98799
08.06.2024, 23:33
Mit Bildern

Kann mir jemand bei der Erstellung eines ausklappbaren Seitenmenüs mit Hamburger-Button helfen?

Hoffentlich kann mir hier jemand weiterhelfen.

Ich möchte ein ausfahrbares Seitenmenü mit einem Hamburger-Button (Font Awesome) konstruieren.

Im unteren Bild sieht man meinen momentanen Stand. Ich möchte aber, das von seitlich rechts das Menü hineinschwebt.

Zur Zeit habe ich Folgendes:

<nav role="main-navigation" aria-label="site" id="main-navigate" class="main-navi">
  <button aria-expanded="undefined"></button>
  <ul id="navlinks">
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Blog Max Mustermann</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 1-A</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 1-B</a>
      </div>
    </li>
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Blog Erika Mustermann</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-A</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-B</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-C</a>
      </div>
    </li>
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Website Erika Mustermann</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 3-A</a>
      </div>
    </li>
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Impressum / Datenschutz</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 4-A</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 4-B</a>
      </div>
    </li>
  </ul>
</nav>

Da mein Post zu lang wird, hier ein Downloadlink des JS, CSS und HTML: LINK wieder gelöscht!

Könnte bitte jemand mir dabei helfen, dies zu entwickeln? Ein rudimentäres CodePen-Beispiel würde mir helfen.

Bild zum Beitrag
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung
1 Antwort
Frage72015
07.06.2024, 09:48
Beitrag wurde 1 Mal erneut eingestellt
Mit Links

Webentwickler/Developer als Quereinsteiger?

Hallo,

ich mache eine Weiterbildung im Bereich Fullstack-Developer. Also Frontend und Backend zusammen.

Die Weiterbildung dauert ein Jahr und ich bin schon circa sechs Monate dabei und mir macht es riesigen Spaß. Ich kriege auch mit der Weiterbildung ein AZAV-Zertifikat und mache am Ende ein finales Projekt mit anderen Leuten zusammen.

Das Ziel ist natürlich, nach der Weiterbildung zu arbeiten. Vielleicht erst einmal zwei Monate Praktikum oder so. Allerdings höre ich von manchen, dass es sehr schwer ist, eine Arbeitstelle ohne irgendwelche Ausbildung oder Studium zu finden. Aber manch andere sagen, dass in diesem Bereich viel gefragt wird und auch Quereinsteiger fündig werden. Ich lebe in Berlin nur nebenbei erwähnt.

Also, was ich mache ist, dass ich auch eigene Projekte auf GitHub veröffentliche. Ich habe sogar eine Hotelseite mit einem Freund aus dem Kurs erstellt und schaue mir auch Udemy-Kurse an und mache auch dort Projekte. Auch auf der Seite Frontend Mentor mache ich die Seiten nach. Also ich übe selbständig auch neben der Weiterbildung viel, um auch zu zeigen, dass ich etwas mache.

Ich veröffentliche natürlich die Sachen auf GitHub, weil man das ja denke ich nachvollziehen kann, dass ich anstrebe, etwas zu lernen. Momentan haben wir HTML, CSS, SCSS, JavaScript, React gemacht. Die wende ich auch an und werde noch Tailwind CSS lernen.

Könnt ihr da vielleicht Erfahrungen mitteilen oder wenn ihr aus der Branche kommt: Könnt ihr sagen, wie das in der Realität aussieht? Ich bin auch ehrlich gesagt der einzige mit meinem Freund, der wert auf ein GitHub-Profil legt. Die anderen haben da gar nichts drin.

Hier auch mein GitHub, damit ihr mal einen Blick habt: https://github.com/Adem-Tozlu.

Sorry, dass ich soviel geschrieben habe. Ich habe halt viele Fragen im Kopf. :)

Job, HTML, IT, Webseite, CSS, JavaScript, developer, Programmiersprache, Webentwicklung
2 Antworten

Meistgelesene Beiträge zum Thema Webentwicklung
Mehr meistgelesene Fragen zu Webentwicklung