Webentwicklungsprojekte: Wissen, wie man Webseiten erstellt und gestaltet

Gemäß TechRepublic Die Webentwicklung ist eine der 10 heißesten technischen Fähigkeiten im Jahr 2019.Die Beschäftigung von Webentwicklern wird von 2016 bis 2026 voraussichtlich um 15 Prozent zunehmen, viel schneller als der Durchschnitt aller Berufe. Dies ist der richtige Zeitpunkt, um Ihre Fähigkeiten zu verbessern und Ihre Karriere als Webentwickler zu beginnen. In diesem Artikel werden wir einige der diskutieren Projekte, mit denen Sie Anwendungen in der folgenden Reihenfolge selbst erstellen können:

• Karriere in der Webentwicklung
• Webentwicklungsprojekte
  • Reaktionsschnelles Layout
  • Dynamische Webseite
  • Quizspiel

Karriere in der Webentwicklung

Ein Webentwickler ist ein Programmierer, der sich auf die Entwicklung von World Wide Web-Anwendungen unter Verwendung eines Client-Server-Modells spezialisiert hat. Sie sind auch für das Entwerfen, Codieren und Ändern von Websites verantwortlich, vom Layout bis zur Funktion und gemäß den Spezifikationen eines Kunden.

Hier finden Sie Fachleute für Webentwicklung, die als Computerprogrammierer, Softwareentwickler und sogar weborientierte Grafikdesigner arbeiten. Einige der wichtigsten Aufgabenbereiche sind:

• Web-Entwickler - Webentwickler verwenden Programmier- und Technologiekenntnisse, um das Erscheinungsbild und die Benutzererfahrung einer Website zu erstellen. Das durchschnittliche Gehalt liegt bei Rs. 480,694.
• Computerprogrammierer - Computerprogrammierer entwickeln und passen die ordnungsgemäße Funktion von Software an, indem sie Code schreiben und testen. Die durchschnittliche Gehaltsspanne liegt zwischen 232.000 und 1 Mio. Rs.
• Webdesigner - Webdesigner arbeiten am Front-End einer Website und kümmern sich um das äußere Erscheinungsbild und die Benutzererfahrung. Das durchschnittliche Gehalt für einen Webdesigner in Indien beträgt 281.410 Rs.
• Grafik-Webdesigner - Ein Grafikdesigner verbessert die Benutzererfahrung oder Anwendung, indem er Grafiken und andere visuelle Medien erstellt. Das durchschnittliche Gehalt reicht von Rs 118k bis Rs 619k.

Nachdem Sie sich mit Karrierewachstum vertraut gemacht haben, werfen wir einen Blick auf einige der Webentwicklungsprojekte, mit denen Sie den Prozess des Webdesigns besser verstehen und auch Ihre eigenen Projekte erstellen können.

Webentwicklungsprojekte

Die Webentwicklungsprojekte sind in drei Ebenen unterteilt: Grundlegend, Mittelstufe, und Voraus . Wir werden die verschiedenen Ebenen von Projekten und die Funktionsweise des Codes diskutieren.Dies wird Ihnen helfen, den Prozess der Webentwicklung besser zu verstehen und Ihnen die Idee zu geben, Ihre eigenen Websites mit verschiedenen Skriptsprachen zu erstellen. Beginnen wir also mit dem Basisprojekt.

Reaktionsschnelles Layout

Eine wichtige Aufgabe eines Front-End-Entwicklers besteht darin, die Prinzipien des Responsive Design zu verstehen und diese auf der Codierungsseite zu implementieren.

In diesem Projekt erstellen wir ein grundlegendes Layout einer einzelnen reaktionsfähigen Seite und deren Funktionsweise in der Webentwicklung zum Erstellen von Mehrzweck-Websites. Der erste Schritt besteht darin, das HTML-Layout zu erstellen und den Hauptteil der Webseite zu entwerfen.

Round-Robin-Planungsprogramm in c

