inflearn logo
知識共有
inflearn logo

レスポンシブりェブサむトポヌトフォリオ(App Official Landing Website)

レスポンシブりェブサむト・ポヌトフォリオApp Official Landing制䜜過皋は、HTML+CSS+JQUERYパブリッシングによるレスポンシブりェブサむト制䜜の党工皋を通じお、パブリッシング䞭玚レベルぞず進むための基瀎を固め、実戊パブリッシングのノりハりを習埗したす。特に、りェブサむト制䜜の党工皋を十分な解説ず実戊䜜業で経隓するこずで、個人ポヌトフォリオサむト制䜜ぞの自信が぀きたす。必須で䜿甚すべきjQueryプラグむンずしお、Scroll Reveal AnimationずSlickスラむダヌの䜿甚法を孊習したす。レスポンシブ制䜜の手法は、埓来方匏のfloatずpositionを利甚したレスポンシブレむアりト制䜜方匏で制䜜したす。ただし、特定の芁玠においおはFlexを䜿甚する郚分もありたす。

難易床 初玚

受講期間 無制限

HTML/CSS
HTML/CSS
jQuery
jQuery
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS
jQuery
jQuery
Responsive Web
Responsive Web

孊習した受講者のレビュヌ

孊習した受講者のレビュヌ

5.0

5.0

서병식

76% 受講埌に䜜成

コヌディングワヌクスの講矩䞭、本番サむト制䜜パヌトを3回目に孊習したした。 このレクチャヌの前にフレックスサむトの制䜜レクチャヌを聞いたので、floatは䜿甚せず、䞀床フレックスでレむアりトをキャッチしたした。 時間的な䜙裕があっおロゎも別々に䜜っおデザむンもそれなりに若干倉曎しお取っおみたした。 スリックスラむダヌの抂念を今回もう少し確実に぀かむようになりたした。 jsパヌトでも抂念敎理を少しもっず熟したようです。 アニメヌションが倚く、今回その郚分が特に印象深かったし、FAQパヌトでアコヌディオンの䜜り方、inputずlabelを぀なげおタップメニュヌの䜜り方なども私には倚くのお圹に立ちたした。 少し残念なのは、私が3840解像床のモニタヌで䜜業しおいるず思いたす。 メむン画面で瞊を90vhにしたずき、次の段萜であるceo accessず間隔があたりにも広がるこずになるずいう点。 たた、flexで䜜業をしたずき、巊右のアニメヌションになるず暪スクロヌルが発生し、画面が壊れ、画面䞊郚にfixedされたheaderが䞊䞋に隠れおしたうこずが起こりたした。 最初はスクロヌルが起こる原因を知らず、䞀日䞭゜ヌスを芋ながら頭を握った。 埌で芋るずそんな理由だったようです。 だからflexになっおいた郚分の䞭にアニメヌション関連するずころはすべおfloatに修正したずころ異垞はありたせん。 ずにかく情熱あふれる講矩はずおも感謝しおいたす。 垞に健勝を祈りたす。 ありがずうございたす

5.0

읎슬비

100% 受講埌に䜜成

最埌たで充実した講矩をよく聞かせおいただきたした。 初玚以䞊の実力になりたい方は必ず受講すべきほどカリキュラムがよくできおいたす。 䞭玚者が聞いおも充実した講矩だったず思いたすね。講矩がそれほど聞く䟡倀がありたす。 入門者、初玚者なら栞心理論講矩は必ず聞くべきです。䞍足しおいる郚分を補っおくれる感じでした。 埌に出おくるレスポンシブランディングペヌゞを簡単に぀いおいくためには、なおさら聞くべきだず思いたす。 ランディングペヌゞをする時も説明しおくださいたすが、それでも聞いおから進めればより簡単に理解できたす。 聞く人の違いはあるでしょうが、私が聞くにはちょうど良い講矩だったず思いたす。 説明をよくしおくださっお理解もよくできたしたし、実戊にも必芁な講矩でした。 ずおも圹に立ちたした。良い講矩をありがずうございたす。

5.0

a토링

75% 受講埌に䜜成

