専門学校でフロントエンドの講師をしています。その経験を生かしてサポートします！

HTML

文書構造を意識したシンプルなHTMLを学べるようにサポートします。

※ 近年ReactやVueなどのフレームワークが使われるようになり、企業のサイトなどでも
文書構造を意識したHTMLを書いているケースが少なくなっています。

HTMLを正しく理解することで、CSSのシンプルな理解に繋がります。
また就職にもアピールできるポイントになるかと思います。

• 文書構造を意識したHTML
• 見た目と構造を分けたHTMLの考え方

CSS

文書構造を理解したHTMLを書くことで、分かりやすくCSSを理解できるようにサポートします。

• flexboxを使ったレイアウト
• コンポーネント単位で作る考え方（React,Vueを意識した作り）
• AltCSSについて「最近良く使われているSassやPostcssなどの使い方」

Javascript, Node

現在Javascriptを使って様々なことができるようになりました。
Javascriptの基礎からフレームワークを使ったwebサービス、Nodeをつかったサーバーまでサポートします

• Javascriptの基礎
• jQueryについて（あまり最近は使われなくなりましたがその理由についてなども合わせて）
• フレームワーク（React, Vue, Nuxt, Next）を用いたシングルページアプリケーションの構築
• Nodeを使ったサーバー側の実装

実際の学習、専門学校で教えていること

1. HTMLとCSSをしっかりと覚える

フロントエンドエンジニアへになるには

https://www.mindmeister.com/1918186629?t=Xw005HtJ2g

HTMLについて

https://clover.blue/tags/HTML,CSS%E8%AC%9B%E5%BA%A7

• それを知識をもとにして、いくつか実際にあるサイトを模写

2. Javascriptの知識をつける

Javascript 講座

https://clover.blue/tags/Javascript%E8%AC%9B%E5%BA%A7

Javascript 問題

https://clover.blue/tags/Javascript%E5%95%8F%E9%A1%8C

• VueやReactを使ったフレームワークなどを使ってポートフォリオの作成
• スクール時にcss変えることによる、パララックス効果などの動くサイトの作成

デザイン

Photoshop・Figmaを使ったサイトデザインのサポート。

下記参考

• 自分のブログ（https://clover.blue/）
• ゆるチャット（https://yuru.blue/）
• 生徒用の課題「花を送る」（https://fullbloom.herokuapp.com/）
• 生徒用の課題「ポートフォリオ」（https://reverent-edison-eaa819.netlify.app/）