初めて架空のwebサイトを制作してみた
皆さんこんにちは！みゆぱかです(*'ω'*)
プログラミング初心者の私が初めて自分で架空サイトを作ってみたので、どんな感じでやったかと、感想を記録で残そうと思ってnoteを書くことにしました。
つくったサイト↓(TOPページしかありません)
自分の今のレベルとしては、一か月程度ドットインストールやProgateで基本的なHTML/CSSを学んで、後はデイトラさんや、スキプラさんの以下のnoteで模写コーディングの練習をしたという感じです。
(ちなみにどちらの教材も無料。。。すごい。。。。。( *´艸｀))
Twitterで見ていると、いろんなサイトの模写練習をしている人もいるのですが、自分はオリジナルのサイト早く作ってみたい！！！！！と思ったので、とりあえずやってみよう！の勢いで今の段階で架空のサイトを考えて作ることにしました( ^)o(^ )ちなみに制作期間は4日程度です。
自分の手順は以下の感じでした。
①テーマを決める
まずはどんなサイトを作るかですよね。
よくある企業サイト！とかいろんな選び方があると思うのですが、自分が好きなもので作ったらテンション上がる！！と思って、「アルパカ」を使ったものにしようと決めました。アルパカ使うなら牧場かな！という感じで、アルパカのいる牧場のwebサイトを作ることに。
➁参考サイトを見てみる
つくるのは牧場サイトと決めたので、牧場とか農園とかのwebサイトを探してみてみました。サイト全体の雰囲気とか、載せている情報とかを参考にしました。
アルパカと言えばここ！( ^^) _U~~
まとめてくださっていたのでここからも色々見てみました。
③サイトの構成を決める
参考サイトや今までの学習を参考にどんな感じの構成にするかを決めていきました。基本的な構成で作ろうと決めていたので、上に固定のヘッダーメニューがあって、その下に大きな画像があって、その下に情報やお知らせを載せて、最後にフッター。。。という感じで決めていきました。
④HTML&CSSをごりごりコーディング！
作るものを決めたらもうごりごり作っていきました。うまくいかなかったら今まで勉強してきたところを復習したり、ググったり。。。この繰り返しですね。③で決めた構成に沿って要素を箱で書き出してそれを見ながらやっていました。先ほど紹介したスキプラさんのnoteで学んだのですが、このやり方おすすめです！
⑤jQueryを使ってサイトを少しリッチにしてみる
④で基本的なサイトは完成しているのですが、JSも使って動的にしたい！という思いがあったのでjQueryライブラリを使って、サイトを手軽に少しだけリッチにしてみることにしました。
今回はハンバーガーメニューを作るために「drawer.js」、トップの画像をスライドショーにするために「bgswitcher.js」というライブラリを使用させていただきました！便利で簡単でいい感じ！ライブラリすごい。。。
また、これらのを使うにあたり以下のサイトを参考にしました。
⑥微調整、テキスト入力
レスポンシブ対応をしたのでモバイル表示の時の調整とか、ダミーテキストを実際にありそうな文章にしたりとかしました。ダミーテキストのままでもいいんですけど、どうせなら実際のサイトっぽくしたいなと思ったので( *´艸｀)参考サイトを見て文章は大体決めることができました。
⑦公開！
いろんな方法があると思うのですが、Githubを今回は使って公開することにしました。Progateさんに解説があります。
できたサイトはこちら↓
感想など
勢いで始めましたがどうにか作ることができました！初心者感が強めのサイトですができたことが嬉しい。今回は作り切ることを第一目標にしていたので自分で自分を許容します( *´艸｀)
コードが汚いとかクラス名がよくないとか、サイズの指定をpxじゃなくて%でやりたいとか、デザインが崩れてる？とか反省点はあるので、色々考えながらまた2つ目の制作に挑戦したいなと考えています。今はアプリ紹介のお洒落なLPとか作ってみたいなーと考えています($・・)/今回とは違う動きを使ったりもしてみたい！わくわく！
制作のアドバイスとか質問とかあれば、
コメントやTwitterでくださるととても嬉しいです(*'ω'*)それでは！
みゆぱか(@miyupacaaa)
この記事が気に入ったらサポートをしてみませんか？