WEBエンジニアを目指すアラサーOLの日常

どこにでもいるアラサーOLがWebエンジニアになるまで

次に何をするか迷う日々

Udemyの講座の受講が終わりました。

HTMLとCSS、レスポンス対応について少し知識が付きました。

でも、知識も経験もまだまだ足りません。

 

WEB制作を1人で営業から制作まで行うことがゴールなのですが、道のりが長いです。というか道すら見えません…

 

どうしようかな~とYouTubeを見ていたらしょーごログさんの動画にたどり着きました。

 

www.youtube.com

 

0から勉強してフリーランスになっている方の実体験は本当に参考になります。

 

shogo-log.com

 

 

上手くいっている人の真似をするのが早く成長するコツなので、この通りに学んでいきたい!Progateはずいぶん前にやったので、デイトラで学びたいな~!でも、10万か…私にとっては高い…><

 

2月の給料が振り込まれたら、デイトラに申し込もうと思います。

給料日は毎月26日です。

現在、2月14日(月曜日)なのであと2週間位待とうと思います。

 

その2週間ぶらぶらしているのも何なので

しょーごログさんが販売している課題をやっていきたいと思います。

shogo-log.com

 

こちらは込み込みで1万位と良心的な値段。

 

ちなみに、営業方法も知りたくてこちらも購入してしまいました。

note.com

 

 サラッと読んだのですが、営業のかけ方やポートフォリオの見せ方など詳細に載っていて、とても勉強になります。

 

案件獲得する営業力が何よりも大事だと思う一方、そこまでの営業力もないので技術的な能力も身に着けていこうと思います!

 

 

ついに終わりました~!

本日ついにセクション12まで終わりました。

  • セクション1 - WEBサイトのしくみ
  • セクション2 - HTMLとCSSの基礎
  • セクション3 - htmlとcssの文法
  • セクション4 - CSS Grid Layoutの基本
  • セクション5 - iPadProサイズページの制作
  • セクション6 - iPhoneサイズページの制作
  • セクション7 - レスポンシブWEBデザイン
  • セクション8- Mejiroサイトのレスポンシブ化
  • セクション9 - indexページの制作(1)
  • セクション10 - indexページの制作(2)
  • セクション11 - contactページの制作
  • セクション12 - 野鳥観察会ページの制作

 

講座を通して、サイト作成の流れを一通りつかむことができました。

この後はひたすら模写をしたいところですが、ちょっとまだ早い気もするので、サイト作成の別の講座を受けようと思います。

 

とりあえず、受講終わって良かったです!

 

順調に進んでます

毎日コツコツ進めてます。

セクション10まで終わりました。

 

WEB関係の仕事をしているので「レスポンシブサイト」の存在は知っているのですが、

実際にレスポンシブ対応のサイトを作る方法は知らなかったので学びが多いです。

グリットレイアウトの1frという概念や、%で表示をさせる方法などなるほどな~って思います。

スマホサイズとタブレットサイズの境目となるブレイクポイントのことなど学びが多いです。

 

 

セクション10まで終わりました。

この講座はセクション12までなので、残り2セクション!

  • セクション1 - WEBサイトのしくみ
  • セクション2 - HTMLとCSSの基礎
  • セクション3 - htmlとcssの文法
  • セクション4 - CSS Grid Layoutの基本
  • セクション5 - iPadProサイズページの制作
  • セクション6 - iPhoneサイズページの制作
  • セクション7 - レスポンシブWEBデザイン
  • セクション8- Mejiroサイトのレスポンシブ化
  • セクション9 - indexページの制作(1)
  • セクション10 - indexページの制作(2)
  • セクション11 - contactページの制作
  • セクション12 - 野鳥観察会ページの制作

まずは一巡目やってみる~!

 

まずは受講します

1日1・2セクション受講して、今日まででセクション7まで終わりました。

この講座はセクション12までなので、残り4セクション!

  • セクション1 - WEBサイトのしくみ
  • セクション2 - HTMLとCSSの基礎
  • セクション3 - htmlとcssの文法
  • セクション4 - CSS Grid Layoutの基本
  • セクション5 - iPadProサイズページの制作
  • セクション6 - iPhoneサイズページの制作
  • セクション7 - レスポンシブWEBデザイン
  • セクション8- Mejiroサイトのレスポンシブ化
  • セクション9 - indexページの制作(1)
  • セクション10 - indexページの制作(2)
  • セクション11 - contactページの制作
  • セクション12 - 野鳥観察会ページの制作

 

一巡目は講座を受けてサイト制作の流れを掴んで、二巡目は学んだことをまとめて知識を固めたいと思います。

