Rumah > hujung hadapan web > tutorial css > Cabaran HTML dan CSS Percuma Alura: Bina Replika Netflix

Cabaran HTML dan CSS Percuma Alura: Bina Replika Netflix

DDD
Lepaskan: 2024-09-19 03:34:53
asal
391 orang telah melayarinya

Kod HTML dan CSS 7 Hari ialah peluang dalam talian percuma yang ditawarkan oleh Alura untuk anda mempraktikkan intipati Front-end.

Sepanjang 7 hari, anda akan dicabar untuk meniru reka letak filem dan halaman siri Netflix, menggunakan segala-galanya daripada konsep asas seperti 'div', 'bahagian', sebaris untuk imej dan ukuran dalam CSS, hingga teknik yang lebih maju seperti Flexbox dan Grid.

Projek ini direka bentuk untuk membantu anda memahami sintaks setiap teg dan memahami fungsinya, membolehkan anda menumpukan pada penyelesaian masalah.

Akhirnya, anda akan mempunyai portfolio yang lebih mantap dan GitHub yang dikemas kini, menunjukkan evolusi anda. Dengan 7 cabaran dalam 7 hari, ini adalah peluang terbaik untuk mempraktikkan pengajian anda dan meningkatkan kemahiran pembangunan Front-end anda.

7 Hari Kod HTML dan CSS

HTML dan CSS “7 Days of Code” ialah peluang dalam talian percuma yang ditawarkan oleh Alura untuk mereka yang ingin mendalami kemahiran mereka dalam pembangunan Front-end.

Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix
Imej daripada halaman acara

Selama 7 hari, anda akan dicabar untuk meniru reka letak filem dan halaman siri Netflix, menggunakan segala-galanya daripada konsep asas kepada teknik yang lebih maju, penting untuk mana-mana pembangun.

Mengaplikasikan Konsep Penting

Dalam cabaran ini, anda akan menggunakan konsep asas seperti 'div', 'bahagian', sebaris untuk imej dan ukuran dalam CSS.

Teknik yang lebih maju seperti Flexbox dan Grid akan digunakan untuk memastikan anda menguasai alatan yang diperlukan untuk mencipta reka letak responsif dan berfungsi.

Projek ini direka bentuk untuk membantu anda memahami sintaks setiap teg dan memahami fungsinya, membolehkan anda menumpukan pada menyelesaikan masalah yang lebih kompleks.

Bangunkan Portfolio dan GitHub Anda

Pada penghujung 7 hari latihan sengit, anda bukan sahaja akan menyatukan pengetahuan anda dalam HTML dan CSS, tetapi juga memperkayakan portfolio anda dan mengemas kini GitHub anda dengan projek yang sebenar dan mencabar.

Ini adalah peluang terbaik untuk mempraktikkan pengajian anda dan menyerlahkan kemahiran anda dalam pasaran kerja.

Kandungan Diusahakan dalam Cabaran

  • Hari 1: Pada hari pertama, anda akan dibentangkan dengan reka letak halaman dalam Figma, menganalisisnya dan menggunakannya untuk mencipta sepanduk kemuncak halaman Netflix, selain mengatur struktur asas projek anda . Anda akan kucar-kacir dengan kedudukan imej, butang dan banyak lagi.
  • Hari 2: Di sini anda akan membangunkan menu navigasi, juga dikenali sebagai Navbar. Dalam bahagian ini, anda akan mempunyai logo menu halaman dan butang carian, pemberitahuan dan pengguna. Pengetahuan Flexbox akan menjadikan hidup anda lebih mudah!
  • Hari 3: Ini mungkin merupakan cabaran yang paling penting, kerana anda akan mula bekerja dengan trek filem dan siri. Anda akan mencipta rel 'Senarai Saya', yang mengandungi filem yang disimpan oleh pengguna untuk ditonton kemudian. Anda akan dapat menggunakan pengetahuan Grid anda.
  • Hari 4: Pada hari ini anda akan melaksanakan jejak 'Tinggi', tetapi menggunakan animasi tuding apabila pengguna melepasi tetikus ke atas imej item.
  • Hari 5: Di sini anda akan terus bermain dengan trek dan animasi. Anda akan mencipta kesan slaid, seolah-olah anda mempunyai karusel filem/siri yang berputar apabila anda mengklik pada anak panah navigasi.
  • Hari 6: Hampir ke penghujung, anda akan membangunkan pengaki, juga dikenali sebagai pengaki, dan anda akan berpeluang menggunakan pengetahuan yang diperoleh dalam beberapa hari terakhir untuk menjadikannya sangat menawan.
  • Hari 7: Pada hari ketujuh dan terakhir cabaran, anda akan menerbitkan halaman anda secara percuma di internet, supaya orang lain boleh mengaksesnya dan ia boleh berfungsi sebagai portfolio untuk anda. Anda akan menutup dengan mekar!

