【Webデザイン】#1 コーディングの思考の流れ。練習サンプルで実際にやってみた。【参考】

以前、模写コーディング以上に簡単な練習用のデザインを作成し、記事にて公開しました。

webabc.hatenablog.jp

webabc.hatenablog.jp

今回はこちらのデザイン画像から、実際にどういった思考の流れでコーディングしていくかを解説していきたいと思います。

入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になっているかと思います。

高度な事を期待される方はご容赦ください。

模写含め、コーディングのやり方など最初の一歩につまづく方のお役に立てば幸いです。

では、やっていきましょう。

【Chrome拡張】ココナラビデオチャットに画面共有機能追加出来る拡張機能を開発しました。

ココナラで提供されているビデオチャット機能では現在画面共有の機能がありません。

「得意を売るならココナラ♪」のCMでおなじみ。

ビジネス、趣味、ただ話し相手になりますといったものでも売り買い出来るアプリ・サービス、ココナラ。

私のようなWeb技術のオンラインレッスンにはもちろん、ビジネスの相談、占い、手芸、様々な場面において、画面をシェアして一緒に見ながら話せるのと話せないのは大違いです。

そこで独自にココナラのビデオチャットに画面共有機能を追加するGoogleChrome拡張機能を作成しました！

coconala.com

【PHP】文字の置き換え、str_replace()と正規表現置換preg_replace()

WordpressやPHPのレッスンをしている際に文字の置き換えに関する質問を頂いたので、自分も少し調べつつメモ書き。

文字列の置換えの関数についての記事となっています。

特に正規表現を使った関数は非常に便利ですが、正規表現について私はうろ覚えでいつも調べながら使っているので備忘録として記しておこうと思います。

【コーディング練習用】スマホサイト版Webデザイン入門オリジナルデザインテンプレート

▼前回コーディング練習用のシンプルなPCサイトデザインテンプレートの公開記事を書きました。

webabc.hatenablog.jp

今回はそれに引き続き、そのデザインをレスポンシブでスマホ対応させたテンプレートを作りましたのでご紹介したいと思います。

よくある模写コーディングにおすすめのサイト以上に構造がシンプルになっていますので、是非Webデザイン入門、コーディング初心者の方のスキルアップにご活用頂ければと思います。

【コーディング練習用】Webデザイン入門オリジナルデザインテンプレート

このところWebデザイン入門用の記事を多く書いてきました。

模写コーディングの超初級サイト3選記事など、厳選してみて思ったのが、もっと入門用に最適なサイトはないかという事。

シンプルでミニマルかつ、自然と頻出タグなどが身につくようなサイト。。。

▼なるべく入門者に適したサイトをピックアップした記事です。

webabc.hatenablog.jp

探してみましたがご紹介したサイト以上のものはなかなかありませんでした。

そこで、無ければ作ってしまおうと。

今回はWebデザイン入門に最適なコーディング練習用のサイトデザインテンプレートを作成してみましたので、ご紹介します。

是非練習用にお役に立てれば幸いです！

【Chrome拡張機能】模写コーディングのやり方が分からない方へ…必須な拡張機能5選＋α

前回、模写コーディングおすすめサイトを初心者向けのレベルを目安に3サイト＋αご紹介しました。

▼なるべくボリューム少なく、コーディングの難易度がシンプルなものをチョイスしておりますので初めて模写挑戦するという方にはご参考頂きたいと思います。

webabc.hatenablog.jp

ただそれでも初挑戦するような方はやり方が分からないという人も多いと思います。

今回は模写コーディングをする上で役に立つ、必須ともいえるGoogleChromeの拡張機能を紹介させて頂きます。

これから模写コーディングに初挑戦するという方、行き詰ってる方のお役に立てれば幸いです。

ではやっていきましょう。