Bremen

もしも、IT系を目指すなら、(基礎の勉強が終わったなら)勉強の一環として、ポートフォリオをいくつか作ってみると良いでしょう(ベンダーに自分の実力をアピールするためにもポートフォリオは必要と言う事も有りますしね)。

もしも、バックエンド(プロ)を目指すなら、「SQL、正規表現、Vanilla JS」は必須です(「HTML、CSS」の基礎ぐらいは常識と思って下さい)。
(データベースは別として)現在 データ書式として世界的にJSON書式がデファクトスタンダードになっているので、「JSON書式 入門」でググってみると良いでしょう。
(JavaScriptフレームワークでは無く)Vanilla JSにして下さい(Vanilla JSが使えないようではマイナス評価になります)。
GitHubを使えるようにする。
(Amazonが提供するサーバー)AWS(Amazon Web Services)の基礎程度は理解する 、ポートフォリオをAWSで動くようにして、タブレットを持参し、実際にAWS上で動作している事を簡潔にプレゼンする(くどいのは嫌われるので、質問されたら簡潔に答える程度でOK)。
※基幹系ならバックエンドの勉強に加え、CSS3も勉強しておくと良いでしょう。
※プレゼン用のタブレットはWindows OSに拘る必要は無いが、ChromeOSは殆ど人気が無いので、Googleは数年かけて徐々にChromeOSとAndroid OSを統合する(完全な統合は、おおよそ2026年〜2028年あたりだと予想される)、なのでChromeOSを買う場合は要注意。

もしも、IT系を目指すなら、とりあえずアルゴリズム本を1冊買っておくと良いでしょう、ただし特定のアルゴリズムに特化しているので、アルゴリズム本で勉強しても応用は効かないと思われるので、アルゴリズム本は辞書的に使うだけにすると良いでしょう。

外資系企業だと「オブジェクト指向プログラミング、総称型(Generics)」ぐらい出来ないと無能と評価されます。
日本企業(大企業)も外資に買収されている場合が有るので要注意です(役員に外国人が入っていれば確定的)。
面接で「オブジェクト指向プログラミングは分かりますか？」と聞かれる場合が有るようです(多態性(ポリモーフィズム)がオブジェクト指向プログラミングの肝なので、多態性(ポリモーフィズム)が分からない場合は「分かりません」と回答しないと、あとで「オブジェクト指向プログラミングが分かってないだろ」と文句を言われるでしょう)。
そのような企業は選らばないと言うのも1つの手です。
(ワザワザ面接で聞くぐらいなので)逆に言うと「オブジェクト指向プログラミング、総称型(Generics)」が出来れば、(外資に買収されている)日本企業(大企業)と言う限定された条件下なら評価される可能性が有ると言う事でもありますが。

参考

Javaデモ：オブジェクト指向プログラミング
http://pleiades.vs.land.to/utf8/smt.cgi?r rpr/&bid 00000007&tsn 00000007&bts 2023/02/09 22:47:18&

チャットなどでは参加者数が多くなると、サーバーに負荷が掛かると言う問題がありましたが、Comet(+Ajax)で処理を軽くできるらしいです。
プロを目指すなら、Comet(+Ajax)処理のチャットを実際に作ってみると良いでしょう。
例えば クライアント-サーバー間のデータ書式としてJSON書式を使ってみるのも良いでしょう。

(バックエンド系の)ポートフォリオの注意点
例えばスクールの卒業生は面接にECサイトのポートフォリオを持って来るので、そのレベルの難易度が推奨されます(つまりECサイトを作れるレベルがプロの最低ラインと思って良いです)が、テックキャンプの卒業生の粗製乱造により、その当時はECサイトを作るとテックキャンプのヤッツケ課題だと勘違いされるのでヤメたほうが良いと言われていましたが、現在はポートフォリオをECサイトにしても問題ないようです。
なおスパゲティーだと、当然 評価は下がるので、コードは1度書いたら終わりでは無く、どうしたら読みやすいコードになるか、何度も見直すと良いでしょう

(プロを目指すなら)とりあえずベンダーに自分の実力をアピールすることが重要なので 、ポートフォリオをいくつか作ってみると良いでしょう。

「HTML、CSS」のレベルはデザインセンスは必要ないですが、デバッグで確認しやすいように配慮する。
高度なレイアウトはフロントエンドの担当なので、通常はバックエンドは高度なレイアウトは必要ないでしょう。
「HTML、CSS」は基本的にform、input、textarea、select、button、submit、div、span、table、tableセルの縦･横の結合、全要素指定""、border、インラインブロック、フレックスボックス、width、height、min-width、min-height、autoぐらい分かってれば良いでしょう。
それぐらいの基本的な「HTML、CSS」ならググればなんとかなります。
borderを指定すれば目視で要素サイズを確認できるので、レイアウトが思うように組めない場合は、borderを指定してみると良いでしょう(一時的にborderを全要素指定""してみるのも良いでしょう)。
ただし、基幹系を目指すなら、CSS3まで勉強する事を推奨しますが。

業務の場合は基本的なレイアウトの仕様は決まっていると思われますが、仕様書に要素のサイズが明記されて無い場合は、基本的には内因性サイジングを意図しているので、基本的には要素のサイズは指定しなくて良いですが、明らかにレイアウトが変なら要素のサイズを指定すれば良いでしょう。
ブロックレベル要素は横幅が100%に広がるので、もし横幅も内因性サイジングにしたい場合は、インライン要素では無くインラインブロック要素がオススメです(インライン要素だとCSSの設定が効かない場合がある)。
なお画像などはサイズの指定が必要になると思われます。

