38からのWebエンジニア学習LOG【マガジン】

本

38才ママのフェニックスA子が、フリーランスでWebエンジニアを目指していく学習ログノートです。日々の学びを記録します。一緒に勉強していきましょう。最初の記事はこれ。 http… もっと読む

運営しているクリエイター: フェニックスA子

Webコーディングの写経から学べること【38Web-12】

余所のWebサイトをそっくりそのまま真似してコーディングしています。これを「写経」というようですが、どういうことを学びながらやっているのかまとめました。 38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。このnoteのファンだと言っていただけることがちらほら出てきて、やる気がでましたw ありがとうございます。 Webの写経をしている環境まず、唐突ですが画面狭すぎて死んだのでデュアルディスプレイにしました。【ハード環

Webの勉強を始めてを20日、Web制作会社と話したこと、今後の目標【38Web-11】

9月から本格的にWeb制作の勉強を始めて、20日が経ちました。Web制作会社の人ともお会いしたり、実際にWebを作っている人たちの話も聞くことができました。 38歳からWebエンジニアを目指している、フェニックスA子（@lipton_milk999）です。これまでやったこととこれからの予定のまとめ。 Web制作20日でやったこと20日といってますが、本を読むのはその前1週間くらいからやってました。・Web制作の本読了　HTML5+css3/Bootstrap4/j

フェニックスA子のポートフォリオWebできました【38からのWebエンジニア】

2018年9月から本格的にWeb制作をはじめた、フェニックスA子（@lipton_milk999）です。ついに、私のポートフォリオサイトができました（２作品目）。ランディングページ型のサイト。これからいろいろな試作品を増やしていく予定です。 ▼▼▼フェニックスA子のポートフォリオWeb▼▼▼ ちょっと、制作が追いついてなくて上のリンクに画像でないのが残念・・。ようやくツイッターカードを設定したとこなので、こういう細かい部分も作っていかねばですね。キャプチャを貼

フェニックスA子イラスト作品まとめ

色々あるので、描けるイラストタッチをまとめてみました。 38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。 Webエンジニアを目指していますが、とりあえずWebデザイナーのスキルから揃えてみようと思った理由の一つに、CG＋イラスト歴が実は20年という背景があります。イラストを売りにしているわけでないのであまりアピールすることもなかったのですが、せっかくなので作風をまとめます。マンガ絵（デフォルメ）＋車F1のイラストを書

Web制作2週間の成果(HTML5/css3/BootStrap4/jQuery)【38Web-10】【制作ログ】

9月から本格的にWeb制作の勉強を始めて2週間が経ちました。初めての制作サイトはV3.0までアップし、jQueryのフィルタ付きギャラリーを実装するまでに。こんにちは。38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。まずはWebデザイナーに必要なスキルから揃えています。 Web制作を始めて2週間8月末でライティングの仕事が切れたため、9月から1ヶ月みっちりWeb制作の修行を積んで、仕事を得られることを目標にしてます。 2

サンプルサイトv1.0！1日半でやっとcssコーディング完成【38Web-9】【制作ログ】

トップページのみですがサンプルサイトのv1.0（HTML5+css3）ができました。こんにちは、38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。 1日半〜2日かけてようやくcssコーディングができました。サンプルとして適当なとこにUPした。以下に、キャプチャ画像を貼ります。レスポンシブデザイン。 mobile版 PC版リンクなどはダミーなので下層ページはありません。次は同じものをBootstrap4で作

css初学者は実際のWeb事例から学ぶ方が効率が良いと知った話【38Web-8】【制作ログ】

cssを初めて組むにあたり、重い本を家に置いて来たのでググりながら打ち始めたのですが、これがめちゃ効率悪かった。基本は「本や実際の事例を真似して（写経）作るのが最も早い」ことを知りました。こんにちは、38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。前回はHTML5のマークアップまでをやりました。制作ログはこちら。今回はいよいよcssの中身に入るのですが、参考にしていた本が手元になかったんですね。スタバで作業しよう

Web設計を元にHTMLマークアップをやった【38Web-7】【制作ログ】

今日はこれまでのWeb設計を元にして、HTMLファイルを作るところまでをやりました。HTML5のマークアップは初の作業です。こんにちは、38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。 HTML5でマークアップするかつてHTML4の時代に手打ちしてたことはあるのですが、その時は思うがままにプレビュー押しながらタグ打ってたので、きちんとしたフロー手順でやるのは初です。 HTML5では、文書構造（アウトライン）を元にマークア

初学者のWeb制作でAdobeは必要？フリーランスと会社で違うかも。 - テキストエディタでもいけること【38Web-6】

Adobeを勉強で使いたいけどめっちゃ高い。フリーランスが目指すスキルと、Web制作会社に入り込む（バイトや社員）ために必要なスキルには、違いがあるのでは？と考え始めた。こんにちは。38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。 Adobeのツール（ここでは、PhotoshopとDreamWeaverの2つを話題にします）を使うかどうかで悩んでいます。だって、高いですからね・・。月割りで使えるようになったとはいえ、単

初学者が失敗から学ぶ、Web設計手順の細分化【38Web-5】【制作ログ】

今日はサンプルサイトのワイヤーフレームを元に、コーディング前のいろんな設計をしました。 38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。ここで「設計手順おかしくない？」と思った人もいることでしょう。そんなお話です。ワイヤーフレームで先にイメージをつけた（半分失敗）私はもともとHTMLやcssで趣味ページ（黒歴史サイト）やWordpressのブログを作っていたことから、なんとなく「サイトのイメージが先にできてしまう」ので

Mockflowでワイヤーフレームを作ってみた【38-Web4】【制作ログ】

今日はサンプルサイトの制作に着手をして、サイトマップ〜ワイヤーフレームまでをやってみました。こんにちは、38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。＊ところで、前回の私のノートが「編集部のおしらせ」に掲載されたと、はじめての通知がきました！やったー！ぜひご覧ください。ワイヤーフレームをどのように作るか迷ったのですが、サイトマップは普通に表計算ツールに羅列するだけ、そしてワイヤーフレームは「Mockflow」という

Web初学者がBootstrapとjQueryどちらから手をつけるか？＋サンプルサイト設計手順【38web-3】

こんにちは、38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。今日は写真の3つの本（HTML5+css3、Bootstrap、jQuery）を読み終えたので、その内容を整理しようと思います。書籍をもとに整理すると、簡単なWebサイトの製作の流れとしては、次のような流れになるかと思います。（ここでは下層ページは除いて、まずトップページのみについてまず整理）＜Webサイト（②からはトップページ）の製作の流れ＞① サイトマッ

Bootstrap4初学者だけど、使えそうな機能多いね？【38Web-2】

今日はBootstrap4の基本的なコンテンツ書式設定をやりました。こんにちは、38歳からWebエンジニア目指してるフェニックスA子（@lipton_milk999）です。 cssは使ったことあるんですが、Bootstrapは初めて。書式は「classから全部指定する」ということらしい。しかも装飾系は全部強制的に !important つけられてる。「そんなの多用したらクラスが書き散らかした感じになるし、クラスを付与してまとめて書式を設定する使い方と競合するので