DEV Community

loading...

Build a Responsive Online Portfolio (video)

ania_kubow profile image Ania Kubow ・2 min read

In this video, I am going to show you how to build a Personal Portfolio or website that looks great on mobile, tablet and desktop (so in other words, we will make it responsive!). We will be doing this with HTML and CSS, with the tiniest bit of JavaScript. So if you don't know how to use Javascript, don't worry, you can still code along.

This video is perfect for those looking to learn/improve their CSS and HTML skills.

At the end we deploy the site to a .com website so you can share it with your friends. Hostinger have kindly given a 10% discount to sign up. To get 10% off on Hostinger use code ANIAKUBOW on this link here: https://www.hostinger.com/aniakubow

Video content:

  • 00:00: Introduction
  • 03:52: Getting our .com domain
  • 05:43: File Setup
  • 09:18: Website layout in HTML
  • 15:41: Making a Nav bar
  • 20:31: Making a 'Hero' Section
  • 48:20: Making an 'About Me' Section
  • 55:52: Making a 'Projects' Section
  • 01:08:35: Using Anchor Links
  • 01:12:57: Using media query for tailored views on mobile, tablet and desktop
  • 01:14:50: Making a Hamburger drop-down menu
  • 01:23:55: Deploying our website onto the internet with SSL


Other links:
In this video I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-free

If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://www.instagram.com/aniakubow

Discussion (0)

pic
Editor guide