クリプト

完全素人のプログラミング【3】WEBデザイン

ちゅんちゅん's icon'
  • ちゅんちゅん
  • 2019/01/12 14:50
Content image

オープンβが開始されたということで、久々に記事を書いてみようかと思ったちゅんちゅんです。

実は完全素人のプログラミング【2】で次回(今回)のプログラミング系記事で、私が作成したWEBサイトを紹介しつつ、全くの初心者がWEBサイト制作のスキルアップを図るにはどうすればいいかを素人目線で書いていくと言っていたのです笑

ずいぶん時間があいてしまいましたが、ようやく重い腰をあげて書き始めた次第です。

さて、まずは先に私が製作したサイトを見ていただきましょう。

このサイトは私のポートフォリオサイトの雛形として製作しました。

かなり前に初めて製作したものなのでレスポンシブ非対応とか画面サイズによって要素の配置がずれるなどありますが、ご了承ください笑

どうやって全くの初心者がスキルアップしていくか、、、

先に結論を述べてしまいましょう。


ただひたすらに書籍や学習サイトを模写しまくる!!!

たったこれだけです笑

実際初心者向けの学習サイト(Progateドットインストール)などはハードルを極力下げてくれています。

だからゲームでクエストをこなすようにサクサクとできちゃうんです!

それが楽しくてプログラミングにハマって、

「よっしゃ!次は自分でWEBサイトやらアプリやら作ってみようかな!」

とまあこうなることは当たり前ですよね。

ゲームでも強くなってきたらどんどん上を目指していくのと同じです。

ですがここにF◯やらドラ◯エやらにありがちな強制敗北イベントが組み込まれているのです。。。

いざ自分でコードを書こうとすると、

「CSSが読み込まれない!」
「要素の配置がずれる!なんで!」
「displayのinlineとかblockとか知らんわ!」

なんて事態に陥ります。。。

実際ここで辞めてしまう人が多いのではないでしょうか。

私も最近までここに分類される人でしたので、同じ方がいるとすごく共感します。

そしてこれを回避する方法が

ただひたすらに書籍や学習サイトを模写しまくる!!!

ということになるのです。

模写のメリットはたくさんありますが、今回は3つほどご紹介したいと思います。


① よく使うコードが何かわかってくる

  →よく使うコードをメモしておけばコピペでサクッと書けるようになる

② 様々なデザインをサイトの目的に応じて適切なデザインを選べるようになる

  →書けば書くだけレパートリーが増えていく

③ CSSの仕組みがだんだんわかってくる

  →最初は上手くいかなくてめっちゃストレスですが、それを繰り返して上手くで

   きた時の達成感は半端じゃないです笑


模写することがスキルアップに直結すると言っても過言ではないと思います。

最初は1ページだけでもいいので、何か簡単そうなサイトをコピーする。

もしくはちょっと値は張りますが、丁寧に解説してある技術書などを買って、それを模写するのが近道だと私は思います。

じゃあ何買えばいいんだよという方に、



とりあえずこの3冊があれば簡単にでも作れるようになります!

あくまで私が

「入門書としての書籍はどれが自分に合うかわからないから3冊用意すべき」

という考え方だから3冊紹介しているだけなので、まずは1冊だけ買ってみて、もっと必要だと感じたら追加で購入するという形でも良いと思います!

ただし、本当にこれから始めるぞ!って方はProgateから始めた方が挫折しないと思います。

蛇足ですが、私自身の今年の目標は

「自分で案件獲得してLP製作に関わってスキルをレベルアップさせる!」

「本業とは別にプログラミングで月5万円は稼げるようになる!」

という2つを達成させるつもりで頑張りますので、私と同じような初心者の方はお互いに切磋琢磨しながら一緒に頑張っていきましょう!

それではまた!


公開日:2019/01/12
獲得ALIS:46.08
ちゅんちゅん's icon'
  • ちゅんちゅん
  • @chuncy3711
プログラミングの可能性という魔力に惹かれてふらふらと迷い込みました。美味い飯とかアイディアとか勉強した記録とか、その時の気分で好きなこと書こうと思います。

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

CoinList(コインリスト)の登録方法

Like token Tip token
15.55 ALIS
Eye catch
クリプト

【第8回】あの仮想通貨はいま「テレグラム-TON/Gram」

Like token Tip token
69.90 ALIS
Eye catch
クリプト

クリプトスペルズで入手したMCHCを引き出す方法

Like token Tip token
196.20 ALIS
Eye catch
クリプト

【DeFi】複利でトークンを運用してくれるサイト

Like token Tip token
54.01 ALIS
Eye catch
クリプト

【初心者向け】JPYCを購入して使ってみました!

Like token Tip token
30.03 ALIS
Eye catch
クリプト

2021年1月以降バイナンスに上場した銘柄を140文字以内でざっくりレビュー(Twitter向け情報まとめ)

Like token Tip token
38.10 ALIS
Eye catch
クリプト

バイナンスの信用取引(マージン取引)を徹底解説~アカウントの開設方法から証拠金計算例まで~

Like token Tip token
3.50 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
クリプト

コインチェックに上場が決まったEnjin Coin(エンジンコイン)コインを解説

Like token Tip token
21.49 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
121.79 ALIS
Eye catch
クリプト

Uniswap(ユニスワップ)で$ALISのイールドファーミング(流動性提供)してみた

Like token Tip token
59.99 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS