【毎朝1時間】プログラミング初心者のオヤジが、Web制作とセールスライティングを学んで、案件をゲットするまでのブログ

コーディングの知識がほとんどないオヤジが独学で仕事をゲットするまでの日記です。目標は、売れるLPを企画からデザイン、コーディングまでできるオヤジです。

模写

#codestep 入門編PhotoBook 精読まとめ

今日は、codestepの入門編photobookの精読を行いました。 code-step.com 以下に、学習ポイントをまとめておきます。 html h1にsite-titl →すべてにid/classをつける 幅600のinnerは各sectionにつける css このflexの仕方はおぼえるべし 参考サイトはこちら …

#codestep 入門編profile:精読まとめ

一行ずつをしっかり理解しながら進めていく模写を、勝手に精読と呼んでいます。 html wrapのかけかた。私はmainvisualを挟んで上下2箇所にdivでかけたけど、模範解答はsectionごとにclassでかけてた h1/h2/h3をどこまでかけるのか?今回section titleぐらい…

#codestep入門編Photobook2まとめ:疑問点はhtmlとbodyのfont-sizeの決め方

code-step.com 先週末からPhotoBook2のコーディング模写をしてきました。昨日終わりましたのでまとめておきます。 HTML 今回のhtmlコーディングでは div class=containerとして、全体の枠(1000px)を作り、その中で位置取りをし div class=innerで、もうひと…

#codestep htmlにfont-size:100%を書く意味ある?と思ったら、あったw

codestep photobook2を精読しています。 徹底的に理解してやろう!と思っています。 CSSのアタマに「html font-size:100%」って入っていますが、 100%なら書く必要ある? と思って調べてみましたん。 shinkufencer.hateblo.jp maku77.github.io

#codestep入門編「フォトサイト2」H1の上部の余白は、<body>で設定するのか?<header>で設定するのか?

このトップ画像は、codestep入門編のデモからお借りしました。 code-step.com h1のPHOTOBOOK2の上部の余白についてです。 模範解答では、 bodyにmargin-topが設定されておらず、 body内のheaderにmargin-topが設定されていることで、上部に空白ができていま…

模写の体制立て直しだ

今月は模写をワシャワシャやるぞ~と思っていたけど、今のところあまり効率的じゃない。 体制立て直しだ。 一つ目は、模写して学んだことはきちんと整理する 二つ目は、毎日必ずやる 三つ目は、どんどん調べる、質問する 頑張っていこう

#codebigin 課題1の3ページ目:あんまり難しくない

youtu.be 課題1の4ページあるうちの3ページめをやりました。 あんまり難しくない。 僕が成長したわけでなく、課題がやさしい。

#codebigin 課題1about pageのhtmlを作る

さて、今日は課題1の2ページ目aboutページに入ります。 今日はhtmlを書いてみました。 1ページ目を踏襲している部分も多いのですが、新しい要素も入っていて、いい教材です。

#codebigin 課題1CSS見直し:border-radius?

課題1については、「歯が立たない」ということはなく、「なんとなくできる」というかんじ。 課題は2つ 画像のborder-radiusがぎこちなく、理由がわからなかったのですが、模範解答にあるbody全体へのclassにmax-with1400とあり、それをつけたらキレイな輪…

#codebigin 課題1に突入しました

今日は夕方、どうしてもコーディングがしたくて、codebiginの課題1に取り組み始めました。 本当ならTeckCamp終わらせてからと思っていたのですが、できるだけはやくいろいろなサイトのコーディング体験をしたいと思っています。 今日はいつものように、いっ…

#codebigin 「Position absolute と Position relative」

codebiginで指定されているテックキャンプのCSS講座を見進めています。 Position ablsoulteとrelativeは、以前からあやふやだったので、この機会に復習しました。 起点がどこか、ということはわかりましたよ。 このサイトの説明が、わかりやすかったです。 u…

#codestep入門編フォトサイト:できあがりました!が…

www.youtube.com codestepの入門編にありました、「フォトサイト」を作ってみました。 なにも見ないで作れるはずはなく、 とりあえず自力で作ってみる 解答を見て、理解する もう一度自力で作ってみる の順に作業をしています。 前回の「プロフィールサイト…

#codestep 入門編フォトサイト もう一度白紙状態からできるところまでやる

昨日はdt/dlのmarginでひっかかったけど、親切に教えていただいてクリア。 教えて頂きありがとうございました。 今日は、リベンジを兼ねて、白紙状態から再度作成しました。 @meda前までは、完成した模様。 今日参考にしたサイト saruwakakun.com

#codestep 入門編フォトサイト:ddとdlについて教えていただけませんか

code-step.com codestepの入門編2つ目「フォトサイト」をはじめました。 構成が難しくないように見えましたが、さすがにそうはいきません。 途中まで順調に進んできたのですが、dd/dlで挫折しました。 お手本では、こういうサイトができあがるはず、なので…

朝の初コーディング(もどき)が楽しかったので、もう一つやってみた

www.youtube.com 今朝このブログの記事にしたcodestepさんの入門コーディングが楽しかったので、午後もう一つやってみました。 これはドットインストールの「実践!アプリ紹介ページを作ろう」という授業のものです。 dotinstall.com 荒削りなこともなんとな…

html/css模写計画:5月第2週はこちらから始めてみます #codestep

こちらのサイトが、とてもていねいに書かれているので、参考にさせていただきます。 code-step.com 模写ルール フォトの種類やカラーにはこだわらない。→ディベロッパーツールで調べてもいいが、細かいところはあわせなくてもよい 細かいマージンやパディン…