はてなブックマーク

はじめに 今回は今まで自分が受講してきたUdemy講座の中で良かった講座を厳選してまとめました。 自分は新しい技術を学ぶ時はUdemyを中心に基礎をインプットし、何かしらの制作物を作って学んだ知識をアウトプットするように学習をしています。 そのためUdemy講座を選ぶ際は、基礎から網羅的に学べるものを受講するようにしています。 今回は自分が実務でも担当している「Web制作系」「フロントエンド系」「サーバーサイド系」で実際に受講して学びになった講座を解説も加えて紹介します。 今回紹介する講座は下記です。 1. ちゃんと学ぶ、HTML+CSS & JavaScript入門講座 2 .【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践 (Web制作) 3. CSSを効率的に書く！フロントエンドエンジニアのための「Sass」講座 (Web制作) 4. WordPress開発

(この記事は2022年2月に更新) 今回はフロントエンジニアとして働くまでに、自分が学習してきた中でよかった教材や学習法をロードマップ形式でまとめました。 本記事の主な対象者 ・HTMLとCSSを使った簡単なwebサイトは作成できる ・今後フロントエンジニアとして働きたい ・ 実務現場でも通用する土台を学びたい ・ ポートフォリオを作成したい 自分のエンジニアとしての簡単な実務経歴を紹介すると、 渋谷の自社開発系企業で、フロントエンジニアとして1年半程、働いています(現在進行形)。 主な使用言語は「React」「TypeScript」「Next.js」で、最近ではRailsを用いてバックエンド側の実装も担当しています。 自分は、今までに3つの新規プロジェクトと2つの既存自社サービス開発でフロント側の実装を行ってきました。 実際の実務現場を通して、自分が学習してきた中でよかった教材をロードマ

(こちらの記事は2021年8月に更新) ・ フロントエンジニアになるためにポートフォリを作成したい ・ 実務で使える技術を学びたい ・ お金をかけずクオリティーの高いアプリを開発してみたい この記事はそんな人に向けて書いています。 今回は、Twitterでもしばしば紹介している、『フロントエンジに向けのアプリ開発記事』を具体的な解説と共に、まとめました。 これから転職をする方や、インターンに応募する人が、ポートフォリオ制作をする上で、使えそうな記事だけを厳選し徹底解説をします。 ぜひこちらの記事で紹介したアプリを自分で手を動かして開発し、より実力を伸ばしてみてください。 基本的に『無料 × 技術力向上 × ポートフォリオ化』できそうなものだけを紹介します。 ✔︎ フロントエンジニア向けのアプリ開発4選 ・①【React×TypeScript】で簡単 TODOアプリ(Zenn) ・②【Rea

(この記事は2021年8月に更新されました) ・ CSS実装の効率化を測りたい ・ フレックスボックスに中々慣れられない ・ 実装する上で使えるカンニングペーパーが欲しい この記事はそんな悩みがある方に向けて書いています。 チート集というのは、プログラミングの実装でよく使われるコードが、わかりやすくまとめられているものです。 これによって効率的にコードの実装を進めることができます。 今回は、世の中にある4つの代表的なCSSのチート集を、使い方と学習法も合わせて解説していきます。 この記事を読めば、でネット上に散らばっている『主要CSSチート集を網羅的に知る』ことができます。 ✔︎ 本日のテーマ CSSチート集まとめ ✔︎ CSSチート集 ・① CSSセレクターチート ・② flexboxチート ・③ Sassチートシート ・④ Tailwindチートシート ① CSSセレクターチート集 初

(記事は2022年1月に更新) ・ 実装効率を上げたい ・ プログラミング学習の総復習をしたい ・ 世の中に溢れるチートシートを知りたい この記事はそんな方に向けて書いています。 チート集というのは、プログラミングの実装でよく使われるコードが、わかりやすくまとめられているものです。 チートシートを使うことで、効率的にコードの実装を進めることができます。 今回は世の中に出回っている、有益なチートシートを4選を使い方とともに紹介します。 この記事を読めば、でネット上に散らばっている『主要のプログラミング系チートシート』を網羅することができます。 過去にTwitterで紹介した、チートシートも徹底解説します。 全エンジニア必見✨ vscodeのショートカットがまとまってる『チートシート』。ショートカットを使うことで大幅に生産性上がるので重宝。最初はこれでカンニングしつつ、使っていく中で手で覚える

(こちらの記事は2021年12月に更新) ・ 実装の効率を上げたい ・ 幅広い実装パターンを学びたい ・ web制作&開発での実装パターンを増やしたい この記事はそんな人に向けて書いています。 プログラミングの実装において、実装パターンというものは豊富にあります。 例えばボタンだけでも、デザイン次第で幅広いパターンを作り出すことができます。さらに『モーダル』『カルーセル』『見出し』『アコーディオン』…他 というようにweb制作および開発をしていく上で、多数の実装パターンをある程度は知っておく必要があります。 そこで今回は、web制作および開発でよく出てくる、『実装パターンを効率的に学べるwebサービス』を3つ紹介します。 以前Twitterで紹介した際もかなりの反響を頂いたwebサービスを徹底解説します。 web制作においてJavaScriptで使う頻出の実装一覧が見れる『動くwebデザイ

(こちらの記事は2022年11月に更新) WordPress学習ロードマップ(2022年版) ・ WordPressってどの手順で学習していけばよいの？ ・ 教材が多すぎて、どれから手をつければよいのかわからない ・ 商材が高額でなかなか手が出せない この記事はそんな悩みがある方に向けて書いています。 今回はTwitterでも大きな反響を頂いた『3000円以内』できるWordPress学習法を徹底解説します。 WordPress案件を現場でやっている身から『案件でよく使う実装』も交えて解説します。 WordPress(WP)案件を行うまでに自分が使った学習教材と手順を図解でまとめました。 学習費用の総額『3000円』です。#駆け出しエンジニアと繋がりたい#プログラミング初心者 pic.twitter.com/aX1XWppukr — KAZUNARI | AI×ビジネス役立ち情報 (@Ma