Siapa Akan Mencabar Anda?

Fernanda Degolin, pembangun Front-end yang kini bekerja dalam pasukan teknologi Globoplay, akan menjadi mentor bagi cabaran ini.

Fernanda percaya bahawa seni dan teknologi mempunyai kuasa untuk mengubah dunia, dan bersedia untuk membimbing anda dalam pembelajaran dan pembangunan.

        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>
Salin selepas log masuk

HTML DAN CSS

HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) ialah asas pembangunan web.

Walaupun HTML bertanggungjawab untuk struktur dan kandungan halaman, CSS mentakrifkan penampilan visualnya, termasuk reka letak, warna, fon dan aspek reka bentuk lain.

Bersama-sama, mereka membolehkan penciptaan halaman web yang kaya dan interaktif yang boleh diakses daripada mana-mana penyemak imbas.

Kepentingan HTML

HTML ialah bahasa penanda yang digunakan untuk menstruktur kandungan halaman web. Ia menggunakan satu siri teg untuk menentukan elemen seperti tajuk, perenggan, imej, pautan dan banyak lagi.

Tanpa HTML, tidak mungkin untuk menyusun dan memaparkan kandungan dengan cara yang logik dan mudah difahami pada halaman web.

Ia juga membenarkan kemasukan metadata dan pengoptimuman untuk enjin carian, meningkatkan keterlihatan dan prestasi tapak web.

Bagaimana CSS Mengubah Halaman Web

Semasa HTML mengatur kandungan, CSS menjaga persembahan. Dengan CSS, anda boleh menentukan gaya yang digunakan secara konsisten merentas seluruh halaman atau tapak anda, memastikan pengalaman visual yang padu dan menarik.

CSS membolehkan anda membuat reka letak responsif yang menyesuaikan diri dengan saiz skrin yang berbeza, menjadikan tapak web boleh diakses pada peranti mudah alih dan desktop.

Teknik seperti Flexbox dan Grid telah merevolusikan reka bentuk web, menawarkan kawalan yang lebih besar ke atas kedudukan dan penjajaran elemen.

Integrasi HTML dan CSS

Keajaiban sebenar pembangunan web berlaku apabila HTML dan CSS digunakan bersama.

Dengan menggabungkan penstrukturan kandungan HTML dengan gaya visual CSS, adalah mungkin untuk mencipta tapak web yang berfungsi dan menyenangkan dari segi estetika.

Penyepaduan ini membolehkan pereka bentuk dan pembangun bekerjasama untuk mencipta pengalaman pengguna yang menarik, memastikan kandungan boleh diakses dan menarik untuk semua pelawat.

Alura

Alura ialah platform pengajaran dalam talian yang muncul dengan tujuan mendemokrasikan akses kepada pendidikan teknologi berkualiti tinggi.

Ditubuhkan di Brazil, Alura telah menonjol kerana menawarkan pelbagai kursus yang tertumpu pada bidang seperti pengaturcaraan, reka bentuk, pemasaran digital, data dan banyak lagi.

Kepelbagaian Kursus dan Metodologi Pengajaran

Alura menawarkan kepelbagaian kursus yang mengagumkan, bermula daripada pengenalan asas kepada pengaturcaraan kepada latihan lanjutan dalam sains data, pembangunan web, mudah alih dan bidang lain yang hangat di pasaran.

Platform ini mengambil pendekatan praktikal, dengan projek sebenar yang membolehkan pelajar mengaplikasikan apa yang mereka pelajari dengan segera.

Pengiktirafan Komuniti dan Profesional

Salah satu perbezaan terbesar Alura ialah komuniti aktif pelajar dan profesional yang mengambil bahagian secara aktif dalam forum, acara dan kumpulan belajar.

Komuniti ini membolehkan pertukaran pengetahuan dan rangkaian yang berharga, yang memperkayakan lagi pengalaman pembelajaran.

Link pendaftaran ⬇️

Pendaftaran untuk 7 Hari Kod HTML dan CSS mesti dilakukan di tapak web Alura.

Kongsi dan peluang untuk mempraktikkan teori!

Adakah anda menyukai kandungan tentang cabaran HTML dan CSS? Jadi kongsi dengan semua orang!

Catatan Cabaran HTML dan CSS Percuma Alura: Bangunkan Replika Netflix muncul dahulu di Panduan IT.

Atas ialah kandungan terperinci Cabaran HTML dan CSS Percuma Alura: Bina Replika Netflix. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan