Według TechRepublic , tworzenie stron internetowych to jedna z 10 najgorętszych umiejętności technicznych w 2019 roku.Przewiduje się, że zatrudnienie twórców stron internetowych wzrośnie o 15 procent w latach 2016-2026, znacznie szybciej niż średnia dla wszystkich zawodów. To właściwy moment, aby rozwinąć swoje umiejętności i rozpocząć karierę programisty. W tym artykule omówimy niektóre z Projekty, które pomogą Ci samodzielnie tworzyć aplikacje w następującej kolejności:
Kariera w tworzeniu stron internetowych
Programista WWW to programista, który specjalizuje się w tworzeniu aplikacji WWW w modelu klient-serwer. Są również odpowiedzialni za projektowanie, kodowanie i modyfikowanie witryn internetowych, od układu do funkcji i zgodnie ze specyfikacjami klienta.
architektura mvc w javie z przykładem
Możesz znaleźć specjalistów przeszkolonych w tworzeniu stron internetowych, którzy pracują jako programiści komputerowi, inżynierowie oprogramowania, a nawet graficy zajmujący się internetem. Niektóre z kluczowych ról w pracy to:
- Twórca stron internetowych - Twórcy stron internetowych wykorzystują umiejętności programowania i technologii do tworzenia wyglądu i wrażeń użytkownika z witryny. Średnia pensja wynosi około Rs. 480,694.
- Programista komputerowy - Programiści komputerowi opracowują i dostosowują prawidłowe działanie oprogramowania poprzez pisanie i testowanie kodu. Średni zakres wynagrodzenia wynosi od 232 tys. Do 1 mln Rs.
- Projektant stron internetowych - Projektanci stron internetowych pracują nad frontonem witryny i troszczą się o wygląd zewnętrzny i wrażenia użytkownika. Średnia pensja projektanta stron internetowych w Indiach wynosi 281 410 Rs.
- Graficzny projektant stron internetowych - Grafik pracuje nad poprawą wrażeń użytkownika lub aplikacji, tworząc grafikę i inne wizualne media. Średnia pensja waha się od 118 tys. Do 619 tys. Rs.
Teraz, gdy wiesz już o rozwoju kariery, przyjrzyjmy się niektórym projektom tworzenia stron internetowych, które pomogą Ci lepiej zrozumieć proces projektowania stron internetowych, a także stworzyć własne projekty.
Projekty rozwoju sieci
Projekty tworzenia stron internetowych są podzielone na trzy poziomy: Podstawowy, średniozaawansowany, i Postęp . Omówimy różne poziomy projektów i sposób działania kodu.Pomoże Ci to lepiej zrozumieć proces tworzenia stron internetowych i zapewni pomysł na tworzenie własnych witryn internetowych przy użyciu różnych języków skryptowych. Zacznijmy więc od projektu na poziomie podstawowym.
Responsywny układ
Jedną z głównych ról programisty front-end jest zrozumienie zasad projektowania responsywnego i sposobu ich implementacji po stronie kodowania.
W tym projekcie stworzymy podstawowy układ pojedynczej responsywnej strony i jak to działa w tworzeniu stron internetowych do tworzenia wielofunkcyjnych stron internetowych. Pierwszym krokiem jest utworzenie układu HTML i zaprojektowanie głównej części strony internetowej.
* {box-sizing: border-box} .menu {float: left width: 20% text-align: center} .menu a {background-color: # deeba6 padding: 8px margin-top: 7px display: szerokość bloku: 100 % color: black} .main {float: left width: 60% padding: 0 20px} .right {background-color: # f0b569 float: left width: 20% padding: 15px margin-top: 7px text-align: center} Ekran @ media only i (max-width: 620px) {/ * Dla telefonów komórkowych: * / .menu, .main, .right {width: 100%}} Poprzednie pytanie Następne pytanie Prześlij quizNastępnie będziemy potrzebować sposobu na zbudowanie quizu, pokazanie wyników i połączenie wszystkiego w całość. Możemy zacząć od rozplanowania naszych funkcji za pomocą JavaScript.
quiz.js
(function () {const myQuestions = [{pytanie: 'Które stworzenie morskie ma trzy serca?', odpowiedzi: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctOnswer: 'a '}, {pytanie:' Jakie jest włoskie słowo na ciasto? ', responses: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {question: „Który ssak jest jedynym, który nie potrafi skakać?”, Odpowiada: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// będziemy potrzebować miejsca do przechowywania wyjścia HTML const output = [] // dla każdego pytania ... myQuestions.forEach ((currentQuestion, questionNumber) => {// będziemy chcieli przechowywać listę opcji odpowiedzi const odpowiedzi = [] // i dla każdej dostępnej odpowiedzi ... for (litera w currentQuestion.answers) {// ... dodaj przycisk opcji HTML odpowiedzi.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // dodaj to pytanie i jego odpowiedzi do wyniku output.push (` $ {currentQuestion.question} $ {respons.join ('')} `)}) // w końcu połącz nasze wyjście t list do jednego ciągu HTML i umieść go na stronie quizContainer.innerHTML = output.join ('')} function showResults () {// zbierz kontenery odpowiedzi z naszego quizu const answerContainers = quizContainer.querySelectorAll ('. // śledzenie odpowiedzi użytkownika let numCorrect = 0 // dla każdego pytania ... myQuestions.forEach ((currentQuestion, questionNumber) => {// znajdź wybraną odpowiedź const answerContainer = answerContainers [questionNumber] const selector = `etykieta input [ name = pytanie $ {questionNumber}]: zaznaczone` const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Wybierz odpowiedź użytkownika var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // jeśli odpowiedź jest prawidłowa if (userAnswer === currentQuestion.correctAnswer) { // dodaj do liczby poprawnych odpowiedzi numCorrect ++ // pokoloruj odpowiedzi na zielono //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// if answer jest błędne lub puste // pomaluj odpowiedzi na czerwono answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // pokaż liczbę poprawnych odpowiedzi spośród wszystkich wynikówContainer.innerHTML = `$ {numCorrect} z $ {myQuestions.length}`} funkcja showSlide (n) {slajdy [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') // natychmiastowe wyświetlenie quizu buildQuiz () const previousButton = document.getElementById ('previous') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // po przesłaniu, pokaż wyniki submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()Wreszcie, możemy użyć CSS, aby dodać różne style do tej gry.
quiz.css
@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {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: 10px } button {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} button: hover {background-color: # 38a} .slide {pozycja: bezwzględna lewa: 0px góra: 0px szerokość: 100% z-index: 1 krycie: 0 przejście: krycie 0,5s} .active- slide {krycie: 1 z-index: 2} .quiz-container {pozycja: względna wysokość: 200px margin-top: 40px}Wynik:
To były niektóre z projektów rozwoju sieci. tym sposobem doszliśmy do końca tego artykułu. Mam nadzieję, że rozumiesz różne poziomy projektów i masz pomysł, jak zbudować własną stronę internetową i zaprojektować ją zgodnie z własnymi potrzebami.
operator rozpoznawania zakresu C ++
Teraz, gdy wiesz już o pętlach JavaScript, zapoznaj się z przez Edureka. Szkolenie z zakresu certyfikacji w zakresie tworzenia aplikacji internetowych pomoże Ci nauczyć się, jak tworzyć imponujące witryny internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i interfejsów API Google oraz wdrażać je w usłudze Amazon Simple Storage Service (S3).
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy w „Projektach tworzenia stron internetowych”, a my skontaktujemy się z Tobą.