Alura の無料 HTML および CSS チャレンジ: Netflix レプリカの構築-CSSチュートリアル-php.cn

HTML と CSS の 7 日間のコードは、フロントエンドの本質を実践するために Alura が提供する無料のオンライン機会です。

7 日間にわたって、「div」、「セクション」、画像のインライン、CSS の測定などの基本的な概念から、フレックスボックスやグリッドなどのより高度なテクニック。

このプロジェクトは、各タグの構文を解明し、その機能を理解し、問題解決に集中できるように設計されています。

最終的には、より堅牢なポートフォリオと更新された GitHub が得られ、進化を示すことになります。 7 日間で 7 つのチャレンジに挑戦するので、これまでの学習を実践し、フロントエンド開発スキルを向上させる絶好の機会です。

7 日間の HTML および CSS コード

HTML および CSS の「7 日間のコード」は、フロントエンド開発のスキルを深めたい人のために Alura が提供する無料のオンライン機会です。

Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix
画像はイベントページより

7 日間、Netflix の映画とシリーズのページのレイアウトを複製し、基本概念から開発者にとって不可欠なより高度なテクニックまですべてを適用することに挑戦します。

重要な概念の適用

このチャレンジでは、「div」、「section」、画像のインライン、CSS での測定などの基本概念を使用します。

レスポンシブで機能的なレイアウトを作成するために必要なツールを確実に習得するために、フレックスボックスやグリッドなどのより高度なテクニックが適用されます。

このプロジェクトは、各タグの構文を解明し、その機能を理解できるように設計されており、より複雑な問題の解決に集中できるようになります。

ポートフォリオと GitHub を開発する

7 日間の集中的な練習が終わると、HTML と CSS の知識が強化されただけでなく、ポートフォリオが充実し、実際のやりがいのあるプロジェクトで GitHub が更新されたことになります。

これは、学んだことを実践し、就職市場で自分のスキルをアピールする絶好の機会です。

チャレンジで取り組んだ内容

1 日目: 初日は、Figma のページのレイアウトが表示され、それを分析して、プロジェクトの基本構造を整理するだけでなく、Netflix ページのハイライトバナーの作成に使用します。。画像やボタンなどの配置をいじることになります。
2 日目: ここでは、Navbar とも呼ばれるナビゲーションメニューを開発します。このセクションには、ページメニューのロゴ、検索、通知、ユーザーボタンがあります。 Flexbox の知識があれば、作業がずっと楽になります。
3 日目: 映画やシリーズのトラックの作業を開始するため、これがおそらく最も重要な課題になります。「マイリスト」レールを作成します。このレールには、後で見るためにユーザーが保存した映画が含まれます。グリッドの知識を活用できるようになります。
4 日目: この日は「高」トレイルを実装しますが、ユーザーがアイテムの画像の上にマウスを移動したときにホバーアニメーションを適用します。
5 日目: ここでは引き続きトラックとアニメーションを使って遊びます。ナビゲーション矢印をクリックすると回転する映画/シリーズのカルーセルがあるかのように、スライド効果を作成します。
6 日目: ほぼ終わりに近づいて、フッターとも呼ばれるフッターを開発します。ここ数日間で得た知識を使用して、それを非常に魅力的なものにする機会があります。
7 日目: チャレンジの 7 日目および最終日では、自分のページをインターネット上に無料で公開します。これにより、他の人がアクセスできるようになり、自分のポートフォリオとして機能できるようになります。華やかに締めくくりましょう!

誰があなたに挑戦しますか？

現在 Globoplay のテクノロジーチームで働くフロントエンド開発者、Fernanda Degolin がこの課題の指導者となります。

フェルナンダは、アートとテクノロジーには世界を変える力があると信じており、皆さんの学習と発達を指導する用意があります。

        Você pode gostar




                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/09/Desafio-De-HTML-E-CSS-Netflix-280x210.png" alt="Desafio De HTML E CSS Netflix" title="Desafio De HTML E CSS Netflix"></span>

                        <span>Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix</span> <a href="https://guiadeti.com.br/desafio-html-css-gratuito-alura-replica-netflix/" title="Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix"></a>





                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/09/Evento-AWS-Rumos-280x210.png" alt="Evento AWS Rumos" title="Evento AWS Rumos"></span>

                        <span>Evento Sobre AWS Gratuito Da Rumos: Boas Práticas De Segurança Na Cloud</span> <a href="https://guiadeti.com.br/evento-aws-gratuito-boas-praticas-seguranca/" title="Evento Sobre AWS Gratuito Da Rumos: Boas Práticas De Segurança Na Cloud"></a>





                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/08/Bootcamp-Java-280x210.png" alt="Bootcamp Java" title="Bootcamp Java"></span>

                        <span>Bootcamp De Java Com Spring Boot Gratuito Da DIO + Claro</span> <a href="https://guiadeti.com.br/bootcamp-java-spring-boot-gratuito/" title="Bootcamp De Java Com Spring Boot Gratuito Da DIO + Claro"></a>





                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/01/Logica-de-Programacao-e-Carreiras-280x210.png" alt="Lógica de Programação e Carreiras" title="Lógica de Programação e Carreiras"></span>

                        <span>Cursos De Lógica De Programação E Carreiras Em Tecnologia Gratuitos Da Estácio</span> <a href="https://guiadeti.com.br/cursos-logica-de-programacao-carreiras-tech/" title="Cursos De Lógica De Programação E Carreiras Em Tecnologia Gratuitos Da Estácio"></a>

ログイン後にコピー