【Web制作の独学日記】できるだけ毎日コーディングしよう｜物理・プログラミング・Python、Web制作・自己啓発

【Web制作のコーディング日記（15日目）】デイトラの続き！今日からSassを使ってみた。

こんにちは（@t_kun_kamakiri）。先月からWeb制作の勉強でもしようと結構気合を入れて勉強していたのですが、途中から失速して気を取り直して今日からまた再開しています('ω') ※今日は日記みたいなものなので、解説記事ではないです。毎日コーディング記録のつもりが、毎日コーディングできませんでした。。挫折ではなくて別のことをしていたので、一ヶ月ほど空いてしまいました！一ヶ月ほど空きましたけど、特に忘れているからと言ってはじめから復習することもせず、感覚が

【Web制作の毎日コーディング日記（14日目）】模写コーディング続き。フッター部分。

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング14日目となります。本日は模写コーディングの続きをしていきます。対象の模写サイトはこちらです☟ 本日の模写の進捗本日は20分くらいちょちょっとフッターの大枠だけ作成しました。フッター部分だけを作成しました。横並びにしていくのが少し手間なのですが、「display: flex; 」のを2回使って横並びにしています。（display: flex;　は一回だけで良かったかもしれません(;^

【Web制作の毎日コーディング日記（13日目）】要素の中央揃え。

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング13日目となります。毎日コーディングして、毎日noteに記録を書くと決めたら絶対やるのです(/・ω・)/ 本日は、初心者が混乱する中央揃えの練習をしたいと思います。ブロック要素の中身を中央揃えにするまずは、簡単htmlを書いていきます。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi

【Web制作の毎日コーディング日記（12日目）】模写コーディング開始

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング12日目となります。本日から模写コーディングを開始していきたいと思います。どのようなサイトを模写するかを選択するのが難しいですが、こちらのサイトからまずは選択して模写コーディングをしていきたいと思います。模写コーディングにおすすめなサイト👆こちらの記事から以下のサイトの模写を勧められていたのでさっそく模写をやり始めています。本日の模写の進捗本日から作成を開始して5時間くらいでこちらのサイ

【Web制作の毎日コーディング日記（11日目）】デイトラ DAY15終了

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング11日目となります。毎日、コーディングをしているので何となく感覚はつかんできました。今日やった内容は主に3つです。１．過去にHTML/CSSで書いたものをBootstrapで書きなおす（デイトラ課題）２．Booststrapで書いたものをHTML/CSSで書き直す３．ポートフォリオのテンプレートを探す（デイトラ課題）今日は、3つの課題をやっていました('ω') １．過去にHTML/

【Web制作の毎日コーディング日記（10日目）】デイトラ DAY13終了

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング10日目となります。本日は、デイトラの「DAY13」をやりました。以下のデザインをBootstrapでやろうって内容です。課題があったので、自分でいろいろいじっていたらめちゃくちゃ時間がかかってしまいました。作成時間：1時間独自課題：2時間感想としてはBooststrapのドキュメントを読んでいるとめちゃくちゃ時間がかかったという感じです💦 独自課題というのはデイトラで出されてい

【Web制作の毎日コーディング日記（9日目）】デイトラ DAY12終了

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング9日目となります。本日は、デイトラの「DAY12」をやりました。内容はBooststrapを使って以下のサイトを作ってみようって内容です。 Bootstrapで作成したもの本日作成したのはこれです。はい(^^♪ Boostrapなら30分くらいでできました。超・・・面白いです。というか、超簡単でした('ω')ノ【今日の気づき】送信ボタンを中央に揃えたい場合がたまにあります。

【Web制作の毎日コーディング日記（8日目）】デイトラ DAY9終了

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング8日目となります。日々の記録は☟マガジンにまとめています(^^)/ 今日行った練習課題は「デイトラ」の模写コーディングのレスポンシブ対応化をしてみました。 ☟はい、こんな感じ('ω')ノ僕は、いつも各領域を枠で囲みながらコーディングをしています。（初心者はお試しあれ！）枠はCSSに「border: 2px solid red;」とかでOKです。今日やったモバイル版がこちら('◇')ゞ

【Web制作の毎日コーディング日記（7日目）】ハンバーガーメニューを作ろう。

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング7日目となります。日々の記録は☟マガジンにまとめています(^^)/ 今日は、ハンバーガーメニュの基本的な作り方について練習しようと思います。 👆こういう動きをするやつですね。携帯とか画面幅が小さいときにつける動きです。これは初心者にとっては結構難易度が高そうですが、基本的なことを以下にまとめておきました。が、自分自身が初心者なので上手いコーディングではない可能性がありますのでお気づきの

【Web制作の毎日コーディング日記（6日目）】デイトラ DAY8終了

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング6日目となります。日々の記録は☟マガジンにまとめています(^^)/ 今日行った練習課題は「デイトラ」の模写コーディングです！ ☟はい、こんな感じ('ω')ノ各領域を枠で囲むことでスムーズにデザインをあてることができます。（初心者はお試しあれ！）枠はCSSに「border: 2px solid red;」とかでOKです。まだモバイル対応（レスポンシブ対応）の設定はしていませんが、上のような

【Web制作の毎日コーディング日記（5日目）】ナビゲーションが開く動き。

こんにちは（@t_kun_kamakiri）。本日は、毎日コーディング5日目となります。今日は、ナビゲーションを作って、マウスを乗せるとリストが展開される動きについてまとめたいと思います。 ☟こういう動きをするやつです。 ※ちなみにデザインはまだあてていないので見た目が悪いです。デザインについてのコーディングは明日の課題にしようと思います。土台となる「index.html」「style.css」index.html <!DOCTYPE html><html

【Web制作の毎日コーディング日記（4日目）】デイトラはじめました。

こんにちは（@t_kun_kamakiri）。毎日コーディングスキルを磨いています。今日は毎日コーディング4日目となります。マガジンを始めたので興味がある人は↓こちらをどうぞ(^^)/ 一緒に勉強しましょう。毎日コーディング勉強をします。参考書で学んでいたんですが、ちょっとなかなか理解できない部分が多く・・・一瞬挫折しそうになったので、思い切って↓こちらのオンライン教材を購入しました。 1日30分を目安に進めることでWEBエンジニアになるという教材です。

【Web制作の毎日コーディング日記（3日目）】PC用ナビゲーション作成。

こんにちは（@t_kun_kamakiri）。毎日コーディングスキルを磨いています。今日は毎日コーディング3日目となります。今日は以下のようなPCナビゲーションを作っていこうと思います。初心者の僕にとっては、これを作るのにめちゃくちゃ手間取りました(;^ω^) 基本的には、 ●ulタグ ●liタグ ●aタグで枠を作成していくのですが、「ulタグ、liタグ」タグはブロック要素、「aタグ」はインライン要素・・・なので、「text-align:center;

【Web制作の毎日コーディング日記（2日目）】スピード重視。

本日もWeb制作の勉強を進めていきます。前回のnoteで書きましたが、「毎日Web制作のコーディング練習を続けるとどれだけ上達するのか」という企画をやっています（個人的に）模写コーディングが絶対上達しますよね。 ↓まずはこの参考書のコーディング練習をしています。今日の課題はスピード重視今日やったのは昨日やったデザインと同じです。しかし、昨日は3時間も答えをカンニングしまくりながらやっと作った感じです。今日は何も見なくても1時間くらいでできました。若

【Web制作の独学日記】できるだけ毎日コーディングしよう

フォローしませんか？

記事一覧