講矩受講前にはホヌムペヌゞ䞀぀䜜らなければならないずコヌディングをするず、ぜひ私の頭のように構造が出おこないピビトゥル抜きしおマヌゞンに-230pxを䞎えたがどこにいおもたたほがハンガゞにはめ合わせながら構造を䜜りたした。そしお、それからquot;あ〜私はフロントランが凧ではないかず思いたす〜の繰り返し........ 映像を芋るず党䜓的な絵もよく描かれお、講垫様が無限繰り返しを話しおくれるはずだから、聞いおみるず先生があんなに䜕を話すんだっおこずも分かるほどになるず思いたす。 たずえば、講垫はquot;子芁玠にfloatを䞎えたす。quot;ずいうコメントをするず、そのあずには無条件に付いおくるのがquot;子芁玠にfloat倀を䞎えたから芪芁玠が高さ倀を倱っおしたうので、芪にoverflow:hiddenを䞎える"ずいうのがほが毎~~~~~~~~~ 。このように別に芚えようずしなくおも、フロヌトにプルだけ出おも芪オヌバヌフロヌヒドンがこのマシンのように芚えるほど繰り返しをしおくれるので、構造がぎったり頭に入るようになりたす。 講矩の玹介によれば、孊習方法でセクション3ヘッダヌモバむル䜜業を楜に芋おほしいのですが、私も以前の講矩ではそうではなく、ただ結果物が出ればそれに満足をしたした。ころ講垫様のように䜜った結果物を芋お、私が䜜ったものず勘違いをするようになったんですよ 。ず蚀えば 。だから今回はただ心を空けお初めおはベッドに暪になっおも芋お、みかんを食べながらも芋お、掗濯しおも芋お、バスでも芋お pcの前に座っお芋た時も䞖の䞭快適な姿勢で芋たんですが..(..ㅎこれがたさにオンラむンのメリットじゃないですか) 聞いおみるず無条件に本人がよく分からない内容が出おきたした。そんなこずはたた聞くずもちろん気にしないかもしれたせんが、䞀床孊ぶずきに軜く~~にメモ垳を1぀入れおorpcで聞くならむンフラの右偎に手曞きするのに簡単なメモを添えお聞くずあたり眠くない(<s>睡眠の奎隷lt; / sgt;手が遊んでいたすないから芚えが良くなったんですよ。そしお、x27;講矩今日みんなでした〜x27;するず終わりで今日孊んだ内容の䞭で私が本圓に知らなかった内容がメモ垳に敎理が次々ずなるので、軜くスッず芋ながら理解し、埩習する時も楜です。 そしお、2回毒をする時は盎接コヌディングを入力しながら芋る時はあえお講垫様ず同じ速床で䜜るよりも、たず完成本写真+基本構造を芋お先に䜜っおみお、cssたっぷり入れおから、どのように講垫様ず違っお入れたかを比范しながら芋るのも楜しいず思いたす。そうすれば完党に私なのか、私が打者緎習だけしたのかよく分かるず思いたす。たた、こうすれば質問も質の良い質問が来るこずができるず思いたす。 2回毒を終えれば、耇数のサむトを芋ながらf12を抌さずに自分で䜜っおみるのもいいず思いたす。ずころが2回毒を終えれば(む・ゞョンガンの含む) どんなサむトたちは構造が目に入っお氷のようにたねる私の姿を芋るようになりたしたね 故に、時間に远われお䞀回毒に終わるよず思うよりも、1回毒は本圓に䞖界で䞀番楜な姿勢で芋お、2回毒で盎接コヌド入力する時は、どんどん残る蚘憶ず思いたす。ずにかく私のような愚か者もある皋床远い぀く講矩ずは、他の誰も挑戊する䟡倀のある講矩だず思いたす。 p.s) いや、ずころが、この川の初玚察象ずなっおいるのに、これ初玚映像なのでしょうか..?......

受講埌に埗られるこず

  • りェブサむトパブリッシング党䜓のスキルずノりハりの向䞊

  • 埓来の方匏であるfloatずpositionを利甚しお99%配眮したレスポンシブレむアりト

  • position属性の正確な抂念ず掻甚

  • hover before after checked active 擬䌌クラスの理解ず掻甚

  • ゞェむク゚リjQuery栞心理論の孊習および応甚

  • CSSタブメニュヌコンテンツ、JQUERYアコヌディオンメニュヌコンテンツの制䜜胜力

  • CSS3 filter 属性、object-fit 属性の掻甚

  • モバむル察応レスポンシブりェブパブリッシング制䜜胜力メディアク゚リ

  • PC版ずモバむル版で最適化されたレスポンシブりェブの党䜓制䜜胜力

  • Scroll Reveal Animation プラグむン

  • テキストタむピングアニメヌションプラグむン

  • Slickスラむダヌの䜿い方およびカスタムCSSの修正方法

レスポンシブりェブサむトポヌトフォリオ
(App Official Landing) 制䜜過皋

'蚈22時間以䞊のレスポンシブりェブサむトポヌトフォリオ講矩'
'栞心理論の授業ずレスポンシブりェブサむト制䜜過皋'
'パブリッシャヌ就職のためのレスポンシブポヌトフォリオホヌムペヌゞ制䜜コヌス'
'実務パブリッシングの真の実力のためのハヌドコヌディング授業'
'9時間以䞊の必須jQueryプラグむンの䜿甚方法およびCSS必須栞心理論動画'
'珟職パブリッシャヌ兌パブリッシング専門講垫の䞁寧で䜓系的な授業'

 


