フロントエンドの実践的な仕事 - フロントエンドの初心者はどのように仕事を見つけますか? _html/css_WEB-ITnose

はじめに

私は現在、プロジェクトの経験のない転職者として仕事に応募していますが、結果は非常に悲惨です。実戦経験なし→会社が求めていない→実戦経験なし、という完璧な卵のサイクルが無限に続くことになる。万能の志胡に助けを求めに行ったが、実戦経験のない女子は大人気で、実戦経験のない男は相手にされない。時代が変わっても処女コンプレックスは変わらないのかと嘆くばかりです。 Zhihu の多くの専門家が最初に模倣することを提案しているので、Zhihu を模倣することにし、次のことを思いつきました (デモとソースコード):

CSS レイアウト計画: あります。 Zhihu のレイアウト方法を使用せずに、フレキシブル ボックスを使用しました。フレキシブル ボックスを選択した理由は、非常に使いやすく、HTML の構造とよりよく一致するためです。前述したように、フローティングおよび絶対配置を使用してアダプティブ レイアウトを実装する鍵は、通常、子要素を親要素の外に移動する必要があります (レイアウト プランの概要を確認するには、ここをクリックしてください)。これは明らかに構造の理解と矛盾していますが、フレックスボックスにはこの問題はありません。

js: ネイティブ JS。ライブラリやフレームワークは使用されません。現在作成されている JS はほとんどなく、主にいくつかの動的インタラクション エフェクトを作成しています。実際、これらはすべて個人的な蓄積として考えてください。バックエンドが分からないので、現在のバックエンド関連のデータインターフェースは0です。 。 。

元々、このプロジェクトは CSS の使い方を練習するためのものだったので、UI についていくつかのアイデアがあり、再利用可能、カスタマイズ可能、分離可能にしたいと考えていましたが、今のところ非常に貧弱なようです。さらに、フロントエンドの世界で非常に人気のあるいくつかの CSS プリプロセッサにはまだ触れていません。 。 。

私は最近いくつかの企業で面接をしましたが、これは誰も真似したことがなく、多くのことを学んだように感じていますが、おそらく無意識のうちにこれは模倣されており、とても簡単だと思っています。 Zhihu の Web アプリ版には複数のページがあります。ホームページは 7788 のように作成されていますが、他のページはまだ作成されていません。ただし、今後 Nodejs を学習するときにこのページを練習するためにこれ以上時間を費やすつもりはありません。次に、より愛らしい小さなゲームとアニメーションを作成してみましょう。

もっと良い就職活動のアイデアがありましたら、ぜひ私に知らせてください！ ありがとう！

あなたの会社がフロントエンドのスタッフが不足していて（女性が不足しているわけではありません）、新しい人材をトレーニングする意欲がある場合は、私に連絡してください〜。 ~

githubについて

私はフロントエンドに触れてからgithubを登録しましたが、初心者としては他の人のコードをコピーする以外に、実際に自分で作ってみたいと思っています。プルリクエストがどのようなものか知りたいのですが、介入できるプロジェクトが見つかりません。この感覚は、教育映画をたくさん観ても実際的なパートナーが見つからないのと同じです。このように感じているのは私だけではないと思うので（教育映画を見るのとは違います）、練習したい学生がいるかどうかを確認するために投稿しました。

もしあなたが github アカウントをお持ちで、プル リクエストをまだ試したことがない場合は、私に来てフォークし、コンテンツを追加して私にプッシュしてください (github ソース コード)。 m.zhihu.com を比較してください。小さなモジュール、ダイナミックなエフェクト、さらにはタイプミスの修正でも十分です。

Zhihuのデザインについて話しましょう

私は青い空と白い雲がとても大好きで、当然Zhihuの青い色調もとても好きです。 Zhihu の感触は非常に爽快で、インターフェースも非常に絶妙です。立体感を出すためにグラデーションや影を多用しています。

1) 例:

検索ボックスの内側と外側にうっすらと影があるのが見えますか?とにかく、私はそれを見ませんでした。 。 。 CSS:

box-shadow: inset 0 1px 3px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1);

効果を少し重く調整します:

ああ、3 次元効果、Zhihu のパラメータは暗黙的すぎます。他の場所を調べたところ、ほとんどすべての入力ボックスがこの影のスタイルに設定されています。

2) 影 + グラデーションを見てください:

これは検索バーの背景です。私は影を見ると目が疲れてしまい、グラデーションが見えなくなります。 。 。 。

