MENTAの生徒さんにコーディングをアウトソージングした

webデザイナーの平尾誠です。
僕はMENTAでwebサイト制作を教えています。

表題の通り、生徒さんに実際の僕の案件を代わりにやってもらったら、すごく楽でした。
課題のつもりでお渡ししたのに、特に修正するとこもなかった。

だから、対価をお支払いもさせていただくことにしました。
今後も大丈夫そうなら生徒さんに仕事を渡していこうと思います。

その方に僕が伝えたことと、仕事を一緒にしやすい人をお伝えします。

MENTAで生徒さんにLPをコーディングしてもらった

ちょうどそろそろパートナーさんが欲しいなと考えていました。
すると、その中の一人がとても飲み込みが早かったので仕事をお願いしてみることにしました。

すると、あまりにもキッチリしたコーディングデータが上がってきてびっくりしました。
今後もこうやって仕事を渡していこうと思います。

僕から卒業しても、ビジネスパートナーとなってもらえると、とても頼もしいです。

MENTAでコーディング学習で教えたこと

クロスブラウザ対策

これは必ず伝えます。
今では昔ほど、CSSでレイアウトが崩れることも少なくなりました。
とはいえ、経験がすくない方は崩れるパターンを知らない。

これは場数を踏んでくると、崩れるCSSは最初から書かなくなります。

このサービスを使えば、ブラウザで対応しているCSSがわかります。

まずはクラス名を綺麗に

class名はかなり迷いますよね。
ただ、SCSSを使って書くことを考えると、最初から命名規則はこのようにしておくことをお勧めします。

.item
.item-wrap
.item-list
.item-list-link

このようにしておくことを推奨しています。
なぜならあとあと、SCSSで書く際に変数を使って管理することとなるからです。
こちらをSCSSでかくとこうなります。

.item {
    $this: &;
    &-wrap {}
    &-list {
        #{$this}-link {}
    }
}

こんな感じですね。
SCSSの使い方については過去に記事を書いていますのでそちらを参考にしてください。

SCSSを使って可読性をよくする

こちらも上記と同じで、可読性をよくする為に、ネストの機能は使いこなしましょう。

SCSSを使ってファイル管理をする

SCSSにはimport機能があるので、ファイルの管理は機能ごとにファイルを分けます。

Gitのバージョン管理を覚える

SourcetreeとBitbucketを使いましょう。
エンジニア同士の複数人でのソースコードの管理がとても楽になります。

この方が一番苦戦していたのは、このGitです。
でも、Gitを使えるようになってきたから、仕事をお願いできたというのは大きい。

webフォントの使い方

自分のパソコンの中にないフォントは、ブラウザに指定していても表示されません。
フォントの知識はとても複雑です。
webフォントを読み込んで使用する方法をお伝えしました。

まとめ

いずれも初学者がつまずきやすいポイントです。
私も教え慣れてきたので、どの順番で生徒さんにお伝えしていいかも把握できるようになってきました。

今も生徒さんを募集していますので、どうぞ興味がある方はメッセージをください。
お待ちしています。

ほなね

この記事の知識を動画講座で学ぶ