* {Box-Größe: Rahmen-Box} .menu {float: left width: 20% text-align: center} .menu a {Hintergrundfarbe: # deeba6 Auffüllung: 8px Rand-oben: 7px Anzeige: Blockbreite: 100 % Farbe: schwarz} .main {float: linke Breite: 60% Auffüllung: 0 20px} .right {Hintergrundfarbe: # f0b569 float: linke Breite: 20% Auffüllung: 15px Rand oben: 7px Textausrichtung: Mitte} @media only screen und (max-width: 620px) {/ * Für Mobiltelefone: * / .menu, .main, .right {width: 100%}} Vorherige Frage Nächste Frage Quiz senden

Als Nächstes benötigen wir eine Möglichkeit, ein Quiz zu erstellen, Ergebnisse anzuzeigen und alles zusammenzustellen. Wir können beginnen, indem wir unsere Funktionen mit Hilfe von JavaScript auslegen.

quiz.js

(function () {const myQuestions = [{Frage: 'Welches Meerestier hat drei Herzen?', Antworten: {a: 'Krake', b: 'Blauwal', c: 'Meeresschildkröte'}, korrekte Antwort: 'a '}, {Frage:' Was ist das italienische Wort für Kuchen? ', Antworten: {a:' Donut ', b:' Kuchen ', c:' Pizza '}, richtigAntwort:' c '}, {Frage: 'Welches ist das einzige Säugetier, das nicht springen kann?', Antwortet: {a: 'Schlange', b: 'Elefant', c: 'Känguru',}, korrektAntwort: 'b'}] Funktion buildQuiz () {// Wir benötigen einen Speicherort für die HTML-Ausgabe const output = [] // für jede Frage ... myQuestions.forEach ((currentQuestion, questionNumber) => {// Wir möchten die Liste der Antwortoptionen const speichern answers = [] // und für jede verfügbare Antwort ... für (Buchstabe in currentQuestion.answers) {// ... ein HTML-Optionsfeld hinzufügen answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // füge diese Frage und ihre Antworten zur Ausgabe output.push hinzu (` $ {currentQuestion.question} $ {answers.join ('')} `)}) // kombiniere endlich unsere Outpu t Liste in eine HTML-Zeichenfolge auf und setze sie auf die Seite quizContainer.innerHTML = output.join ('')} Funktion showResults () {// sammle Antwortcontainer aus unserem Quiz const answerContainers = quizContainer.querySelectorAll ('. answers') // Verfolgen Sie die Antworten des Benutzers. Lassen Sie numCorrect = 0 // für jede Frage ... myQuestions.forEach ((currentQuestion, questionNumber) => {// ausgewählte Antwort finden const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = question $ {questionNumber}]: checked` const userAnswer = (answerContainer.querySelector (Selektor) || {}). value const answerID = (answerContainer.querySelector (Selektor) || {}). id const selector1 = `label [id = '$ {answerID}']` // Antwort des Benutzers auswählen var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // wenn die Antwort korrekt ist if (userAnswer === currentQuestion.correctAnswer) { // zur Anzahl der richtigen Antworten hinzufügen numCorrect ++ // die Antworten grün färben //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// if answer ist falsch oder leer // färbe die Antworten rot answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // Anzahl der richtigen Antworten aus den Gesamtergebnissen anzeigenContainer.innerHTML = `$ {numCorrect} aus $ {myQuestions.length}`} Funktion showSlide (n) {slide [currentSlide] .classList.remove ('a ctive-slide ') slide [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === slide.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} else {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} Funktion showNextSlide () {showSlide (currentSlide + 1)} Funktion showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // Quiz sofort anzeigen buildQuiz () const previousButton = document.getElementById ('previous') const nextButton = document.getElementById ('next ') const slide = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // beim Senden Ergebnisse anzeigen submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()

Schließlich können wir CSS verwenden, um diesem Spiel verschiedene Stile hinzuzufügen.

quiz.css

@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {Schriftgröße: 30px Schriftfamilie: 'Work Sans', serifenlose Farbe: rgb (24, 23 , 23) Schriftgröße: 300 Textausrichtung: mittlere Hintergrundfarbe: # f8e8f2} h1 {Schriftgröße: 300 Rand: 0 Pixel Auffüllung: 10 Pixel Schriftgröße: 40 Pixel Hintergrundfarbe: RGB (9, 107, 102) Farbe: #fff} .Frage {Schriftgröße: 40px Rand-unten: 10px} .Antworten {Rand-unten: 20px Textausrichtung: linke Anzeige: Inline-Block} .Antworten Label {Anzeige: Block Rand-unten: 10px } button {Schriftfamilie: 'Work Sans', serifenlose Schriftgröße: 22px Hintergrundfarbe: rgb (218, 167, 57) Farbe: #fff Rand: 0px Randradius: 3px Auffüllung: 20px Cursor: Zeiger Rand-unten: 20px} Schaltfläche: Hover {Hintergrundfarbe: # 38a} .slide {Position: absolut links: 0px oben: 0px Breite: 100% Z-Index: 1 Deckkraft: 0 Übergang: Deckkraft 0,5s} .active- Folie {Deckkraft: 1 Z-Index: 2} .quiz-Container {Position: relative Höhe: 200px Rand oben: 40px}

Ausgabe:

Dies waren einige der Webentwicklungsprojekte. Damit sind wir am Ende dieses Artikels angelangt. Ich hoffe, Sie haben die verschiedenen Ebenen von Projekten verstanden und sind auf die Idee gekommen, wie Sie Ihre eigene Webseite erstellen und nach Ihren Bedürfnissen gestalten können.

datengetriebenes Framework in Selen

Nachdem Sie sich mit JavaScript-Schleifen vertraut gemacht haben, lesen Sie die von Edureka. Mit dem Web Development Certification Training lernen Sie, wie Sie beeindruckende Websites mit HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- und Google-APIs erstellen und für Amazon Simple Storage Service (S3) bereitstellen.

Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich von „Web Development Projects“ und wir werden uns bei Ihnen melden.