How to Build a Portfolio Website from Start to Finish – Coding the Homepage

Finally the time has to start coding our website. In this video we will begin the coding process, starting with our home page.






source – For all your website needs, visit Spalding Web Design


  1. You have such a smooth and pleasant voice. And your skills are on point. Thank you so much for taking the time to make this well explained video. My only suggestions are to please increase your volume/get a louder mic and PLEASE ZOOM IN, squinting to read your code is very straining to the eyes.
    Thanks so much!!

  2. What hell??? I don't know what you are typing, i have just download the whole series but when i start watching your videos then i found your word too much small i can't read it. tell me you don't have option to increase font size?? i hate…. why i download the videos, it will not help full for me…… useless

  3. Hey man, nice vid!

    My code is identical to yours and yet I get a white margin on the bottom of my page regardless of what browser I use when it's maximized. Also, the 700px container is tiny on google chrome but not on firefox, how can I solve this?
    Thanks man

  4. can someone check my code my css isnt working
    <!doctype html>
    <html lang="en">

    <meta name="Viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/style/style.css">

    <div class="main">
    <div id="container">

    <div class="header">
    <img class="logo" src="images/Logo.png" height="75" />

    <a href="index.html">Home</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="about_me.html">About me</a>

    <h1>Steven Designs</h1>
    <h2>My own custom Designs.</h2>

    margin: 0px;

    .main {
    height: 700px;
    Background-image: url(/background2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    Background-size: cover;
    #container {
    Height: 700px;
    Width: 1000px;
    Margin: 0px auto;

  5. Any clue why my css is not being picked up? Tried this
     <link rel = "stylesheet" type = "text/css"  href = "/style.css"> then this
     <link rel = "stylesheet"  href = "/style.css"> then this
     <link rel = "stylesheet"  href = "style.css"> nothing is working what am I doing wrong here?

  6. Hey, make sure that when you start a new project , show us what we will be doing . In the way , you could make a prototype first and give us an idea . It would be nice i believe 🙂 

    bdw , background-size:cover; 
    saved me ^^

    Good Job!

  7. Hi I'm enjoying your tutorial but I'm following you to the letter and can't get the nav to move over to the right. the styling for the 'Code the web' and 'learn the internet' are working fine but the nav is stuck beside my logo? any feedback would be appreciated, thanks.

  8. I'm having a problem with the media query:
    I put the following code, as you suggested:
    @media screen and (min-width:1000px) {
         #container {
              height:720px; /* Resized to my liking */
              margin:0 auto;

    But when I move the screen around to text the resizing, it seems like, whenever I go smaller than 1000px, it "resets" the fonts from the h1 and h2, as well as puts my navbar, then puts them below the logo placeholder I put on my page. Do you know what is going on?
    If it doesn't make sense, please let me know. Thank you in advance ad thank you for the time you take to do these wonderful, simplistic tutorials. Much appreciated.

  9. Hey so we were talking earlier and I asked how to make a contact form and I didn't get a answer but that is probably cuz is was late at night. But 2. I have another question so what language does a ux/ui designer need to know

Leave a comment