Portfolio Website Tutorial – Frontend Development with HTML, CSS, JavaScript
freeCodeCamp.org
@freecodecampAbout
Learn math, programming, and computer science for free. A 501(c)(3) tax-exempt charity. We also run a free learning interactive platform at freecodecamp.org
Latest Posts
Video Description
In this course, you will learn how to build a portfolio website using JavaScript, HTML, and CSS. This is a great project to improve you frontend development skills. ✏️ MacLinz developed this course course. Check out his channel: https://www.youtube.com/c/MacLinzUniversalChannel 💻 Code: https://github.com/Maclinz/JS_CSS_PortfolioProject ❤️ Try interactive Frontend courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Frontend (Made possible by a grant from our friends at Scrimba) ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:02:37) Switch Between Sections ⌨️ (0:48:53) Header Content ⌨️ (1:06:22) About Section ⌨️ (1:42:34) Portfolios Section ⌨️ (1:58:52) Blogs Section ⌨️ (2:11:31) Contact Section ⌨️ (2:44:09) Media Queries 🎉 Thanks to our Champion and Sponsor supporters: 👾 Raymond Odero 👾 Agustín Kussrow 👾 aldo ferretti 👾 Otis Morgan 👾 DeezMaster -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news
Boost Your Web Dev Setup
AI-recommended products based on this video

Anker Power Bank(PowerCore 10K),Compact Travel-Ready 10,000mAh Battery Pack with PowerIQ Charging Technology,5V/3A High-Speed Charging for iPhone,iPad,and More (USB-C Input and Output(Black),1pack) ClimatePartner certified

UGREEN Uno 6 in 1 USB-C Hub with 10Gbps USB-C & USB-A Data Ports 4K@60Hz HDMI for MacBook Pro/Air, iPad Pro, Surface, XPS, Thinkpad and More.

UGREEN USB C Hub 10Gbps, 4 Ports USB 3.2 HUB with 2 USB-C 3.2 and 2 USB-A 3.2, USB Port Extender for MacBook Pro, MacBook Air, Acer Aspire, HP Laptops, iPad Pro, iPhone 15/15 Pro Max and More

Younik Switch Accessories Bundle, 17 in 1 Purple Switch Accessories Kit for Girls Include Switch Carrying Case, Adjustable Stand, Protective Case for Switch Console & J-Con
![Car Phone Holder for Magsafe [78+LBS Strongest Suction & 2400gf Magnetic] 360° Adjustable Car Phone Mount, Phone Holders for Your Car for iPhone 17 Pro Max 16 15 14 13 12 Air Plus (Carbon Fiber) Global Recycled Standard](https://m.media-amazon.com/images/I/712lUnThXpL._AC_UL960_FMwebp_QL65_.jpg)
Car Phone Holder for Magsafe [78+LBS Strongest Suction & 2400gf Magnetic] 360° Adjustable Car Phone Mount, Phone Holders for Your Car for iPhone 17 Pro Max 16 15 14 13 12 Air Plus (Carbon Fiber) Global Recycled Standard

Book Stand for Reading, Adjustable Book Holder with 360° Rotating Bases, Foldable Designs, and Elastic Clips, Multifunctional Display Stand for Recipe, Cookbooks, Magazines, Tablets, Laptops

CAHAYA Portable Sheet Music Stand: Dual Use Desktop Book Holder Folding Lightweight Extra Stable Reinforced with Carrying Bag and Clip for Students Musicians Height Adjustable up to 54.3" CMS0204

Lenovo V15 Laptop | 15.6" FHD Anti-Glare Display | AMD Ryzen 7 7730U | 40GB RAM | 1TB PCIe SSD | HDMI | Type-C | Webcam | Wi-Fi | THUNDEROBOT Wireless Ergonomic Mouse | Windows 11 Pro | Black


![The "AI is going to replace devs" hype is over – 22-year dev veteran Jason Lengstorf [Podcast #201]](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/lIghF_OewYg/hqdefault.jpg)




![How to build your own learning path using Open Source with Kunal Kushwaha [Podcast #200]](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/VgBQ0yBSjfM/hqdefault.jpg)
![Harvard CS50 prof David J. Malan on why you should learn programming slowly [Podcast #197]](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/ZK6XWSCCgPQ/hqdefault.jpg)











![How to turn Open Source into a Job with Nick Taylor [Podcast #181]](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/m7nkioXNiik/hqdefault.jpg)

![Google Cloud Associate Cloud Engineer Course [2025] - Pass the Exam!](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/OlAmyf8_4O4/hqdefault.jpg)



![How to Survive in Tech When Everything's Changing w/ 21-year Veteran Dev Joe Attardi [Podcast #174]](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/07NdHM6pE6M/hqdefault.jpg)




![Getting a developer job in 2025 with Lane Wagner [Podcast #157]](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/wjj2gZbcoNw/hqdefault.jpg)