(バックエンド系の場合)難易度としてはECサイト･レベルを想定するとなるとTwitterとか良いかもしれません。
以前のTwitterは本質的にはチャットであり、リアルタイム的に記事が更新されていました(現在はリアルタイム的に記事が更新されませんが)。
以前のTwitter仕様で作成したいならチャットを作れば良いでしょう(Ajax(JavaScript)が必用)。
プログラムに「SQL、正規表現、JSON書式」を組み込んで、「それらの知識は有りますよ」とアピールすると良いでしょう(もしそれらが使われて無いと、それらの知識が無いと判断されますので)。

Twitterの主な機能は下記のようになります。
一気に全部 作る必要は無いです、1つ1つ徐々に機能を追加して行くと良いでしょう(自分で優先順位を付けて下さい)。

機能
・「記事＋メディア系(画像、音声、動画)」を投稿できる
・「記事の削除」が可能
・「@～」でユーザーの全記事を検索できる
・「#～」でキーワードを検索できる
・「@～#～」で特定のユーザーのキーワードを検索できる
・「通常のワード検索」
・「記事にコメント」が付けられる
・「コメントの削除」が可能
・「フォロー」
・「リツイート」

なおポートフォリオとして提出しないにしても、ECサイトを作ってみるのは勉強になるでしょう。
上記のような感じでECサイトもAmazonなどを参考に実際にどのような機能(売る側に必要な機能、買う側に必要な機能)が必要か考察してみて下さい。
チャットなどでは参加者数が多くなると、サーバーに負荷が掛かると言う問題がありましたが、Comet(+Ajax)で処理を軽くできるらしいので、その普通のTwitterができたらComet(+Ajax)にも挑戦してみると良いでしょう。

>Ajax(JavaScript)が必用

現在、世界的にjQueryは着実にシェアを減らしており、もうオワコンでしょ、などと囁かれており、通常はVanilla JSにしておけば良いでしょう。

参考

JavaScriptフレームワーク
http://pleiades.vs.land.to/utf8/smt.cgi?r sara/&bid 00000325&tsn 00000325&bts 2020/05/25 17:50:20&

参考
※下記でチャットの基本概念が分かるでしょう。
その「PHPデモ／チャット、Javaデモ／Servlet：チャット」の「Template.html」のコードは完全に同じだと言うことに注意して下さい。
なお、プロならファイルは使わないでしょうから、ファイル･ロックは そんなことも有るんだな～程度に読み流して良いです。

PHPデモ／「チャット：SPA(Single Page Application)」：「ファイル･ロック、AJAX、タイマー」(Ver.3)
http://pleiades.vs.land.to/utf8/smt.cgi?r sara/&bid 00000743&tsn 00000747&bts 2023/07/12 01:32:02&
Javaデモ／Servlet「チャット：SPA(Single Page Application)」：「ファイル入出力、ファイル･ロック、AJAX、タイマー」：「RandomAccessFile、FileChannel、Charset、ByteBuffer」(Ver.2)
http://pleiades.vs.land.to/utf8/smt.cgi?r sara/&bid 00000746&tsn 00000748&bts 2023/07/13 19:40:08&

担当者は大量のポートフォリオをチェックしているので、目にチカチカするようなカラフルな画面だと、ゲンナリします。
変にカラーを使うよりは(グレー系で)質素な雰囲気の方が良いでしょう。
モチロン目に優しければグレー系でなくても良いですが、グレー系が一番簡単です、とにかく目に優しい質素な雰囲気を目指して下さい。
つまりオリジナルの配色に囚われる必要は無いです。

バックエンドにおいての「HTML、CSS」のレベルは下記の2つの画像(恐らく中学生の課題だと思われますが)ぐらいできれば余裕だと思われます。
腕試しとしてトライしてみると良いでしょう。
下記の課題はdiv、span、table、tableセルの縦･横の結合、全要素指定"*"、border、インラインブロック、フレックスボックス、width、height、min-width、min-height、auto、position、static、relative、absolute、top、bottom、left、right、ぐらい分かってれば良いでしょう。
それぐらいの基本的な「HTML、CSS」ならググればなんとかなります。

下記の注意点としては、positionは使わずに、「table、フレックスボックス」などで作成してみて下さい（その程度のレイアウトでpositionを使ってるようでは、いくらなんでもスキルが低すぎますので）。
tableのみ、フレックスボックスのみの2パターン作ってみるのも良いでしょう。

https://drive.google.com/file/d/1fUHVK3iy2w3Vtmo2CiMGkSTANFXJTst5/view?usp=sharing

下記の注意点としては、positionもバリバリ使って良いです。
濃い緑の枠はtableにすると良いでしょう。
黄色で囲われいる部分は中央配置です。
赤で囲われいる部分はギャップは明記されてませんが等間隔と考えて下さい。
等間隔ならフレックスボックスを使いますが、フレックスボックスは幅は100%に広げずに、赤で囲っているように内部の要素にピッタリ合わせるようにして下さい。

https://drive.google.com/file/d/17nqdLovxu8k5wJZumYsE6TgVIrW7tk9z/view?usp=sharing

(フリーランスの)案件によっては「フロント」、「フロントエンド」が表記されている場合がありますが、「フロント」、「フロントエンド」が表記されている場合は、ガチのフロントエンドのスキルが要求される可能性があるのでご注意下さい。
超ザックリと言うと「レスポンシブ・デザイン(px単位を使ってはダメ)、CSS3」のスキルが必要だと思われます。