Έργα ανάπτυξης Ιστού: Μάθετε πώς να δημιουργείτε και να σχεδιάζετε ιστοσελίδες



Τρία επίπεδα έργων ανάπτυξης ιστοσελίδων που θα σας βοηθήσουν να κατανοήσετε καλύτερα τη διαδικασία σχεδιασμού ιστοσελίδων και επίσης να δημιουργήσετε τα δικά σας έργα.

Σύμφωνα με TechRepublic , η ανάπτυξη ιστού είναι μία από τις 10 πιο καυτές τεχνολογικές δεξιότητες το 2019.Η απασχόληση προγραμματιστών ιστού προβλέπεται να αυξηθεί κατά 15% από το 2016 έως το 2026, πολύ πιο γρήγορα από τον μέσο όρο για όλα τα επαγγέλματα. Αυτή είναι η κατάλληλη στιγμή για να βελτιώσετε τις δεξιότητές σας και να ξεκινήσετε την καριέρα σας στο web developer. Σε αυτό το άρθρο, θα συζητήσουμε μερικά από τα Έργα που θα σας βοηθήσουν να δημιουργήσετε δικές σας εφαρμογές με την ακόλουθη σειρά:

Καριέρα στο Web Development

Ένας προγραμματιστής ιστού είναι ένας προγραμματιστής που ειδικεύεται στην ανάπτυξη εφαρμογών World Wide Web χρησιμοποιώντας ένα μοντέλο πελάτη-διακομιστή. Είναι επίσης υπεύθυνοι για το σχεδιασμό, την κωδικοποίηση και την τροποποίηση ιστότοπων, από διάταξη σε λειτουργία και σύμφωνα με τις προδιαγραφές του πελάτη.





c ++ goto γραμμή

καριέρα ανάπτυξης Ιστού - έργα ανάπτυξης Ιστού - edureka

Μπορείτε να βρείτε επαγγελματίες εκπαιδευμένους στην ανάπτυξη ιστοσελίδων που εργάζονται ως προγραμματιστές υπολογιστών, μηχανικοί λογισμικού, ακόμη και γραφιστές με επίκεντρο τον Ιστό. Μερικοί από τους βασικούς ρόλους εργασίας είναι:



  • Προγραμματιστής Ιστού - Οι προγραμματιστές Ιστού χρησιμοποιούν δεξιότητες προγραμματισμού και τεχνολογίας για την κατασκευή της εμφάνισης και της εμπειρίας χρήστη ενός ιστότοπου. Ο μέσος μισθός είναι περίπου Rs. 480,694.
  • Προγραμματιστής υπολογιστών - Οι προγραμματιστές υπολογιστών αναπτύσσουν και προσαρμόζουν την ορθή λειτουργία του λογισμικού γράφοντας και δοκιμάζοντας κώδικα. Το μέσο εύρος μισθών κυμαίνεται μεταξύ Rs 232k και Rs 1m.
  • Σχεδιαστής ιστοσελίδων - Οι σχεδιαστές ιστοσελίδων εργάζονται στο μπροστινό μέρος ενός ιστότοπου και ασχολούνται με την εξωτερική εμφάνιση και την εμπειρία του χρήστη. Ο μέσος μισθός για έναν Web Designer στην Ινδία είναι Rs 281,410.
  • Σχεδιαστής γραφικών Ιστού - Ένας γραφίστας εργάζεται για να βελτιώσει την εμπειρία ή την εφαρμογή του χρήστη δημιουργώντας γραφικά και άλλα οπτικά μέσα. Ο μέσος μισθός κυμαίνεται από Rs 118k έως Rs 619k.

Τώρα που γνωρίζετε για την ανάπτυξη της σταδιοδρομίας, ας ρίξουμε μια ματιά σε μερικά από τα Έργα Ανάπτυξης Ιστού που θα σας βοηθήσουν να κατανοήσετε καλύτερα τη διαδικασία σχεδιασμού ιστοσελίδων και να δημιουργήσετε τα δικά σας έργα.

Έργα Ανάπτυξης Ιστού

Τα Έργα Ανάπτυξης Ιστού χωρίζονται σε τρία επίπεδα- Βασικό, Ενδιάμεσο, και Προκαταβολή . Θα συζητήσουμε τα διαφορετικά επίπεδα έργων και πώς λειτουργεί ο κώδικας.Αυτό θα σας βοηθήσει να κατανοήσετε καλύτερα τη διαδικασία ανάπτυξης ιστού και να σας δώσει την ιδέα να δημιουργήσετε τους δικούς σας ιστότοπους χρησιμοποιώντας διαφορετικές γλώσσες σεναρίων. Ας ξεκινήσουμε λοιπόν με το βασικό επίπεδο Project.

Αποκριτική διάταξη

Ένας σημαντικός ρόλος ενός προγραμματιστή front end είναι να κατανοήσει τις αρχές σχεδιασμού απόκρισης και πώς να τις εφαρμόσει από την πλευρά της κωδικοποίησης.



Σε αυτό το έργο, θα δημιουργήσουμε μια βασική διάταξη μιας απλής σελίδας που ανταποκρίνεται και πώς λειτουργεί στην ανάπτυξη ιστού για τη δημιουργία ιστότοπων πολλαπλών χρήσεων. Το πρώτο βήμα είναι να δημιουργήσετε τη διάταξη HTML και να σχεδιάσετε το κύριο μέρος της ιστοσελίδας.