(1巡目の受講の後にすぐに2巡目をするか、少し間をおいて2巡目をするかは悩みますが…飽きない方法でいきます)

 

 

検証モード

検証モードって凄いなって思います。

1つのWebサイトを作成するのに凄い時間がかかっているはずなのですが、それを検証モードで見ることでサイトの構造を見れて自分も模倣出来ちゃうってホントすごいなって感じます。

 

飲食店で例えるなら、無料でレシピ大公開しているみたいなもんだな~って。

パクリ放題なのかな~って。

 

模倣が簡単ということはWebサイト制作だけの価値ってそんなになくて、どちらかというとクライアントのサービスに適したWebサイトを提案できるかの企画・提案力、サイト作成後のアフターサービス、例えばWeb集客のコンサルティングやデータ分析、サイトの保守などで他社との差別化を図っていく必要があるんだなって思いました。

まずはフロントエンジニアを目指す

f:id:mojamojablog:20220128121118p:plain

 

まずはフロントエンジニアを目指して頑張ろうと思います!

フロントエンドの業務も色々あると思いますが、まずはサイト制作から初めていきます。

 

学習方法

Udemyの講座を受講して、サイト作成の仕組みを学んでいます。

頭の良い人は本やネットで習得できると思いますが、私は丁寧に教えてほしいタイプなので動画で学習していきます

 

受講する講座

今回はこの講座を受講します。

f:id:mojamojablog:20220128114517p:plain

 

 

 

 

サーバーサイドはいったん保留にするの巻き

f:id:mojamojablog:20220128113952p:plain本日はターミナルの操作を学習していきます!

 

今までマウスでフォルダを作成してきましたが、ターミナルでもパソコンを操作できるらしい!(初心者)

 

さっそくやってみる!

 

フォルダーを開いて、ファイルを作成

f:id:mojamojablog:20220128112754p:plain

f:id:mojamojablog:20220128113011p:plain

反映されて喜ぶ(笑)

ディレクトリを作成

f:id:mojamojablog:20220128113056p:plain

f:id:mojamojablog:20220128113109p:plain

 

ディレクトリの下にファイルを作成する

f:id:mojamojablog:20220128113201p:plain

f:id:mojamojablog:20220128113225p:plain


cpを使ってコピーをする

f:id:mojamojablog:20220128113337p:plain

f:id:mojamojablog:20220128113325p:plain



ディレクトリの複製

f:id:mojamojablog:20220128113408p:plain

f:id:mojamojablog:20220128113426p:plain

 

ディレクトリを移動をする

f:id:mojamojablog:20220128113456p:plain

 

ディレクトリを消す

f:id:mojamojablog:20220128113534p:plain

 
ファイルを消すとき

f:id:mojamojablog:20220128113628p:plain

 

 

次はAWSの操作なのですが、私のレベルが初心者過ぎて怖いのでこの講座はいったん保留にしようと思います。

(知らない間にAWSのサーバーが使われて、多額の請求がくるみたいなことが怖い)

 

サーバーサイドって難しいなって学べたので良かったです(笑)

 

 

ターミナルを準備していく

f:id:mojamojablog:20220118120624p:plain

本日はターミナルの準備をしていきます

 

Terminal(ターミナル)とは…コンピューター操作するための端末のこと

 

 

らしいです。

 

 

正直なんのこっちゃですが、

言われた通りに進めていきます。

 

インスタンスでサーバーを立ち上げでコマンドでコンピューターを操作していきます(キリッ)

 

ターミナル準備の方法

 

準備の流れはこちら↓

  1. Ubuntu をインストール
  2. Windows Terminal をインストール
  3. WindowsTerminalの起動時の設定変更
  4. test-server.pemをUbuntu側で利用できるようにする
  5. Windows上からUbuntuの中のファイルを参照する
  6. VSCodeの起動
    1. vscode の拡張をインストール
    2. Ubuntuから開く

 

 

 

さっそくubuntu(うぶんつ)をインストールしていきます。

 

その前にLinux用の機能を有効化してます

f:id:mojamojablog:20220118121614p:plain

Ubuntu をインストール

f:id:mojamojablog:20220118121344p:plain

おしりににバージョンが記載されていないものをダウンロードするらしい

 

無事に起動したら、ユーザーネームとパスワードを設定します

黒い画面にそのまま打っていきます

f:id:mojamojablog:20220118121648p:plain

 

一通り設定が終わったら

 

スタートアップを開いて、

起動時に開くものをubuntuにします

 

f:id:mojamojablog:20220118121956p:plain
Windows Terminal をインストール

f:id:mojamojablog:20220118122229p:plain


本日はここまで~