Website marketing using high authority backlinks from popular website's, find out more at webcentreplus.com or email colin@webcentreplus.com
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.
——————–
JOIN EVVEREST:
http://evverest.com/
USE MY HOSTING LINK:
https://m.do.co/c/ffbb4875a5db
FACEBOOK:
https://www.facebook.com/garrettlove8/
TWITTER:
Tweets by garrettlove8
source – For all your website needs, visit Spalding Web Design
42 Responses to How to Build a Portfolio Website from Start to Finish – Coding the Homepage
Leave a Reply
You must be logged in to post a comment.
Just too hard to read the code.
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!!
my nav bar does not shift to the right side
I have a question, how big should my background picture be cuz it zooms in on my picture cuz its to big 🙁 ? help
Just one question bro : What Website Builder do you use pls !!!!
how do I make a portfolio site if I am just a web design student?
Great Video !
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
covering the whole page with a picture cannot possibly be a good idea
if someone with a high resolution monitor clicks on your page it will look like crap, and the load times will be unnecessarily long
What program are you using here to write code?
What happened to the website? Is it down because I tried to go there and look at what you've done and it says the DNS cant be found.
zoooooooom in!!!!!!!!!!!!!!!!!!!!!!!!! i cant read the code
You're a great teacher Garrett! Easy to follow instruction.
Thanks a lot!
Hey is there any chance you could share the psd file from photoshop because I don't have access to photoshop, and if you cannot is there another psd that would work similar to this, just so that I can follow along?
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
Can this be done in dreamweaver?
What HTML editor are you using? Could you please place a link for download. thanks
can someone check my code my css isnt working
<!doctype html>
<html lang="en">
<head>
<title>Home</title>
<meta name="Viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<div class="main">
<div id="container">
<div class="header">
<img class="logo" src="images/Logo.png" height="75" />
<nav>
<a href="index.html">Home</a>
<a href="portfolio.html">Portfolio</a>
<a href="about_me.html">About me</a>
</nav>
</div>
<span>
<h1>Steven Designs</h1>
</span>
<span>
<h2>My own custom Designs.</h2>
</span>
</div>
</div>
</body>
</html>
css
body{
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;
}
what did you do to get your logo to shrink down? when mine is loaded its 400x400px
Very good Tut´s.. Clear language good descriptions..
Everythings fine!
But ine thing: please take your mic out of your keyboard…
But please go on!
Great tutorial. You go at a decent pace and explain everything clearly. Really helping me out in progressing my web development career. Thanks and keep it up!
href-say hyperlink reference not haref
zoom in!
Can you also make a tutorial on parallax? and website about tourism.
Thanks.:)
hey i got a problem with the image logo and background the will not show can you tell me wy it is
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?
Man!! Thank you so much! I always wanted to watch an entire web design tutorial like this 😀
You need to work on indenting your code properly man.
Why did you build a directory and then start coding like this?
Hey so im trying to get my navbar in the center under my title but I am not able to. What do I need to do to do it?
Great tut! but for some reason my logo isn't showing up. I have <img class="logo" src="/images/logo.png" /> but nothing appears in my browser. Any idea why?
Hey man! thanks so much for this tutorial! you really are good at explaining and showing this to a beginner like me.
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!
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.
How can you show it so fast on your website? I have to wait like 30 sec after i press Publish.
Where can I find the logo.png image? Thanks, and fantastic tutorial so far. You've made me go out and buy Coda 2! It's awesome.
Loved this Tut! thank you!
I'm having a problem with the media query:
I put the following code, as you suggested:
@media screen and (min-width:1000px) {
#container {
width:1000px;
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.
Thanks!! 😀
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
This is bloody fantastic. Im self teaching myself and this is a perfect showcase on how to align certain elements. ONE QUESTION! WHy did you use id once and class for everything else???