From PSD to HTML/CSS + php contact form

Question

Hello there,

So if anybody would be so kind and explain me couple things that would be great!

So, in order for me to learn and me comfortable with the whole desigining aspect I have to do everything by my self, that is how I learn, and most of people do. Here is my design: http://postimg.org/image/9ccz89pfb/

I am going for a one page portfolio. When you click on the link I want the website to transform you down or up to the specific content. Also, I want to add a php form that will allow people to contact me.

So now this is what I came up in the HTML markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-  strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tomasz Niemczewski's Portfolio</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="container"> <div id="logo"> <img src="images/logo.png" alt="Tomasz Niemczewski Design" /> </div>

    <div id="icons">
        <a href="http://facebook.com"><img src="images/icons/facebook.png"></a></img>
        <a href="http://twitter.com"><img src="images/icons/twitter.png"></a></img>
        <a href="http://google.com"><img src="images/icons/gplus2.png"></a></img>
        <a href="http://yahoo.com.com"><img src="images/icons/rss.png"></a></img>
    </div> <!-- end of icons -->

    <div id="nav">
        <ul class="navigation">
            <li><a href="#">about<a/></li
            <li><a href="#">portfolio</a></li>
            <li><a href="#">contact<a/></li>
        <ul> <!--end of nav -->

    <div id="about">
        <img src="images/about.jpg">
        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently wi
        th desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div> <!--end of about -->

    <div id="whyme">
        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently wi
        th desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div> <!-- end of why me -->

    <div id="portfolio">
        <div id="example1">
            <img src="images/example1.jpg">
            <p> this is example ONE, this is a website that has been created for a company in new england, 
                its a website, or its a business card, or its a random text, or whatever: 220x150</p>
        </div> <!-- end of example 1 -->
        <div id="example2">
            <img src="images/example2.jpg">
            <p> this is example TWO, this is a website that has been created for a company in new england, 
                its a website, or its a business card, or its a random text, or whatever: 220x150</p>
        </div> <!-- end of example 2 -->
        <div id="example3">
            <img src="images/example3.jpg">
            <p> this is example THREE, this is a website that has been created for a company in new england, 
                its a website, or its a business card, or its a random text, or whatever: 220x150</p>
        </div> <!-- end of example 3 -->
    </div> <!-- end of portfolio -->

    <div id="contact">
        <p> A email form / scrip will go here </p>
    </div> <!-- end of contact -->

    <div id="footer">
        <a href="http://t0ms0nsdesign.com">Back to Top </a>
        <p>t0ms0nsdesign.com                            Copyright(c) 2103                               All rights reserved.                        </p>
    </div> <!-- end of a footer -->

</div> <!-- end of container -->

</body> </html>

[/code]

Now, is this correct?

Question:

Now I need to style everything in the CSS:

How do I put the seperates in ( orange / yellow ) a. between the content b. above and at the end of the page
how do I work with grids, meaning I want to style everything as it is in the Photoshop.. and yes I have watched the tutorial on working with the grids but I am still confused.

Thank you for all the help!!!!

Thomas

Answer 1 · 2013-07-02T22:41:23Z

July 2, 2013 10:41pm

HERE IS THE CODE!

http://pastebin.com/hCKrZbTG

Answer 2 · 2013-07-03T00:42:53Z

July 3, 2013 12:42am

For the separators you can just make empty divs and assign a class to them that has something like the following:

.yellow-line { width:100%; border-bottom: 2px solid yellow; }

Or you could use <hr>'s with CSS

Answer 3 · 2013-07-03T01:14:31Z

July 3, 2013 1:14am

For the separators I used the div class, yep Thanks! Now

I just noticed that the font I have used for the nav menu is not available in google fonts so whats my best option?

To cut it out, and paste it as an image in the li list? How can I make the hover effect then?

Answer 4 · 2013-07-03T01:38:01Z

July 3, 2013 1:38am

Hi Robert,

I'd like to suggest a few things:

1) Change your DOCTYPE to the html5 doctype -- for your code/site, you may as well keep up with the trends. As you learn more CSS/HTML tricks, the html5 doctype will serve you better.

<!DOCTYPE html>

2) I suggest keeping your code semantic - Empty Divs are not the semantic way of creating separators. Using CSS to make borders or outlines are great for separating content visually is the best way to go. Where appropriate, you can also use the horizontal rule tag -- usually to separate a section in an article.

<hr>

3) Don't use images for text, it's an accessibility and SEO problem. Check out Google Fonts and pick a good substitute. Otherwise, check out CSS @fontface. If you are free to host the font (check its copyright), you can put the .ttf or .otf file in your server, and just use an @fontface in your stylesheet.

/** CSS FILE **/
@font-face {
font-family: SomeFont;
src: url('fonts/somefont.ttf'); /*replace with the correct URL to the font */
}

a.fancy-font {
    font-size: 20px;
    font-weignt: bold;
    font-family: SomeFont, Helvetica, Verdana, sans-serif;
}

HTML:

    <a class="fancy-font">Here's the crazy font</a>

Good Luck!

Answer 5 · 2013-07-03T02:16:24Z

July 3, 2013 2:16am

Wow, Thanks Mr. Sobieski, your last name reminds me of my favorite vodka, Sobieski!

Yes, Ill definitely give it a try and post my work when I am done.

Thanks again!

Answer 6 · 2013-07-03T18:05:32Z

July 3, 2013 6:05pm

Thanks guys!

I am almost there, few more problems:

So at the end of a page I want to add a yellow bar so here is the div:

HTML <div id="bottombar"> <img src="images/yellowbottombar.jpg"> </div>

CSS

bottombar img {

height: 10px;
width: 100%;
padding: 0px;
margin: 3px 0 10px;

}

But, It seems when I add margin, or padding it scroles down and there is the background again, is there a way to fix it?

http://t0ms0nsdesign.com/template/

Answer 7 · 2013-07-03T21:12:06Z

July 3, 2013 9:12pm

Problem fixed! Thanks a lot!!

Now for me in order to style the text so it will be lined up in the about/why me section do I need to put in new divs?

How do I make the text go around the picture?

Also, for the portfolio part I would like to pictures and thier description to be centered, whats the best way to do it? Add margins, or just push it ?

Welcome to the Treehouse Community

Looking to learn something new?

Robert Niemczewski

Robert Niemczewski

From PSD to HTML/CSS + php contact form

7 Answers

Robert Niemczewski

Robert Niemczewski

Colin Marshall

Colin Marshall

Robert Niemczewski

Robert Niemczewski

Alexander Sobieski

Alexander Sobieski

Alexander Sobieski

Alexander Sobieski

Colin Marshall

Colin Marshall

Alexander Sobieski

Alexander Sobieski

Robert Niemczewski

Robert Niemczewski

Alexander Sobieski

Alexander Sobieski

Alexander Sobieski

Alexander Sobieski

Robert Niemczewski

Robert Niemczewski

Robert Niemczewski

Robert Niemczewski

bottombar img {

Alexander Sobieski

Alexander Sobieski

Robert Niemczewski

Robert Niemczewski