* {box-sizing: border-box} .menu {float: left width: 20% text-align: center} .menu a {background-color: # deeba6 padding: 8px margin-top: 7px display: block width: 100 % color: black} .main {float: αριστερό πλάτος: 60% padding: 0 20px} .right {background-color: # f0b569 float: αριστερό πλάτος: 20% padding: 15px margin-top: 7px text-align: center} Οθόνη μόνο @media και (μέγιστο πλάτος: 620 εικονοστοιχεία) {/ * Για κινητά τηλέφωνα: * / .menu, .main, .right {width: 100%}} Προηγούμενη ερώτηση Επόμενη ερώτηση Υποβολή κουίζ

Στη συνέχεια, θα χρειαστούμε έναν τρόπο για να δημιουργήσουμε ένα κουίζ, να δείξουμε αποτελέσματα και να τα συνδυάσουμε όλα. Μπορούμε να ξεκινήσουμε κάνοντας τις λειτουργίες μας με τη βοήθεια του JavaScript.

κουίζ.js

(function () {const myQuestions = [{ερώτηση: 'Ποιο θαλάσσιο πλάσμα έχει τρεις καρδιές;', απαντήσεις: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {ερώτηση:' Ποια είναι η ιταλική λέξη για πίτα; ', απαντήσεις: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {question: «Ποιο είναι το μόνο θηλαστικό που δεν μπορεί να πηδήξει;», απαντά: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// θα χρειαστούμε ένα μέρος για να αποθηκεύσουμε το HTML output const output = [] // για κάθε ερώτηση ... myQuestions.forEach ((currentQuestion, questionNumber) => {// θα θέλαμε να αποθηκεύσουμε τη λίστα επιλογών απάντησης const απαντήσεις = [] // και για κάθε διαθέσιμη απάντηση ... για (επιστολή στο currentQuestion.answers) {// ... προσθέστε ένα κουμπί επιλογής HTML Answers.push ('$ {letter}: $ {currentQuestion.answers [επιστολή ]}}} // προσθέστε αυτήν την ερώτηση και τις απαντήσεις της στην έξοδο output.push ('$ {currentQuestion.question} $ {answer.join (')} ')}) // τελικά συνδυάστε το outpu μας t λίστα σε μια συμβολοσειρά HTML και τοποθετήστε τη στη σελίδα quizContainer.innerHTML = output.join ('')} function showResults () {// συγκεντρώστε κοντέινερ απαντήσεων από το κουίζ const answerContainers = quizContainer.querySelectorAll ('. Answers') // παρακολουθήστε τις απαντήσεις του χρήστη, αφήστε το numCorrect = 0 // για κάθε ερώτηση ... myQuestions.forEach ((currentQuestion, questionNumber) => {// βρείτε επιλεγμένη απάντηση const answerContainer = answerContainers [questionNumber] const selector = 'input label [ name = question $ {questionNumber}]: check` const userAnswer = (answerContainer.querySelector (επιλογέας) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = 'label [id = '$ {answerID}'] '// Επιλέξτε την απάντηση του χρήστη var answerElem = answerContainer.querySelector ( selector1) const selector2 = 'label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}'] 'var answerElem1 = answerContainer.querySelector (selector2) // εάν η απάντηση είναι σωστή εάν (userAnswer === currentQuestion.correctAnswer) { // προσθήκη στον αριθμό των σωστών απαντήσεων numCorrect ++ // χρωματίστε τις απαντήσεις πράσινες //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} αλλιώς {// αν απαντήσετε είναι λάθος ή κενό // χρωματίστε τις απαντήσεις κόκκινο answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // εμφάνιση αριθμού σωστών απαντήσεων από τα συνολικά αποτελέσματαContainer.innerHTML = '$ {numCorrect} από $ {myQuestions.length}'} συνάρτηση showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') διαφάνειες [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} αλλιώς {previousButton.style.display = 'inline-block'} if (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} αλλιώς {nextButton.style.display = 'inline -block 'submButton.style.display =' none '}} function showNextSlide () {showSlide (currentSlide + 1)} function showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' κουίζ ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submission') // εμφάνιση κουίζ αμέσως buildQuiz () const sebelumnyaButton = document.getElementById ('sebelumnya') const nextButton = document.getElementById ('επόμενο const slides = document.querySelectorAll ('. slide') Αφήστε το currentSlide = 0 showSlide (0) // κατά την υποβολή, εμφάνιση αποτελεσμάτων submButton.addEventListener ('click', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('κλικ', showNextSlide)}) ()

Τέλος, μπορούμε να χρησιμοποιήσουμε CSS για να προσθέσουμε διαφορετικά στυλ σε αυτό το παιχνίδι.

κουίζ.css

@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) σώμα {font-size: 30px font-family: 'Work Sans', sans-serif color: 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: 10 εικονοστοιχεία } κουμπί {font-family: 'Work Sans', sans-serif-font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px padding: 20px kursor: pointer margin-bottom: 20px} button: hover {background-color: # 38a} .slide {position: απόλυτη αριστερά: 0px κορυφή: 0px πλάτος: 100% z-index: 1 αδιαφάνεια: 0 μετάβαση: αδιαφάνεια 0,5s} .active- slide {opacity: 1 z-index: 2} .quiz-container {θέση: σχετικό ύψος: 200px margin-top: 40px}

Παραγωγή:

Αυτά ήταν μερικά από τα Έργα Ανάπτυξης Ιστού. με αυτό, φτάσαμε στο τέλος αυτού του άρθρου. Ελπίζω να καταλάβατε τα διαφορετικά επίπεδα έργων και να έχετε την ιδέα να φτιάξετε τη δική σας ιστοσελίδα και να τα σχεδιάσετε σύμφωνα με τις ανάγκες σας.

Τώρα που γνωρίζετε για τους βρόχους JavaScript, δείτε το από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στο Amazon Simple Storage Service (S3).

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του 'Web Development Projects' και θα επικοινωνήσουμε μαζί σας.