📔 レスポンシブりェブサむトのポヌトフォリオ制䜜過皋の特城

01) 玔粋なCSSレむアりト配眮方匏で䜜るレスポンシブりェブサむト

02) クロヌンサむトやコピヌサむトではなく、CodingWorksが盎接UIデザむンからパブリッシングたで制䜜したりェブサむト

03) 講矩セクション別14段階のステップ別完成版ずUIデザむンPSDファむルを提䟛
※ フォトショップUIデザむンはPhotoshop CC 2019バヌゞョンで制䜜されたした。

04) 合蚈22時間以䞊の制䜜講矩

05) 理論孊習ず制䜜のためのテキスト゚ディタ
今回のレスポンシブりェブサむト制䜜講座で䜿甚されたテキスト゚ディタは、Visual Studio CodeずBracketsです。もちろん、他のテキスト゚ディタを䜿甚しおも問題ありたせん。受講生の方が䜿い慣れたテキスト゚ディタを䜿甚しおください。ただし、リアルタむムプレビュヌ機胜がないテキスト゚ディタは、孊習を進めるのが倧倉かもしれたせん。

06) スムヌズな制䜜過皋の孊習に䞍可欠な栞心理論動画(Slick Slider, Reveal Animation)
レスポンシブりェブサむトのポヌトフォリオ(App Official Landing Website)制䜜講矩を陀き、jQueryプラグむンの䜿甚方法や制䜜に䞍可欠なCSS理論など、9時間以䞊の栞心理論講矩動画がありたす。これらの動画を芋ずに実践制䜜セクションに進むず、぀いおいくのが倧倉かもしれたせん。[セクション 2. 必須jQueryプラグむンの䜿甚方法およびCSS必須栞心理論]で、聞き慣れなかったり䞍足しおいるず思われる内容を十分に孊習しおから進んでください。


💡 PCレむアりト セクション切り替え プレビュヌ(Preview)

💡 Mobile レむアりト UI/UX プレビュヌ(Preview)


🙋🏻‍♂ è¬›çŸ©å—講のための事前知識

今回のレスポンシブりェブサむト制䜜の難易床は、入門たたは初玚の方には難しいです。受講レベルは䞭玚、あるいはそれに近いレベルであれば、スムヌズに付いおくるこずができたす。少なくずも自分は初玚ではないず思っおいる方であれば、進める䞊で倧きな困難はないず考えおいたす。

受講のための事前知識ずしおは、HTML+CSSに関する基本的な内容を理解しおいれば倧䞈倫です。だからずいっお、HTML+CSSを完璧に䜿いこなせる状態である必芁はありたせん。20時間を超える講矩の䞭で、䜙裕を持っお十分に説明しおいたす。もし動画を芋ながら受講生の方のコヌディングが远い぀かず、HTML+CSSの䜜成が遅れおしたう堎合は、動画を止めおHTML+CSSの䜜成を終えおから、次のステップに進んでいただければず思いたす。

動画を止めおコヌディングをしたりするため、他の人より少し時間が必芁なだけです。むしろ、萜ち着いお自分でコヌディングする時間を持぀ずいう面では、その方が良いです。あたり心配せずに、䞀緒に勉匷しおいきたしょう。 ^^

私の講矩の䞭に'HTML+CSS+JQUERY ポヌトフォリオ䞭玚実戊パブリッシング講矩'がありたす。この講矩にある理論内容ず実戊䟋題の制䜜内容に、今回のレスポンシブりェブサむト制䜜に必芁な内容がほがすべお含たれおいたす。぀たり、HTML+CSS+JQUERYの基瀎を確実に固めるこずができる講矩だず思いたす。

今回のレスポンシブりェブサむト制䜜においお、いく぀かを陀いおは'HTML+CSS+JQUERYポヌトフォリオ䞭玚実戊パブリッシング講矩'の内容を1回皋床孊習しおから進めおいただければ、よりスムヌズに理解できるず思いたす。

結論は 

入門や初玚でなければ぀いおくるのは問題ありたせんが、少し倧倉だず感じられるかもしれたせん。
他の講矩を通じおHTML+CSSの基本を身に぀けおこられたのであれば、十分に぀いおこられるだけでなく、なぜこのようにするのかずいう理解を持っおレスポンシブりェブサむトの制䜜過皋を終えるこずができるず思いたす。


📕 効率的な孊習のためのコヌディングワヌクスの孊習方法の提案

孊習方法は人それぞれ異なるず思いたす。そのため、正解はありたせん。しかし、経隓者であり制䜜者が考える効率的な孊習方法は存圚するず考えおいたす。そこで、コヌディングワヌクスが考える効率的な孊習方法を提案したす。

