學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)

更新於 發佈於 閱讀時間約 1 分鐘
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework

學習重點

  • Next.js Image
  • Css3 Position

影片教學

注:此為Next.js 12版本,後續會推出新版本教學,別忘記記得追蹤呦

額外連結

如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件

更多相關教學文章持續更新,請別忘記追蹤呦

為什麼會看到廣告
avatar-img
12會員
33內容數
設計 + 程式,是一個出版對設計和程式的學習影片和教學文章,目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
JayLinXR 的其他內容
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
當你有客製化的字型在Google Font裡面,但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
建置好前端後, MERN全端工程師教學在這裡 想學習MongoDB和Express可以來這裡學習
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃 註: 最後面"dark"請改為"black",錄製太快沒有看到有錯誤
動態導覽列為增加使用者經驗UX,要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend 擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度 和不需要創建CSS檔案即可以用class去做Styling
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
當你有客製化的字型在Google Font裡面,但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
建置好前端後, MERN全端工程師教學在這裡 想學習MongoDB和Express可以來這裡學習
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃 註: 最後面"dark"請改為"black",錄製太快沒有看到有錯誤
動態導覽列為增加使用者經驗UX,要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend 擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度 和不需要創建CSS檔案即可以用class去做Styling
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
這個專欄分享了除了PV影片之外,自己學習或創作的其他經歷,包括自製頭像的設計和繪製過程。作者分享了創作的初版草稿、上色過程以及根據意見修改的過程。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s
Thumbnail
人們對於學習HTML的興趣持續增長,本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程,為讀者提供全方位的學習體驗。
Thumbnail
在過年期間,利用集中時間跟完Mosh Hamedani的Next.js課程,掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果,以及對於未來應用的展望。
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
這個專欄分享了除了PV影片之外,自己學習或創作的其他經歷,包括自製頭像的設計和繪製過程。作者分享了創作的初版草稿、上色過程以及根據意見修改的過程。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s
Thumbnail
人們對於學習HTML的興趣持續增長,本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程,為讀者提供全方位的學習體驗。
Thumbnail
在過年期間,利用集中時間跟完Mosh Hamedani的Next.js課程,掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果,以及對於未來應用的展望。