Selon TechRepublic , le développement Web est l'une des 10 compétences technologiques les plus en vogue en 2019.L'emploi des développeurs Web devrait augmenter de 15% de 2016 à 2026, bien plus rapidement que la moyenne de toutes les professions. C'est le bon moment pour améliorer vos compétences et commencer votre carrière de développeur Web. Dans cet article, nous aborderons certains des Projets qui vous aideront à créer vous-même des applications dans l'ordre suivant:
Carrière en développement Web
Un développeur Web est un programmeur spécialisé dans le développement d'applications World Wide Web à l'aide d'un modèle client-serveur. Ils sont également responsables de la conception, du codage et de la modification des sites Web, de la mise en page à la fonction et selon les spécifications du client.
tri c ++ ()
Vous pouvez trouver des professionnels formés au développement Web travaillant en tant que programmeurs informatiques, ingénieurs logiciels et même graphistes axés sur le Web. Certains des rôles clés du poste sont:
- Développeur web - Les développeurs Web utilisent des compétences en programmation et en technologie pour construire l'apparence et l'expérience utilisateur d'un site. Le salaire moyen est d'environ Rs. 480,694.
- Programmeur - Les programmeurs informatiques développent et ajustent le bon fonctionnement du logiciel en écrivant et en testant le code. La fourchette salariale moyenne se situe entre Rs 232k et Rs 1m.
- Concepteur Web - Les concepteurs Web travaillent sur le front-end d'un site et se préoccupent de l'apparence extérieure et de l'expérience utilisateur. Le salaire moyen pour un Web Designer en Inde est de Rs 281 410.
- Designer Web graphique - Un graphiste travaille à améliorer l'expérience utilisateur ou l'application en créant des graphiques et autres supports visuels. Le salaire moyen varie de Rs 118k à Rs 619k.
Maintenant que vous connaissez la croissance de carrière, jetons un coup d'œil à certains des projets de développement Web qui vous aideront à mieux comprendre le processus de conception Web et à créer vos propres projets.
Projets de développement Web
Les projets de développement Web sont divisés en trois niveaux: Basique, intermédiaire, et Avance . Nous discuterons des différents niveaux de projets et du fonctionnement du code.Cela vous aidera à mieux comprendre le processus de développement Web et vous donnera l'idée de créer vos propres sites Web en utilisant différents langages de script. Alors, commençons par le projet de niveau de base.
Disposition réactive
L'un des rôles majeurs d'un développeur front-end est de comprendre les principes de conception réactive et comment les implémenter du côté du codage.
Dans ce projet, nous allons créer une mise en page de base d'une seule page responsive et comment cela fonctionne dans le développement Web pour créer des sites Web polyvalents. La première étape consiste à créer la mise en page HTML et à concevoir la partie principale de la page Web.
* {box-sizing: border-box} .menu {float: largeur gauche: 20% text-align: center} .menu a {background-color: # deeba6 padding: 8px margin-top: 7px display: block width: 100 % color: black} .main {float: largeur gauche: 60% padding: 0 20px} .right {background-color: # f0b569 float: left width: 20% padding: 15px margin-top: 7px text-align: center} @media only screen and (max-width: 620px) {/ * Pour les téléphones mobiles: * / .menu, .main, .right {width: 100%}} Question précédente Question suivante Soumettre le questionnaireEnsuite, nous aurons besoin d'un moyen de créer un quiz, d'afficher les résultats et de tout rassembler. Nous pouvons commencer par présenter nos fonctions à l'aide de JavaScript.
quiz.js
(function () {const myQuestions = [{question: 'Quelle créature marine a trois cœurs?', réponses: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {question:' Quel est le mot italien pour tarte? ', réponses: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {question: 'Quel est le seul mammifère qui ne peut pas sauter?', Réponses: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// nous aurons besoin d'un endroit pour stocker la sortie HTML const output = [] // pour chaque question ... myQuestions.forEach ((currentQuestion, questionNumber) => {// nous voulons stocker la liste des choix de réponse const answers = [] // et pour chaque réponse disponible ... for (letter in currentQuestion.answers) {// ... ajouter un bouton radio HTML answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // ajoute cette question et ses réponses à la sortie output.push (` $ {currentQuestion.question} $ {answers.join ('')} `)}) // combine enfin notre outpu t list dans une chaîne HTML et placez-la sur la page quizContainer.innerHTML = output.join ('')} function showResults () {// rassemblez les conteneurs de réponses de notre quiz const answerContainers = quizContainer.querySelectorAll ('. answers') // garder une trace des réponses de l'utilisateur let numCorrect = 0 // pour chaque question ... myQuestions.forEach ((currentQuestion, questionNumber) => {// trouver la réponse sélectionnée const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = question $ {questionNumber}]: vérifié` const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Sélectionnez la réponse de l'utilisateur var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // si la réponse est correcte if (userAnswer === currentQuestion.correctAnswer) { // ajouter au nombre de réponses correctes numCorrect ++ // colorer les réponses en vert //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// si réponse est faux ou vide // colorez les réponses en rouge answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // affiche le nombre de réponses correctes sur le total des résultatsContainer.innerHTML = `$ {numCorrect} sur $ {myQuestions.length}`} function showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') slides [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} else {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} function showNextSlide () {showSlide (currentSlide + 1)} function showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // afficher le quiz tout de suite buildQuiz () const previousButton = document.getElementById ('previous') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // lors de la soumission, afficher les résultats submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('clic', showPreviousSlide) nextButton.addEventListener ('clic', showNextSlide)}) ()Enfin, nous pouvons utiliser CSS pour ajouter différents styles à ce jeu.
quiz.css
@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', sans-serif couleur: rgb (24, 23 , 23) font-weight: 300 text-align: center background-color: # f8e8f2} h1 {font-weight: 300 margin: 0px padding: 10px font-size: 40px background-color: rgb (9, 107, 102) color: #fff} .question {font-size: 40px margin-bottom: 10px} .answers {margin-bottom: 20px text-align: left display: inline-block} .answers label {display: block margin-bottom: 10px } bouton {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px padding: 20px cursor: pointer margin-bottom: 20px} bouton: hover {background-color: # 38a} .slide {position: absolue gauche: 0px haut: 0px largeur: 100% z-index: 1 opacity: 0 transition: opacity 0.5s} .active- slide {opacity: 1 z-index: 2} .quiz-container {position: relative height: 200px margin-top: 40px}Production:
Ce sont quelques-uns des projets de développement Web. avec cela, nous sommes arrivés à la fin de cet article. J'espère que vous avez compris les différents niveaux de projets et que vous avez eu l'idée de créer votre propre page Web et de la concevoir en fonction de vos besoins.
opérateur de résolution de portée c ++
Maintenant que vous connaissez les boucles JavaScript, consultez la par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de «Projets de développement Web» et nous vous répondrons.