[ステップ1]
セクション3からセクション16たで、党䜓の制䜜過皋を実習なしで映像を最初から最埌たで芋たす。 (12時間を超える制䜜過皋なので、ただ芋るだけでも簡単ではありたせん。ですので、移動䞭や食事䞭などに気軜に芋おください。ただ䜕を䜜るのか、どのような順序で䜜るのか皋床を泚目しお芋れば倧䞈倫です。)

[ステップ2]
ステップ1を行うず、どの郚分に理論が必芁か、どの郚分に準備が必芁かが自然ず分かるようになりたす。そうすれば、そのような郚分を完璧にではなくおも、制䜜に必芁な理論事項をある皋床孊習したす。基瀎レベルの方でなければ、セクション2「必須jQueryプラグむンの䜿い方およびCSS必須栞心理論」に動画を甚意しおありたすので、䞍足するこずはないず思いたす。ただし、擬䌌クラス、セレクタなどHTML+CSSの必須の理論事項は、CodingWorksのYouTubeチャンネルで勉匷しおください。

[ステップ3]
セクション3から動画をじっくり芋ながら実習を進めおください。 事前準備が十分に敎っおいるので、぀いおくるのがずっず楜になるず思いたす。

[ステップ4]
映像ず䞀緒にレスポンシブりェブサむト党䜓の制䜜を終えたら、提䟛されたフォトショップPSDファむルを開き、UIデザむンを自分なりのテヌマを決めお修正しおください。レむアりトに倧きな倉曎は加えず、既存のレむアりトを郚分的に修正しお個人ポヌトフォリオのUIデザむンを完成させおください。

[ステップ5]
制䜜したUIデザむンを基に、PPTで機胜定矩曞ずHTML構造を䜜成し、実践パブリッシングを進めお完成させおください。これで、あなただけのデザむンポヌトフォリオずパブリッシングポヌトフォリオが完成したす。


🙋🏻‍♂ 講矩に関する予想される質問ず必読事項

Q. 制䜜䟋を進める䞭で出おくる䞭玚CSS理論の解説動画はありたすか
A. 「制䜜䟋を䜜っおいたすが、基瀎理論に出おこなかった䞭玚理論がたくさん出おきたす。䞭玚理論のレッスンはどこで受けられたすか」ずいう質問が掲瀺板によく寄せられたす。

珟圚のコヌスは、初玚パブリッシングの䟋題制䜜を行うコヌスではありたせん。初玚〜䞭玚のパブリッシング䟋題を制䜜するコヌスです。そのため、CSSの初䞭玚理論はある皋床理解しおいる必芁がありたす。ずいっおも、必ずしも完璧に理解しおいる必芁はありたせん。CSSの初䞭玚理論は、䟋題を制䜜しながら継続的に繰り返したす。たた、CodingWorksのYouTubeパブリッシングチャンネルに「[䞭玚理論] CSS䞭玚理論」ずいう再生リストがあり、䟋題制䜜に必芁な必須の䞭玚理論動画が詳しく甚意されおいたすので、珟圚のコヌスを受講しながら䞭玚理論を䞊行しお孊習するこずをお勧めしたす。

▲ コヌディングワヌクス YouTube チャンネルはこちら

Q. この講座を受講すれば、実務でパブリッシャヌずしお働けたすか
A. この講座にあるパブリッシングの内容をすべお理解し、うたく掻甚できるのであれば可胜です。しかし、パブリッシングずいうのは十分な経隓ず、倚様な皮類のりェブサむトを制䜜した経隓があっおこそ実務で働くこずができたす。本講座のような講矩をあず数個孊習し、りェブサむト制䜜の党工皋をいく぀か経隓すれば倧䞈倫だず思いたす。もちろん、個人のポヌトフォリオサむトの制䜜も必芁です。パブリッシングの参入障壁は思ったより高い方です。動画を䞀床芋ただけで、その内容やノりハりがすべお身に぀くわけではないので、前述した孊習方法を通じお自分のものにするプロセスを倧切にしおください。

Q. りェブサむトを制䜜しながら出おくる理論を説明する理論パヌトが別にないようですが
A. 今受講されおいるコヌスは入門、初玚コヌスではなく、䞭玚レベルのレスポンシブりェブサむト党䜓の制䜜パブリッシング講矩です。基本理論パヌトず実践䟋題制䜜の孊習は、他のコヌスを通じおスキルアップされるこずをお勧めしたす。

Q. 孊習䞭に分からないこずがあったら、どこに質問すればいいですか
A. 質問がある堎合は、[質問回答] 掲瀺板に投皿しおいただければ、確認次第すぐには難しい堎合もありたすが回答いたしたす。たた、質問はできるだけ具䜓的に䜜成しおください。質問が具䜓的でない堎合、十分な回答を差し䞊げるこずが難しくなりたす。そのため、質問される際は、気になる内容ずずもに、䜜成䞭のHTML、CSS、JQUERYのコヌディング画面をキャプチャしお添付しおいただければ、よりスムヌズに回答できたす。

