による TechRepublic 、ウェブ開発は、2019年に最も注目されている10の技術スキルの1つです。Web開発者の雇用は、2016年から2026年にかけて15％増加すると予測されており、すべての職業の平均よりもはるかに速いです。これは、スキルを高め、Web開発者としてのキャリアを開始するのに適切な時期です。この記事では、いくつかの 次の順序で独自にアプリケーションを構築するのに役立つプロジェクト：
Web開発のキャリア
Web開発者は、クライアントサーバーモデルを使用したWorld WideWebアプリケーションの開発を専門とするプログラマーです。また、レイアウトから機能まで、クライアントの仕様に従って、Webサイトの設計、コーディング、および変更を担当します。
コンピュータープログラマー、ソフトウェアエンジニア、さらにはWebに焦点を当てたグラフィックデザイナーとして、Web開発のトレーニングを受けた専門家を見つけることができます。主な職務の一部は次のとおりです。
- ウェブ開発者 – Web開発者は、プログラミングとテクノロジーのスキルを使用して、サイトの外観とユーザーエクスペリエンスを構築します。平均給与は約ルピーです。 480,694。
- コンピュータープログラマー –コンピュータープログラマーは、コードを記述してテストすることにより、ソフトウェアの適切な機能を開発および調整します。平均給与範囲は、232kルピーから1mルピーの間です。
- ウェブデザイナー – Webデザイナーはサイトのフロントエンドで作業し、外観とユーザーエクスペリエンスに関心を持っています。インドのウェブデザイナーの平均給与は281,410ルピーです。
- グラフィックWebデザイナー –グラフィックデザイナーは、グラフィックやその他のビジュアルメディアを作成することにより、ユーザーエクスペリエンスまたはアプリケーションの強化に取り組みます。平均給与は118kルピーから619kルピーの範囲です。
キャリアの成長について理解したところで、Webデザインのプロセスをよりよく理解し、独自のプロジェクトを構築するのに役立ついくつかのWeb開発プロジェクトを見てみましょう。
Web開発プロジェクト
Web開発プロジェクトは3つのレベルに分かれています- 初級、中級、 そして 前進 。プロジェクトのさまざまなレベルとコードの仕組みについて説明します。これにより、Web開発のプロセスをよりよく理解し、さまざまなスクリプト言語を使用して独自のWebサイトを構築するためのアイデアを得ることができます。それでは、基本レベルのプロジェクトから始めましょう。
レスポンシブレイアウト
フロントエンド開発者の主要な役割の1つは、レスポンシブデザインの原則と、それらをコーディング側で実装する方法を理解することです。
このプロジェクトでは、単一のレスポンシブページの基本的なレイアウトと、多目的Webサイトを構築するためのWeb開発でどのように機能するかを作成します。最初のステップは、HTMLレイアウトを作成し、Webページのヘッド部分をデザインすることです。
* {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：left width：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）{/ *携帯電話の場合：* / .menu、.main、.right {width：100％}}前の質問次の質問クイズを送信次に、クイズを作成し、結果を表示して、すべてをまとめる方法が必要です。 JavaScriptを使用して関数をレイアウトすることから始めることができます。
LinuxにHadoopをインストールする方法
quiz.js
（function（）{const myQuestions = [{質問： 'どの海の生き物に3つのハートがありますか？'、回答：{a： 'タコ'、b： '青いクジラ'、c： 'シータートル'}、correctAnswer： 'a '}、{質問：'パイのイタリア語は何ですか？ '、回答：{a：'ドーナツ '、b：'パイケーキ '、c：'ピザ '}、correctAnswer：' c '}、{質問： 「ジャンプできない唯一の哺乳類はどれですか？」、答え：{a： '蛇'、b： '象'、c： 'カンガルー'、}、correctAnswer： 'b'}] function buildQuiz（）{// HTML出力を保存する場所が必要ですconstoutput = [] //質問ごとに... myQuestions.forEach（（currentQuestion、questionNumber）=> {//回答の選択肢のリストを保存しますconst Answers = [] //そして利用可能な回答ごとに... for（currentQuestion.answersの文字）{// ... HTMLラジオボタンを追加answers.push（ `$ {letter}：$ {currentQuestion.answers [letter ]} `）} //この質問とその回答を出力に追加しますoutput.push（` $ {currentQuestion.question} $ {answers.join（ ''）} `）}）//最後にoutpuを結合しますtリストをHTMLの1つの文字列にまとめて、ページに配置しますquizContainer.innerHTML = output.join（ ''）} function showResults（）{//クイズから回答コンテナを収集しますconst answerContainers = quizContainer.querySelectorAll（ '。answers'） //ユーザーの回答を追跡するletnumCorrect = 0 //質問ごとに... myQuestions.forEach（（currentQuestion、questionNumber）=> {//選択した回答を見つけるconstanswerContainer = answerContainers [questionNumber] constselector = `label input [ name = question $ {questionNumber}]：checked` const userAnswer =（answerContainer.querySelector（selector）|| {}）。value const answerID =（answerContainer.querySelector（selector）|| {}）。id constselector1 = `label [id = '$ {answerID}']` //ユーザーの回答を選択varanswerElem = answerContainer.querySelector（セレクター1）constセレクター2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector（selector2）//答えが正しい場合if（userAnswer === currentQuestion.correctAnswer）{ //正解の数に追加しますnumCorrect ++ //回答を緑色にします//console.log(answerElem）answerElem.style.background = '＃70F85A' answerElem.style.fontWeight = '900'} else {//回答の場合間違っているか空白です//回答を赤で色付けしますanswerElem1.style.color = '＃70F85A' answerElem.style.background = '＃FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers）}}） //合計結果から正解の数を表示Container.innerHTML = `$ {numCorrect} out of $ {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'）//クイズをすぐに表示buildQuiz（）const previousButton = document.getElementById（ 'previous'）const nextButton = document.getElementById（ 'next '）const slides = document.querySelectorAll（'。slide '）let currentSlide = 0 showSlide（0）//送信時に、結果を表示submitButton.addEventListener（' click '、showResult s）previousButton.addEventListener（ 'click'、showPreviousSlide）nextButton.addEventListener（ 'click'、showNextSlide）}）（）最後に、CSSを使用して、このゲームにさまざまなスタイルを追加できます。
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 {position：absolute left：0px top：0px width：100％z-index：1 opacity：0 transition：opacity 0.5s} .active-スライド{不透明度：1 z-インデックス：2} .quiz-container {位置：相対的な高さ：200pxマージン-トップ：40px}出力：
これらはいくつかのWeb開発プロジェクトでした。これで、この記事は終わりです。プロジェクトのさまざまなレベルを理解し、独自のWebページを作成し、ニーズに応じてそれらを設計する方法を理解していただければ幸いです。
JavaScriptループについて理解したので、 Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なウェブサイトを作成し、Amazon Simple Storage Service（S3）にデプロイする方法を学ぶのに役立ちます。
質問がありますか？ 「Web開発プロジェクト」のコメント欄にご記入ください。折り返しご連絡いたします。