Responsive Portfolio Website Tutorial | HTML and CSS
Hey Guys, In this video we will create a responsive portfolio website using HTML and CSS. I decided to create a white themed, very minimal and elegant design with four sections - Home, Projects, About and Contact. Pretty much all you need to have in a portfolio website. :D
If you enjoyed this video, don't forget to hit that like button and subscribe for more videos like these!
Get the starter project files here : http://www.mediafire.com/file/y54dlsl77joailr/portfolioWeb.zip/file
Fonts used:
Raleway and Bebas Nue
Timestamps:
00:00 Website Intro
01:11 Project File Structure and getting started
03:05 Coding section one - Homepage
05:53 Coding section two - Projects
11:57 Coding section three - About
15:57 Coding section four - Contact
21:30 Making things responsive
26:09 Adding GSAP smooth scroll and animations
Social:
Dribbble: https://dribbble.com/TheDesignMedium
Instagram: https://www.instagram.com/thedesignmedium
Web Design Playlist:
https://www.youtube.com/playlist?list=PLEg2J3JpKlQt5YihPkqsnHET9MbiDHEs6
Music:
Track: Blossom — SOMM [Audio Library Release]
Music provided by Audio Library Plus
Watch: https://youtu.be/Lm7N-qVHI4o
Free Download / Stream: https://alplus.io/blossom
Track: Moment — Amine Maxwell [Audio Library Release]
Music provided by Audio Library Plus
Watch: https://youtu.be/VsRtJMPwkRE
Free Download / Stream: https://alplus.io/moment
#portfoliowebsite #responsivedesign #designportfolio
Видео Responsive Portfolio Website Tutorial | HTML and CSS канала Design Medium
If you enjoyed this video, don't forget to hit that like button and subscribe for more videos like these!
Get the starter project files here : http://www.mediafire.com/file/y54dlsl77joailr/portfolioWeb.zip/file
Fonts used:
Raleway and Bebas Nue
Timestamps:
00:00 Website Intro
01:11 Project File Structure and getting started
03:05 Coding section one - Homepage
05:53 Coding section two - Projects
11:57 Coding section three - About
15:57 Coding section four - Contact
21:30 Making things responsive
26:09 Adding GSAP smooth scroll and animations
Social:
Dribbble: https://dribbble.com/TheDesignMedium
Instagram: https://www.instagram.com/thedesignmedium
Web Design Playlist:
https://www.youtube.com/playlist?list=PLEg2J3JpKlQt5YihPkqsnHET9MbiDHEs6
Music:
Track: Blossom — SOMM [Audio Library Release]
Music provided by Audio Library Plus
Watch: https://youtu.be/Lm7N-qVHI4o
Free Download / Stream: https://alplus.io/blossom
Track: Moment — Amine Maxwell [Audio Library Release]
Music provided by Audio Library Plus
Watch: https://youtu.be/VsRtJMPwkRE
Free Download / Stream: https://alplus.io/moment
#portfoliowebsite #responsivedesign #designportfolio
Видео Responsive Portfolio Website Tutorial | HTML and CSS канала Design Medium
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![AWESOME PARALLAX CAROUSEL | Adobe XD Tutorial](https://i.ytimg.com/vi/Zs2TfMPnu_A/default.jpg)
![Parallax Animation Tutorial using HTML | CSS | RellaxJS](https://i.ytimg.com/vi/fBVvvjopPPM/default.jpg)
![Animated Website using Parallax.js and GSAP (HTML & CSS)](https://i.ytimg.com/vi/LMygHD-rnbA/default.jpg)
![Website UI Prototype Animation in Adobe XD - Beats Web Redesign](https://i.ytimg.com/vi/dWJeWLNY8iU/default.jpg)
![Finance App UI in React Native](https://i.ytimg.com/vi/t0mnERa30a0/default.jpg)
![Parallax Travel Website UI Design and Prototyping in Adobe XD [Speed Process]](https://i.ytimg.com/vi/J3-LkFWYZho/default.jpg)
![Responsive Website Design with scroll animations | HTML and CSS Tutorial](https://i.ytimg.com/vi/6OExw1Mhdhw/default.jpg)
![Web UI Design - Parallax Animation Tutorial | Adobe XD](https://i.ytimg.com/vi/wy1ldpkOw_g/default.jpg)
![Travel App UI in React Native](https://i.ytimg.com/vi/FznGNZeU_Xc/default.jpg)
![Portfolio Website Design in Adobe XD | Speed Art](https://i.ytimg.com/vi/wK-0OPuUAPo/default.jpg)
![Adobe XD Design and Prototype Tutorial](https://i.ytimg.com/vi/MfmOtnWbQa0/default.jpg)
![Travel App UI Design in Adobe XD](https://i.ytimg.com/vi/C0pja00cOlw/default.jpg)
![Shared Element Transitions with React Navigation 5 | Blog App](https://i.ytimg.com/vi/WVNRtZpfoGM/default.jpg)
![Beats Website Redesign in Adobe XD | Tutorial](https://i.ytimg.com/vi/Sw2WU2mqScc/default.jpg)
![Photographer Portfolio Landing Page UI Design | Adobe XD Speed Art](https://i.ytimg.com/vi/Q-HWUVQs8p4/default.jpg)
![Web UI Design with a Parallax Slider | Adobe XD](https://i.ytimg.com/vi/LwURVJgagWQ/default.jpg)
![Movie Streaming App UI in React Native](https://i.ytimg.com/vi/iL7G5x1VokI/default.jpg)
![Illustration Style Website - Speed Design and Code ( HTML & CSS )](https://i.ytimg.com/vi/8HUi90wooIA/default.jpg)
![Website Landing Page UI Design in Adobe XD | Speed Process](https://i.ytimg.com/vi/XQXYs-I0Z4s/default.jpg)