Q. 講垫の授業の䞭で <パブリッシャヌ就職 ガチ実践ガむド>を先に芋たほうがいいでしょうか
A. パブリッシングスキルをさらに習埗するこずも重芁ですが、たずはパブリッシャヌずしおの基本を身に぀けるこずが優先されるべきです。パブリッシャヌ就職実践ガむド電子曞籍(PDF)では、パブリッシングの基本ずは望たしいコヌディング習慣ず原則、経隓者のようにパブリッシングする方法など、パブリッシャヌずしお必ず知っおおくべき内容を现かく敎理したした。パブリッシャヌ就職実践ガむド電子曞籍(PDF)を先に読み、パブリッシングの基本に察する理解を十分に深めおから孊習されるこずをお勧めしたす。䞋の画像をクリックするず、授業の玹介内容をご芧いただけたす。


▲ パブリッシャヌ就職のためのコヌディングワヌクス・パブリッシング講矩ロヌドマップ

 

❀ コヌディングワヌクスの受講生から届いたパブリッシャヌ合栌の知らせ


▲ 囜費支揎パブリッシング課皋で私から4ヶ月半ほど孊んだ孊生ですが、就職したずカトクLINEが届きたした。


▲ コヌディングワヌクスの個人ポヌトフォリオ制䜜オフラむン講座の受講生から、面接・就職結果のLINEをいただきたした。(2023.4.24)

 


❀ コヌディングワヌクスの受講生がパブリッシャヌずしお就職埌に送っおくださったメヌル

 

先生、こんにちは :)

先生のInflearnの講矩を受けおいた孊生の金O正です。
今幎の倏、個人ポヌトフォリオに぀いおアドバむスをいただこうずメヌルを差し䞊げた孊生です。
芚えおいらっしゃいたすでしょうか笑

ほかでもありたせんが、
先生にアドバむスをいただいたポヌトフォリオで、パブリッシャヌずしお就職に成功したずいう報告をしたくおメヌルを送りたした

しかも
求人サむトサラムむンに茉せおいたポヌトフォリオを芋お䌚瀟偎から先に連絡があり、Zoomで面接を受けお合栌したした
䌚瀟偎では垌望幎収を考慮しおくれたしたし、デザむンや開発業務を行わない、本圓にパブリッシャヌずしおの業務だけに専念できる䌚瀟に入るこずになりたした。

経隓者パブリッシャヌを募集しおいる䌚瀟でしたが、新人である私に連絡が来たので、なぜ私に連絡をくださったのかず尋ねたずころ、
他の人たちのポヌトフォリオもたくさん芋たけれど、私のポヌトフォリオにあった「機胜定矩曞」が目に留たっお連絡したずのこずでした。

これらすべおは先生の講矩のおかげだず思っおいたす。
先生の講矩を聞いおいなければ、私もやはり平凡なポヌトフォリオになっおいたはずですが、先生が教えおくださったコツのおかげで就職に成功するこずができたした

盎接お䌚いしたこずはありたせんが、
ポヌトフォリオを䜜成しおいる間、先生の講矩を芋ながらずおも励たされ、信頌しお䞀生懞呜䜜りたした

塟で長い時間授業を聞きながら積み䞊げた実力よりも、先生の講矩を聞いおポヌトフォリオを䜜った3ヶ月間のほうが、実力が栌段に䞊がったず実感しおいたす。

切実に願い、
先生がおっしゃった通りに信じお取り組んだずころ、本圓に良い結果が出たした。

本圓にありがずうございたした

コロナにお気を぀けお。
たた良い講矩でお䌚いしたいです :)


先生、こんにちは〜。Inflearn受講生のOOOです〜。メヌルアドレスは他の受講生ぞの回答を芋お知りたした笑

感謝の気持ちをお䌝えしたくお。

これたで先生の講矩を受講し、2週間ほど履歎曞を出しながら苊劎もしたしたが 
ある䌚瀟から面接合栌をいただき、出勀するこずになりたした。本圓にありがずうございたす 涙

実は私が32歳ずいうこずもあり、䞍安が倚かったです。履歎曞をたくさん送ったのですが、なかなか連絡も来ず  
ですが、この䌚瀟の採甚担圓者の方は、自分はスクヌル出身者はあたり奜きではないずおっしゃっおいたした笑
私が入瀟するこずになった䌚瀟は芏暡は小さいですが、開発者もいおりェブデザむナヌもいたす。
3ヶ月間教育を受けおから実務に投入されるずいう圢匏でした。
距離も少しあり、幎収も䜎い方ではありたすが  䞀生懞呜孊んで幎収を䞊げおいこうず思いたす〜笑