background: linear-gradient(to bottom,#086ed5,#055db5);border-bottom: 1px solid #044e97;box-shadow: 0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.15);

この影は上の影とちょうど反対なので、グラデーションの 2 つの色がほぼ同じなので、見にくいです。ところで、Zhihu のフロントエンドはすべて Virgos ですか? これは Zhihu の簡潔なスタイルです。これらの効果が強すぎると、ユーザーの注意がコンテンツから逸れてしまうため、十分ではありません。

ところで、一般的なグローとグラデーションを確認してみましょう:

3) グラデーションは次のようになりますか?

グラデーション?赤ちゃんには見えないよ！

.zm-noti7-frame-border {    height: 1px;    width: 100%;    position: relative;    background: linear-gradient(to right,rgba(250,250,250,.1) 0,rgba(240,240,240,.8) 1%,#ddd 4%,#ddd 96%,rgba(240,240,240,.8) 99%,rgba(250,250,250,.1) 100%);}

つまり、実際にはリストの下に div が追加され、線の両端にグラデーション効果が表示されます。 。 。

4) 色の観点では

Zhihu は質問に関連する情報を 2 つのカテゴリに分け、その他の情報は灰色で表現します。この区別は非常に興味深いもので、ここでは UI デザインのフェーディング原則を使用して重要な情報を強調しています。さらに、グレーの要素は非常にエレガントで学術的に見え、上のグラデーションと影と組み合わせることで、全体が非常に調和しています。

注意点

1) 命名規則

私は最初、この問題に注意を払いませんでした。標準化する必要があることはわかっていましたが、その方法がわかりませんでした。 CSS を書けば書くほど、どんどん汚くなっていくように感じました。その後、コーディング標準を調べて、痛みを伴う書き直しが始まりました。企業や組織ごとにコーディング標準が異なります。良い標準と悪い標準の区別はありません。また、厳密な標準ではなく、柔軟に簡素化することもできます。私が注目しているのは次のとおりです: フロントエンドのコーディング仕様

Zhihu の命名規則は次のとおりです: zu-top-nav-link、これは [namespace-module-content-content] です。モジュール化するときは、最初の 2 つのビットは一貫しています。この場合、CSS を記述するときに基本的に HTML について心配する必要はなく、後で CSS ファイルを確認するときにさまざまなモジュールを一度に区別できます。また、私は主にクラス直撃スタイルを使用し、いくつかは構造的な疑似クラスを使用します。

2) 便利なツール

便利なツールを使用すると、研ぐ時間を大幅に節約できます。 これについて言えば、「メモ帳を使用するだけです。それは純粋です」という自慢をしている人を見たことがありますが、私はそうではないと思います。言う。 CSS を書くための推奨機材: 快適なエディター + Chrome + AlloyDesigner。以前、MOOCs で先生がスクリーンショット ツールを使って寸法を測定するビデオを見たことがあり、非常に衝撃を受けました。もちろん、ショックを受けたものには改善の余地があることが多いので、この時点で立ち止まって、まずは良い砥石を見つけるべきです。ここでの主力は Chrome + AlloyDesigner で、Chrome で変更したスタイルをページに直接反映することができます。ここで忘れずに別の CSS ファイルを作成し、ソース内で見つけて名前を付けて保存してください。もちろん、ワークスペースを設定することもできます。 AlloyDesigner は、簡単に言うと、デザイン原稿をページ上に配置し、重なるまで修正するだけです。ここで奇妙なのは、設計図のサイズが間違っていることが多く、自分で設定する必要があることです。ドキュメント チュートリアル: AlloyDesigner ドキュメント チュートリアル。

3) 最初に頭を使い、次に手を使う

まず頭を使い、次に手を使い、最初に骨格を分析し、レイアウトの一般的な解決策を考えます。ページに移動し、コードの記述を開始します。ここで私がやっていることは、まだ全体の状況を把握して重要なポイントを書き留める必要があるので、いつも急いで始めます。

もう 1 つは、グローバルな認識です。まず全体的なスケルトンを構築し、次にその中にコンテンツ (HTML) を入力し、最後に CSS スタイルを調整する必要があります。この利点は、スタイルがなくても HTML が明確な構造を保持していることです。これは、構造とプレゼンテーションの基本的な分離と見なす必要があります。

以上。 。 。

(画像出典: Xiao Zhou)