|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/responsive-web-design-css-avanzato-tecniche-front-end/
课程评论：没有评论
课程名称：响应式网页设计 + 高级CSS - 前端技术
课程概述：本课程主要涵盖两个宏观主题：响应式网页设计（RWD）和高级CSS。采用“边做边学”的方法，通过实际示例帮助学生学习。如果您之前参加过我的课程，您会发现我通常先以脱离上下文的方式解释一个主题，然后再简单示例结合复杂示例进行讲解。此外，课程中有许多作业和练习，您将被挑战亲自编写代码，以实践所学内容。我的理念是，独立编写代码对理解网页开发至关重要。当然，所有练习将附有我的视频讲解和代码解决方案，方便您与自己解决方案进行对比。
建议您在报名参加本课程之前，已经学习过我的以下课程：1）HTML + CSS 2）基础JavaScript。如果您没有JavaScript的技能，可以跳过相关内容，不会影响后续主题的理解。即使没有参加我的前两个课程，只要您具备基本的HTML和CSS知识，您依然可以报名参与。
响应式网页设计旨在使布局在各种设备（无论是智能手机、平板电脑、桌面计算机还是电视）上都能良好展示。主要有两种方法：1）桌面优先 2）移动优先，课程中将详细解释这两种方法。实现响应式布局的主要手段是媒体查询（虽然并非唯一方法），我们将重点讨论其主要应用。此外，RWD不仅限于布局，也涉及排版、图片、视频、表格等各个组件，这些组件需要特别处理（例如，使用``标签的特定属性），我们还会探讨如何在JavaScript中使用媒体查询及其用途。
课程还将介绍容器查询，用于根据页面元素的大小而非布局的大小应用规则，以及打印优化、移动设备友好性技巧、JavaScript触屏事件及其他相关内容。最终，我还会展示一些无需媒体查询的响应式技术。
高级CSS部分是未在我之前的HTML + CSS课程中覆盖的技术和属性的汇总，使您CSS的知识更进一步。我们将学习的内容包括：Flexbox和Gridbox、新的测量单位（svh、dvh和ch）、`clamp()`函数、伪类应用（target、checked、before和after），以及CSS小技巧、图标字体（如Fontawesome）、自定义Web图标字体、z-index和堆叠上下文、流畅的字体大小、以及图片缩略图的实现技巧等。
所有代码和资源将在课程中提供下载，您也可以随时提出疑问，我会尽快回复。与许多企业提供的昂贵的网页开发课程相比，本课程以极低的价格提供了丰富的内容，机会难得，请不要错过！
Gli argomenti e le tecniche affrontate in questo corso vertono su 2 macro-argomenti:Responsive Web Design (RWD)CSS avanzatoL'approccio è quello del learning by doing cioè imparare tramite degli esempi pratici ma se hai seguito degli altri miei corsi saprai già che il mio approccio in linea di massima consiste nello spiegarti in maniera decontestualizzata un argomento per poi calarlo in un esempio semplice e se poi riesco contestualizzarlo in un esempio più complesso.Inoltre il corso è disseminato di assegnazioni ed esercizi in cui sarai sfidato a scrivere codice in prima persona per mettere in pratica quello che hai imparato. Il mio mantra è che nel web developing è fondamentale scrivere codice in autonomia per poter dire di avere effettivamente capito un argomento. Ovviamente tali esercizi saranno corredati dalla mia soluzione sia video che come codice in modo che tu possa confrontare la tua soluzione con la mia o visionare la soluzione nel caso in cui non sei riuscito a implementarla.Per affrontare questo corso sarebbe ideale se hai già acquistato e studiato le tematiche dei miei corsi1)HTML+CSS2)Javascript baseAlcune delle tecniche di RWD e di CSS avanzato lambiscono gioco forza anche javascript ma se non hai questa skill puoi saltare gli argomenti inerenti Javascript senza inficiare la comprensione degli argomenti successivi.Inoltre il corso è acquistabile anche da chi non viene dai miei precedenti corsi ed ha una conoscenza ,perlomeno basilare, di Html e Css ed è comunque interessato alle tematiche affrontate che vado a delinearti più nel dettaglio.RWD significa rendere fruibile il nostro layout per qualunque tipo di device che sia uno smartphone,un tablet, un computer desktop,pc,tv ecc.Esistono principalmente due approcci:1)Desktop First2)Mobile Firstche verranno spiegati entrambi. L'approccio principale per rendere un layout responsive sono le media query (anche se non è l'unico) e verranno prese in esame le principali media queries.RWD non riguarda solo il layout ma anche la tipografia (dimensione del testo mutevole alle varie dimensioni dello schermo),le immagini,i video le tabelle ecc. cioè i singoli componenti delle pagine web e questi richiedono delle trattazioni ad hoc (ad esempio per le immagini si ricorre al tag picture e ad attributi particolari del tag img). Vedremo anche come usare le media queries lato javascript ed a cosa servono. Ti parlerò anche delle container queries per applicare delle regole non in base alla dimensione del layout ma in base alla dimensione di un elemento della pagina. Personalizzazioni per la stampa. Tecniche ed accorgimenti per rendere fruibile il sito anche nel mobile. Eventi javascript touch e pointer. Come gestire l'hover e il click e altri aspetti anche nei touch screen. Infine ti farò vedere alcune tecniche responsive che sono media-query free.CSS avanzato è una miscellanea di tecniche e proprietà CSS non affrontate nel mio precedente corso HTML + CSS che ti consento di portare la tua conoscenza sul Css "at the next level". Ti fornisco un elenco non esaustivo di quello che vedremo:Flexbox e GridboxUnità di misura svh,dvh e ch. Funzione clamp()Pseudoclassi target e checked e vari ambiti di applicazionePseudoclassi after e before e vari esempi di applicazione.Click del mouse in cssCSS spriteValidazione di form quasi in html-css onlyWeb Icon Font (ad esempio Fontawesome) per usare delle iconecreare un Web Icon Font personalizzato con Fontelloz-index e stacking contextFont-size fluidaProprietà margin,padding,border inline e blockProprietà object-fit e object-position per realizzare thumbnail di immaginiTecnica data uri ed svg inlineFormati di immagini e fallbackLibreria ModernizrTutto il codice è messo a disposizione ed è scaricabile.Inoltre se qualcosa non ti dovesse essere chiaro o ci fossero dei problemi di solito rispondo abbastanza velocemente.Aziende che fanno formazione in ambito web developing vendono percorsi di apprendimento che trattano gli argomenti presentati in questo corso a prezzi esorbitanti e molto spesso senza il grado di approfondimento che contraddistingue questo corso.Tramite questo corso acquisteresti 2 corsi al prezzo di uno ad un prezzo irrisorio, non lasciarti sfuggire questa incredibile occasione.