これたで本圓にありがずうございたした。質問にも䞁寧に答えおくださり、こうしおオンラむンで講矩を受けお就職が決たったので、ずおも䞍思議な気持ちです。

これからも先生の講矩を聞きながら、さらに実力を高めお勉匷しおいきたす。ファむト〜

 

🙋🏻‍♂ 質問する前に必ず読んでください〜

孊習䞭に気になるこずがあれば、質問しおください。質問される際は、うたくいかない内容ずコヌド、そしおブラりザの結果画面のキャプチャをアップロヌドしおいただく必芁がありたす。コヌドに぀いおは、HTML、CSS、JSのコヌドをすべお茉せおいただければ、正確な回答を差し䞊げるこずができたす。

質問文にコヌドがなく文章だけで問題を説明されるず、非垞に簡単な内容でない限り、正確な回答を差し䞊げるこずが難しくなりたす。そうなるず、私が「HTML、CSS、JSのコヌドずブラりザのキャプチャをアップロヌドしおください〜」ず再床返信せざるを埗なくなり、結局解決策を埗るたでに手間ず時間が䜙蚈にかかっおしたいたす。


▲ 該圓講矩コミュニティの「よくある質問」をたず確認しおください〜

 


⚡ åŠ¹æžœçš„ãªå­Šç¿’ã®ãŸã‚ã«ã€ãœã²ïŒã‚³ãƒŒãƒ‡ã‚£ãƒ³ã‚°ãƒ¯ãƒŒã‚¯ã‚¹ãƒ»ãƒ‘ãƒ–ãƒªãƒƒã‚·ãƒ³ã‚°ã®YouTubeを参考にしおください。

コヌディングワヌクス・パブリッシングのYouTubeチャンネルで、理論の動画講矩を䞊行しお芖聎するこずをお勧めしたす。もちろん、すべおの理論動画がYouTubeチャンネルにあるわけではありたせんが、重芁な理論動画はほずんど揃っおいたす。動画の数が倚いので、動画を探す際は以䞋の䟋のように怜玢するのが良いでしょう。

コヌディングワヌクス パブリッシング YouTubeチャンネル https://www.youtube.com/codingworks

 

👚🏌‍🏫 講垫玹介

  • 珟圚フリヌランス フロント゚ンドパブリッシャヌ
  • ザ・ゞョりンコンピュヌタアカデミヌ りェブパブリッシング講垫
  • むれンコンピュヌタヌアカデミヌ りェブパブリッシング講垫
  • フロント゚ンドパブリッシャヌ、フロント゚ンドパブリッシング専門講垫
  • むれンコンピュヌタヌアカデミヌ りェブデザむン技胜士 実技資栌察策クラス
  • ラクピアICTトレヌニングセンタヌ フロント゚ンドパブリッシングマスタヌコヌス講垫
  • むゞ゚ン゚デュフロント゚ンドパブリッシング、UI/UXデザむン
  • HTML+CSS+JQUERY パブリッシング YouTube チャンネル 'コヌディングワヌクス' 運営
  • ⚡ コヌディングワヌクス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks

面接ず就職を勝ち取るパブリッシャヌ個人ポヌトフォリオホヌムペヌゞ制䜜、scss、sass、flex、grid、html、css、html/css、website、りェブパブリッシャヌ、パブリッシャヌ就職、りェブサむト、コヌディング、coding、jquery、javascript、ゞェむク゚リ、JavaScript、レむアりト、むンタラクティブりェブ、interactive web、web design、りェブデザむン、ポヌトフォリオ、パブリッシング、レスポンシブりェブ、りェブデザむン技胜士実技詊隓、bootstrap、ブヌトストラップ、css frameworks、フレヌムワヌク

こんな方に
おすすめです

孊習察象は
誰でしょう

  • りェブサむト制䜜の党工皋を経隓したいパブリッシャヌ

  • パブリッシングの基瀎を掻かした実践的なりェブサむト制䜜を垌望する方

  • パブリッシングの個人ポヌトフォリオサむト制䜜が必芁な方

前提知識、
必芁でしょうか

  • HTML+CSSの基瀎コヌディング胜力

こんにちは
codingworksです。

13,037

受講生

782

受講レビュヌ

2,122

回答

4.9

講座評䟡

23

講座

■ [珟圚] 囜費パブリッシングフロント゚ンド講垫
■ [珟圚] フリヌランス フロント゚ンドパブリッシャヌ
■ [珟圚] HTML+CSS+JQUERY パブリッシング YouTubeチャンネル「コヌディングワヌクス」運営
■ グリヌンコンピュヌタアカデミヌ りェブパブリッシング講垫
■ ザ・ゞョりンコンピュヌタアカデミヌ りェブパブリッシング講垫
■ むれンコンピュヌタアカデミヌ りェブパブリッシング講垫
■ フロント゚ンドパブリッシャヌ、フロント゚ンドパブリッシング専門講垫
■ UI/UX りェブデザむンポヌトフォリオ講矩
■ りェブデザむン技胜士実技資栌クラス講矩
■ むヌゞヌ゚デュ フロント゚ンド UI/UX デザむンおよびパブリッシング

 

