web制作でProgateから実務までにやるべきこと【具体的なロードマップ付き 】
ฝัง
- เผยแพร่เมื่อ 29 ส.ค. 2024
- web制作でProgateやドットインストールの次にやるべきことを解説しました。
2021年になり内容を少しアップデートしているので最新版は是非ブログ記事を御覧ください!→shogo-log.com/...
チャンネル登録はこちら→→→ / @user-ck5re4rk5q
ーーーhtml本ーーー
■1冊ですべて身につくHTML&CSSとWebデザイン入門講座
amzn.to/31k4Pvu
ーーーコーディング初級編ーーー
■ちづみ コーディングの練習をしよう!〜その1〜 〜その2〜
note.com/chizu...
■しょーご 模写コーディング練習でHTML,CSSを定着させよう!【初級編】
note.com/samur...
■クリ★スタ コーディング課題〜初級編〜
crestadesign.o...
ーーーjQuery,Sassーーー
■jQuery標準デザイン講座
amzn.to/3eAf0ja
■Web制作者のためのSassの教科書 改訂2版
amzn.to/2ZaXuf4
ーーー模写中級編ーーー
■しょーご コーディング練習用のXDデザインカンプ配布します
note.com/samur...
■クリ★スタ コーディング課題〜上級編〜
crestadesign.o...
■CSS設計完全ガイド
amzn.to/2BfGf45
■私がブログ、テスト環境に使用してるサーバー
px.a8.net/svt/...
ーーーphp,WordPress編ーーー
■WordPressレッスンブック 5.x対応版
amzn.to/2BcAHaF
■ビジネスサイトを作って学ぶWordPressの教科書 Ver. 5.x対応版
amzn.to/2CL624H
■【卒業制作】コーディング × WordPressテーマ化 練習素材【※実案件です】
note.com/tokyo...
■【上級】XDデザインからのコーディング演習【WordPress実案件レベル】
note.com/samur...
━━━━━━━━━━━━━━━━━━
★私が公開している鬼レビュー付きコーディング教材★
━━━━━━━━━━━━━━━━━━
デザインカンプよりコーディングできる教材を販売しています。
全6つで【HTML初心者からWordPress実務レベル】まで網羅しています。
更に、現役エンジニアのレビューを各課題2回、無料で受けることが可能です。
✅コーディング教材説明ページ
shogo-log.com/...
✅コーディング教材販売ページ
shogo-log.com/...
■Web制作会社への営業に特化した講座販売中!(制作会社にインタビューしてきました)
note.com/samur...
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
━━━━━━━━━━━━━━━
人気の動画3選
━━━━━━━━━━━━━━━
①web制作フリーランスとして初案件を獲得するまでにやったこと【今ならこうするも解説】
• web制作フリーランスとして初案件を獲得する...
②プログラミング、webデザインに最適なパソコンの選び方【現役エンジニアが解説】
• プログラミング、webデザインに最...
③【2020年】現役エンジニアの語るWordPressのおすすめ勉強法
• 【2020年】現役エンジニアの語るWord...
◉私のホームページ制作の営業パートナーを募集しています。報酬をお渡ししますので、
副業にどうぞ!詳しくは↓
shogo-log.com/...
━━━━━━━━━━━━━━━
しょーごログおすすめ記事!
━━━━━━━━━━━━━━━
▼web制作、プログラミングでのモニター導入がおすすめすぎる件【かなり満足】
shogo-log.com/...
▼web制作フリーランスになって読んだおすすめの本17冊を紹介!【プログラミング、webマーケティング、webデザイン】
shogo-log.com/...
■しょーごのプロフィール
大学時代に何もせず終活前に絶望。
その後中国・フィリピン留学に行き、一年で中国最高級のHSK6級、4ヶ月でTOEICは450→840点に。
新卒で銀行に入行するも、すぐに退職。
現在はフリーランスのエンジニアとして毎月80万ほどを稼ぎつつ、転々としています。
◆ブログ◆しょーごログ
shogo-log.com/
◆Twitter◆@samuraibrass
/ samuraibrass
-----------------------------------------------------------------------
使用機材
-----------------------------------------------------------------------
■ 編集機材兼仕事道具
MacBookPro16インチ(amzn.to/2Da9JBa)
■ 音声
ZOOM iQ7(amzn.to/2YWhTpd)
■ 自撮り棒
amzn.to/3e5RZDW
#模写コーディング
#プログラミング
#web制作
#フリーランス
#ポートフォリオ
#エンジニア
【追記】2021年、22年版Web制作独学ロードマップを公開しました!
th-cam.com/video/4zfmATgWcRY/w-d-xo.html
2021/10追記 最新情報はブログより参照お願い致します。
shogo-log.com/after-progate/
ブログも参考になるかもしれません。追記はこちらに載せていきます shogo-log.com/after-progate/
最近Progateで勉強し始めました!
他の方は正直、
すぐ案件取れて稼げる!とか
いくら稼げる!
みたいな刺激的な言い回しの解説とロードマップの購入導線な感じがあって逆に何すべきか混乱していました。
しょーごさんの解説では案件を撮ろうとするまでのインプット部分の細かい流れまで説明して頂きとても参考になりました!
ロードマップでお金取るのは情報商材っぽくなるのでやらないですね笑
あと稼げる系の発言は飽和してるので、僕は具体的ノウハウの方をこれからも更新していく予定です!
等身大で聞きたい部分が網羅されている素晴らしい30分でした。背中をみせてくれて感謝です。
動画拝見しました!ここまで具体的なロードマップを語っている動画は中々無いと思います。
成長している実感が無いまま勉強していましたが、このロードマップで勉強していこうと思います。
超有料級動画ありがとうございます。
半年くらい独学でやっていましたが、もっと早く知りたかった,,,
最近何をやろうって思ってたので頑張ります。
頑張ってください!
フリーランスに憧れてはいますが、家族がいたりローンがあったりすると、やはり難しいですよね。
今更ながらもっと若いうちにフリーランスをいちどでも経験しておけばよかったと後悔しています。
初見です。述べられているようなスキルに到達できるような具体的な再現できる手法が解説していただけるから素晴らしい。ありがとうございます
自分の現在地もよく分からなくて、どこまで何を学習すべきかも分からなくなって行き詰まっていました。この動画のお陰でモチベーションがグンと上がりました。早速ロードマップに沿って学習していきます!ありがとうございました😆
しょーごさんのロードマップを始めて2週間ほどです!Manaさんのテキストを進めているのですが、すごく分かりやすいです!今のところ、毎日楽しんで続けられてます!ありがとうございます!
ありがとうございます!頑張ってください!!
独学で紆余曲折してる者です😖しょーごさんの動画分かりやすくて勉強になります☺この通り進んでみます✨
ありがとうございます!
HTMLCSSの本持ってます!
かなり分かりやすいし、スクールの先生も絶賛していました。
オシャレです✨
スクールの先生というのが誰か気になりますね笑
ありがとうございます✨
今Progate道場コース上級をやってます。この後どうしようか迷っていたので凄く助かりました!この通りに進んでいきます!ありがとうございます😊
頑張ってください!
プロゲートが終わり何個か模写した段階で次に何をすればいいかで手が止まってしまってました。
この動画を見て次に何をすべきかわかった気がします、ありがとうございます。
人柄がいいと感じます。リンクから本買わせていただきます。ありがとうございます
丁寧な解説動画ありがとうございます。これから勉強しようと思っていた初心者ですが、具体的なロードマップを提示いただき大変ありがたいです。情報を参考に学習を進めていきたいと思います!
Progateのオブジェクト指向のところで分からなくなり、モチベーションが低下していたところだったので、お話を聞いて気が楽になりました!
ご説明されているロードマップで初めから仕切り直してみます。
有益な情報ありがとうございます!!
オブジェクト指向は最初から理解は無理ですw クラス=設計図ってなんやねん、インスタンス=実体とは?という。正直自分でいきなり書くより、WordPress触りつつ理解したほうがいいですね。WordPressされるつもりなら、WP少しわかってくると、実は多くのクラスで成り立っていることがわかってくるので。そういう感じで大丈夫です。
@@user-ck5re4rk5q はい、まさになんやねんという感じでしたw そうおっしゃっていただくとWPに触れるのが今から楽しみです。とりあえずロードマップを進めていこうと思い、概要欄からjQueryの本を購入しました。これからも勉強して、まずは月数万円稼げるようにがんばります。コメントありがとうございました。
Web制作までのロードマップ参考にさせて戴きます☺️
頑張ってください!
TH-camはターゲット初心者向けの広い層に向けられたコンテンツが多いので、ここまで具体的なロードマップを公開してくださってとても助かっています!
もしよければ、このプログラムを完走したあとの案件獲得までの具体的なやり方を教えていただけないでしょうか?お願いします!!🙏
ありがとうございます!営業面も今後動画を出していきます!
具体的でわかり易かったです…!!
少しずつですが力がつくようにロードマップを参考にがんばります!!
頑張ってください!👍
今までこの動画を見つけられなかった自分に喝!です。
これほどまで具体的に説明していただいている動画を私は知らなかったので感激でした。今からでもこのロードマップ通りに突き進みたいと思います!
本当にありがとうございます!
知りたい情報が沢山で大変勉強になりました。学習、実戦頑張ります!
知りたい事を知りたいように動画にして下さり、
ありがとうございます!
これからも宜しくお願いします!!
ありがとうございます!
ロードマップ通り歩いていきます!ありがとうございます!
良い動画ありがとうございます
かなりプログラミング挫折中です。
おまけに、swiftやCGにも浮気心がでてきてなにをやりたいかわからなくなってます。
しょーごさんのロードマップ参考にさせていだきます。
こらからも動画楽しみにしています。
「プログラミングを学んでなにをしたいのか」を最初に決められるといいですね!多少不安定でも短期で稼ぎたいならweb制作、長期的にエンジニアとしてがっしり仕事していきたいなら就職転職を見据えて勉強するといいかなと。このロードマップを完走できればweb制作系の会社に入るスキルは十分な感じです。
とても具体的なロードマップありがとうございます
しょーごさんのご提案通りのロードマップで学習進めてます!プログラミング35歳限界説を覆したいですw
最初になにをどうしたらいいか1番分からないと思ってた部分を凄ーく分かりやすく解説して下さってるのでとっても助かりました!座席しないように頑張ります(ง ˙o˙)ว
嬉しいコメントありがとうございます!2021年バージョンを近々公開予定になりますので、お待ち下さい!(最新版は既にブログの方で公開しております→shogo-log.com/after-progate/)
どうすれば良いか悩んでいたので、この動画はとても参考になりました。
有り難うございました!
大変参考になりました。
ありがとうございます!
CSS設計迷ってたんで CSS設計完全ガイド読んでみます!
はじめまして、ロードマップがあるので、デザイナーに必要なスキルが一目でわかりやすかったです。
質問なのですが、最初に挙げられてた「1冊ですべて身につくHTML &CSSとWebデザイン入門講座」の本は持っておりますが、これと同じ作者の「HTML &CSSと Webデザイン実践講座」の方も手をつけておいた方が良いでしょうか?また、手をつけるとしたらどのタイミングが良いでしょうか?
案件の取り方を教えていただきたい。。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
の具体的な使い方についてお聞きしたいです!!
いつも拝見させて頂いています
質問させて下さい
Progateを予めHtml&cssの上級編まで進めた上でのロードマップと思いますが
道場コースまでも終えた上で取り組んだ方がよろしいでしょうか?
お手数ですがご教示願います。
道場コースは正直任意って感じですね。理不尽なエラーが発生して嫌になるので、早い段階で最初の書籍に入ったほうが挫折しない気がしています。
いつも有益な情報有難うございます。
質問したいことがあるのですが、、
例えば、自作テーマのブログサイトっぽいものを作るように頼まれたとして、
最終的にクライエントが投稿ページからグーテンベルクを使って自由に記事を作れるようにする場合
クライアント側が勝手に作った記事に対してCSSはreset.cssを通さなければある程度効くと思うのですが
レスポンシブにするにはどうすれば良いのでしょうか?
レイアウトに条件をつけてしまえば(例えばカスタムフィールドなどで)、それにあったCSSをこっちが用意してれば
大丈夫な気がするのですが、自由に作ってしまったものに対してはどう対応すれば良いのでしょうか...?
もしお時間があればご教授いただければ幸いです。
動画ありがとうございます!今模写コーディングしているのですが、デベロッパーツールを見ないと厳しいです、、。出来れば拡張機能の使い方や模写コーディングの流れを知りたいです。
模写よりデザインデータからのコーディングが実務に近くておすすめです!私も教材を出しています。note.com/samuraibrass/m/mad296098d928
こんばんは。デイトラのweb制作コースを受講中で現在、初級編なのですが、ピクセルパーフェクトや、jQueryなら流す程度など、ゴールが明確に言語化されていません。ホントに理解できてるか不安なのですが、このまま一旦進めることを優先したほうが良いのでしょう?
ゴールはないんですが、目安としてモーダルやアコーディオン、ハンバーガーあたりをかければいいかなと。デイトラ なら中級編でみっちり鍛えられるので、楽しみにしていてください😂
プロゲートで終わらせておくのはHTMLとCSSのコースだけで大丈夫ですか?その後このロードマップに沿って進めていく感じで大丈夫ですかね?今日でプロゲートのHTMLとCSSのコースが一通りやり終わったので、このロードマップに沿って勉強していきたいと思います。
大学1年生です。プログラミングについて興味を持ったため情報収集していた所、しょーごログさんに出会いました。そこでデイトラに関して質問があるのですが、大学1年生、かつコロナ禍でアルバイトで給与がなく、デイトラの費用を支払えるか不安なのですが、なにか対処法はありませんかね?お願いします。
『jQueryデザインレシピ集』と言及されていますが、正しくは『jQuery標準デザイン講座』ではないでしょうか。
間違っていたらすみません。
おっしゃる通りです!素手間違えました。
何をやればいいのか路頭に迷っていたので感謝します!
質問なのですが、photohshopやIllustratorは学ばなくて良いですか?もし学ぶ良い本や学習方法があれば教えていただけますでしょうか?
イラレ フォトショは「画像の書き出し」や「値の取得」ができればいいです!デザインができる必要はありません(コーダーの場合)。これらの用語でググってみてください!
progate→ドットインストールの後ってこと?
それとも
progateかドットインストールの後ってこと?
コーディング不要で、レスポンシブ対応も手軽に出来るという謳い文句の、「STUDIO」というソフトを最近知りました。こちらは今後、今回のロードマップを一足飛びしてしまう、ライバル的な立ち位置になっていくのでしょうか?
(そうでない事を願います…)
もし、よろしければそのあたりのお話を動画にしていただけると嬉しいです!!
STUDIOが代替する部分はあると思います。STUDIO専門会社もあるので、やるなら徹底して「STUDIOフリーランス」になるとそういった会社とお仕事など道はあると思いますが、NOCode系はコーディングの知識があるとより便利と、皆口を揃えていいますね!
ピクセルパーフェクトなんて可能なのか、、?肉眼で?
いつも有益なロードマップ提示ありがとうございます。
デイトラで11月に始まるであろうメンター付コース申込を睨んで勉強中です。
その前のデイトラの基礎コースへの移行はどの辺ですればいいでしょうか?
デイトラの基礎コースは何ヶ月で消化出来ますでしょうか?
デイトラは90日間のカリキュラムで初歩の初歩から実案件レベルまでやります。メンター付きコースは完走しなければならないので、今から始められると、日数通りにできれば受講基準に合致するかと思います。
別の動画で、progateの次はデイトラがおすすめであるといった内容を拝見したのですが、独学だとこちらの動画内容がおすすめということでしょうか?
コメント失礼します。
いつも拝見しており、大変役に立っており感謝しております。
Easy Sassを使い始めたのですが、
ベンダープレフィックスはどのように与えるのが簡単でしょうか?
Sassを使う前はAutoprefixer CSS onlineでベンダープレフィックスを与えていたのですが、
Sassのコードを貼り付けることはできないと思うので、オススメの方法があれば教えていただきたいです。
Live Sass Compilerの方ならsetting.jsonに記載することでIE対応とかできたかなと思います。
ちょっと聞きたいんですけど、今progateのjqueryやってて途中関数がわからなかったらJavaScriptを復習しようって出てるんですけどjqueryの前にJavaScriptやった方がいいんでしょうか?
progateは有料版が良いですか?
また、デイトラはいつ頃から購入してやり始めるのが良いでしょうか?
progate有料版のHTML.CSSが終わったらへんからが良いですかね?
デイトラは完全初心者からわかりやすく解説してるので(個人的にはProgateよりわかりやすいと思います)最初からデイトラをおすすめしたいと思ってます(買い切りですし)
独学できればいいですが、独学はメンターも仲間もいないので正直かなりメンタルとの戦いになると思います!
デイトラは完全初心者からわかりやすく解説してるので(個人的にはProgateよりわかりやすいと思います)最初からデイトラをおすすめしたいと思ってます(買い切りですし)
独学できればいいですが、独学はメンターも仲間もいないので正直かなりメンタルとの戦いになると思います!
@@user-ck5re4rk5q 返信ありがとうございます!
webデザインの同時購入を勧められますが、web製作のみでも良いですかね?
また、デイトラで学びながら、中級編の途中くらいまでまきたら営業やマーケティングについても同時学習していこうと思っているのですが、この二つのテーマについての学習におすすめのやり方や教材はありますか?
質問です。
HTML CSSの初級本のwebサイト作成に関しての到達レベルですが…
①教材を見ずに作成できるレベル感まで到達した方がよろしいでしょうか。
②それとも内容を理解している程度で構わないでしょうか。
参考までにお伺いできればと思います。
よろしくお願いします
内容を理解してるレベルでいいと思います。結局デザインカンプからのコーディングで自分で悩みながらコーディングするほうが圧倒的に成長できますので!
wixやwordpressはコーディング不要でサイトをつくれると思うのですが、今コーディングを学ぶのはどういう意味があるのでしょうか?
コーディング不要で作れる案件を自分で取れるならコーディングを学ばなくてもいいと思います!
ただそうでないものが大半なのですよね現状。細かいカスタマイズできないので...
あと5年後にコーディングがどうなってるかわかりませんが、制作案件をどうやって受注するか次第かなと思います。ノーコードで作る案件は営業力ある人以外で効率よく取れてる人を見かけないですね。
ということで、WixやWordPressノーコードでやっていくというなら、相応の覚悟と戦略が必要になりますから、それよりは確度の高いコーディングを学んで始めましょうということになります。
コーディングを知ってる人のほうが、ノーコードツールを操りやすいというのもありますから、コーディング学んで全然無駄じゃないですね(特にWordPress、webflow、Studioなど)
HTMLの本はスラスラわかるHTML&CSSのきほんって本でも大丈夫ですか?
しょーごさんの模写コーディング初級編で早くも挫折しそうなのですが、、
更に簡単な入門編を0円で配布予定です👍
@@user-ck5re4rk5q 流石です👍
デイトラに加入してないのですが加入してなくても卒業制作はできるのでしょうか??
今公開停止になっちゃってるので、ブログ版を参考にしてみてください!
shogo-log.com/after-progate/
デイトラだけでもいいですか?
デイトラで完結しますね!
shogo-log.com/daily-trial/
@しょーごログ さん
ありがとうございます😊
貴方の影響もあってか、デイトラをひとまず完結したら、しょーごさん直伝おすすめの本17冊を読もうと、考えが切り替わりました!(笑)
23:50 これって「デイトラに申し込んで卒業制作課題を終えよう」という意味ではなく、
「概要欄の■【卒業制作】コーディング × WordPressテーマ化 練習素材【※実案件です】
note.com/tokyofreelance/n/n3813fa13822f
を一人で構築できるか腕試ししよう」
という認識で合っていますか?
そういうことになります!卒業課題が単独で公開されております。また、私自身も出しており、ブログの方を参照いただけると最新の内容がみれます
shogo-log.com/after-progate/
俺はあんたについて行くことにした。
2021年以降はこの内容では無理かも?