🌏コヌディングワヌクス Inflearn 講矩䞀芧 - https://www.inflearn.com/users/@codingworks
🌏Inflearn コヌディングワヌクス 講矩孊習順序孊習ロヌドマップ - https://www.inflearn.com/blogs/2351
🌏コヌディングワヌクス Inflearn パブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs
🌏コヌディングワヌクス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks
🟣Inflearn In-focus コヌディングワヌクス むンタビュヌを芋る : https://www.inflearn.com/pages/infocus-8-20230704

もっず芋る

カリキュラム

党䜓

108件 ∙ (23時間 47分)

講座資料こうぎしりょう:

授業資料
講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

32ä»¶

5.0

32件の受講レビュヌ

  • suhbyungsik1535님의 프로필 읎믞지
    suhbyungsik1535

    受講レビュヌ 3

    ∙

    平均評䟡 5.0

    5

    76% 受講埌に䜜成

    コヌディングワヌクスの講矩䞭、本番サむト制䜜パヌトを3回目に孊習したした。 このレクチャヌの前にフレックスサむトの制䜜レクチャヌを聞いたので、floatは䜿甚せず、䞀床フレックスでレむアりトをキャッチしたした。 時間的な䜙裕があっおロゎも別々に䜜っおデザむンもそれなりに若干倉曎しお取っおみたした。 スリックスラむダヌの抂念を今回もう少し確実に぀かむようになりたした。 jsパヌトでも抂念敎理を少しもっず熟したようです。 アニメヌションが倚く、今回その郚分が特に印象深かったし、FAQパヌトでアコヌディオンの䜜り方、inputずlabelを぀なげおタップメニュヌの䜜り方なども私には倚くのお圹に立ちたした。 少し残念なのは、私が3840解像床のモニタヌで䜜業しおいるず思いたす。 メむン画面で瞊を90vhにしたずき、次の段萜であるceo accessず間隔があたりにも広がるこずになるずいう点。 たた、flexで䜜業をしたずき、巊右のアニメヌションになるず暪スクロヌルが発生し、画面が壊れ、画面䞊郚にfixedされたheaderが䞊䞋に隠れおしたうこずが起こりたした。 最初はスクロヌルが起こる原因を知らず、䞀日䞭゜ヌスを芋ながら頭を握った。 埌で芋るずそんな理由だったようです。 だからflexになっおいた郚分の䞭にアニメヌション関連するずころはすべおfloatに修正したずころ異垞はありたせん。 ずにかく情熱あふれる講矩はずおも感謝しおいたす。 垞に健勝を祈りたす。 ありがずうございたす

    • codingworks
      知識共有者

      受講評ありがずうございたす〜

  • taes11014397님의 프로필 읎믞지
    taes11014397

    受講レビュヌ 5

    ∙

    平均評䟡 5.0

    5

    75% 受講埌に䜜成

    講矩受講前にはホヌムペヌゞ䞀぀䜜らなければならないずコヌディングをするず、ぜひ私の頭のように構造が出おこないピビトゥル抜きしおマヌゞンに-230pxを䞎えたがどこにいおもたたほがハンガゞにはめ合わせながら構造を䜜りたした。そしお、それからquot;あ〜私はフロントランが凧ではないかず思いたす〜の繰り返し........ 映像を芋るず党䜓的な絵もよく描かれお、講垫様が無限繰り返しを話しおくれるはずだから、聞いおみるず先生があんなに䜕を話すんだっおこずも分かるほどになるず思いたす。 たずえば、講垫はquot;子芁玠にfloatを䞎えたす。quot;ずいうコメントをするず、そのあずには無条件に付いおくるのがquot;子芁玠にfloat倀を䞎えたから芪芁玠が高さ倀を倱っおしたうので、芪にoverflow:hiddenを䞎える"ずいうのがほが毎~~~~~~~~~ 。このように別に芚えようずしなくおも、フロヌトにプルだけ出おも芪オヌバヌフロヌヒドンがこのマシンのように芚えるほど繰り返しをしおくれるので、構造がぎったり頭に入るようになりたす。 講矩の玹介によれば、孊習方法でセクション3ヘッダヌモバむル䜜業を楜に芋おほしいのですが、私も以前の講矩ではそうではなく、ただ結果物が出ればそれに満足をしたした。ころ講垫様のように䜜った結果物を芋お、私が䜜ったものず勘違いをするようになったんですよ 。ず蚀えば 。だから今回はただ心を空けお初めおはベッドに暪になっおも芋お、みかんを食べながらも芋お、掗濯しおも芋お、バスでも芋お pcの前に座っお芋た時も䞖の䞭快適な姿勢で芋たんですが..(..ㅎこれがたさにオンラむンのメリットじゃないですか) 聞いおみるず無条件に本人がよく分からない内容が出おきたした。そんなこずはたた聞くずもちろん気にしないかもしれたせんが、䞀床孊ぶずきに軜く~~にメモ垳を1぀入れおorpcで聞くならむンフラの右偎に手曞きするのに簡単なメモを添えお聞くずあたり眠くない(<s>睡眠の奎隷lt; / sgt;手が遊んでいたすないから芚えが良くなったんですよ。そしお、x27;講矩今日みんなでした〜x27;するず終わりで今日孊んだ内容の䞭で私が本圓に知らなかった内容がメモ垳に敎理が次々ずなるので、軜くスッず芋ながら理解し、埩習する時も楜です。 そしお、2回毒をする時は盎接コヌディングを入力しながら芋る時はあえお講垫様ず同じ速床で䜜るよりも、たず完成本写真+基本構造を芋お先に䜜っおみお、cssたっぷり入れおから、どのように講垫様ず違っお入れたかを比范しながら芋るのも楜しいず思いたす。そうすれば完党に私なのか、私が打者緎習だけしたのかよく分かるず思いたす。たた、こうすれば質問も質の良い質問が来るこずができるず思いたす。 2回毒を終えれば、耇数のサむトを芋ながらf12を抌さずに自分で䜜っおみるのもいいず思いたす。ずころが2回毒を終えれば(む・ゞョンガンの含む) どんなサむトたちは構造が目に入っお氷のようにたねる私の姿を芋るようになりたしたね 故に、時間に远われお䞀回毒に終わるよず思うよりも、1回毒は本圓に䞖界で䞀番楜な姿勢で芋お、2回毒で盎接コヌド入力する時は、どんどん残る蚘憶ず思いたす。ずにかく私のような愚か者もある皋床远い぀く講矩ずは、他の誰も挑戊する䟡倀のある講矩だず思いたす。 p.s) いや、ずころが、この川の初玚察象ずなっおいるのに、これ初玚映像なのでしょうか..?......

    • codingworks
      知識共有者

      aトヌリング様受講坪に本圓に入念で詳现ですね。 前もありたせんでしたが、これからもこんなに長くお詳现な受講評はないようです。^^ 努力するほどすぐに良い結果があるでしょう。ファむティング

  • mmm3n50119님의 프로필 읎믞지
    mmm3n50119

    受講レビュヌ 6

    ∙

    平均評䟡 5.0

    5

    44% 受講埌に䜜成

    音も抱きしめお䌚瀟で、、、、ずおもおおたかな流れだけpcバヌゞョンたで芋たした 本圓に流れだけ知っおいる... 今、講矩ちゃんず芋ながら埓っお、芋おいない、どれだけ倉わっおいるのか気になりたすね。埌で䞀番䞋に修正したす。

    • codingworks
      知識共有者

      lololoさん久しぶりですね。珟職デザむナヌですね。退勀しお倧倉だから週末にじっくり䞀段階䞀段階映像芋ながらフォロヌしおみお

  • flowerkong31662님의 프로필 읎믞지
    flowerkong31662

    受講レビュヌ 5

    ∙

    平均評䟡 5.0

    5

    81% 受講埌に䜜成

    これたで聞いたどんな講矩よりも、実力向䞊に圹立぀優秀な講矩です。理論ず実習の䞡方を理解しやすく、講垫は本圓に本圓に説明を䞊手にしおください講垫、本圓にありがずうございたしたアップロヌドされる講矩の皆さん、聞きたい皋床で満足床が高いです。 ^^

    • codingworks
      知識共有者

      mmさんこんにちは 講矩が圹に立ったのは本圓に嬉しいですね。 コヌディングワヌクス他の講矩も関心をお寄せいただきありがずうございたす。 勉匷したしょうか、ご質問があれば質問しおください。

  • hkgb0009님의 프로필 읎믞지
    hkgb0009

    受講レビュヌ 1

    ∙

    平均評䟡 5.0

    5

    90% 受講埌に䜜成

    頑匷成功したした。もずもず基瀎知識もあっお5日で頑匵っおしたいたすね。

    • codingworks
      知識共有者

      スンフンはすでに頑匵っおいたしたか講矩が䞊がっおから䞀週間しかできたせんでしたが、熱心に頑匵りたしたね。今回䜜業したこずを倉曎しお、個人のポヌトフォリオにしたらいいず思いたす。 受講埌ありがずうございたす〜^^

codingworksの他の講座

知識共有者の他の講座を芋おみたしょう

䌌おいる講座

同じ分野の他の講座を芋おみたしょう

ï¿¥7,902