Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Frank Grillo
.a{fill-rule:evenodd;}techdegree seal-36
Frank Grillo
Front End Web Development Techdegree Graduate 16,715 Points

Linking all the images in Front End Project 2

I need help properly linking all the images in Front End Project 2.

Here's my code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@700&display=swap" rel="stylesheet">

    <title>Frank's Blog</title>
</head>

<body>
    <header class="container clearfix">
        <h1 class="clearfix">
            Frank Grillo
        </h1>
        <nav class="main-nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div class="container clearfix">
        <img src="images/responsive-layout-profile.png" alt="" class="top-pad">
        <p class="margin">Hi, I am a Front End Tech Degree student at Team Treehouse.</p>
    </div>

    <h6 class="title clearfix" id="portfolio">
        Portfolio
    </h6>
    <div class="container clearfix">
        <div class="portfolio col1">
            <img src="images/portfolio-1.png" alt="">
            <h4>Marketing Page</h4>
            <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
        </div>
    </div>

    <div class="porfolio clearfix col2">
        <img src="images/portfolio-2.png" alt="">
        <h4>Search Page</h4>
        <p>This project searches through a database to find information the user is trying to look up.</p>
    </div>

    <div class="portfolio clearfix col3">
        <img src="images/portfolio-3.png" alt="">
        <h4>Travel App</h4>
        <p>This app is pretty simple. It tells you which mode of transport is fastest.</p>
    </div>

    <div class="portfolio clearfix col1">
        <img src="images/portfolio-4.png" alt="">
        <h4>Map of Favorite Places</h4>
        <p>This project uses an API to map my favorite spot in Fallout 4.</p>
    </div>

    <div class="portfolio clearfix col2">
        <img src="images/portfolio-5.png" alt="">
        <h4>Photo Gallery</h4>
        <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
    </div>

    <div class="portfolio clearfix col3">
        <img src="images/portfolio-6.png" alt="">
        <h4>Calculator</h4>
        <p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
    </div>

    <footer class="main-footer clearfix">
        <h3 id="contact">Contact</h3>

        <p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>

        <ul>
            <li>Phone (201) 952-4649</li>
            <li>Email fsg12491@aol.com</li>
        </ul>
    </footer>

</body>    
</html>

/* General rules */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@700&display=swap');
* {
    font-family: 'IBM Plex Sans', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
}
h3,
h4 {
    margin: 4%;
    font-size: 1.2em;
}
body {
    font-size: 1.25em;
}
p {
    margin: 7%;
}
img {
    max-width: 100%;
    padding-bottom: 3%;
    padding-top: 3%;
}
ul,
ol {
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}
a:hover {
    color: blue;
}
.container {
    text-align: center;
    margin: 0 auto;
    width: 80%;
}
/* Nav */
.main-nav ul li {
    margin: 2%;
    padding: 2%;
}
nav ul {
    padding: 0;
}
nav li {
    font-size: 1.2em;
    font-weight: bold;
}
/* main content */
.top-pad {
    padding-top: 3%;
}
.margin {
    margin: 7%;
}
.title {
    margin-top: 10%;
    margin-left: 4%;
    margin-right: 4%;
    margin-bottom: 4%;
    font-size: 1.2em;
}

.skills img {
    width: 30%;
    display: inline-block;
    padding-top: 2%;
}
.main-footer h3 {
    margin-top: 7%;
}
.main-footer ul {
    margin-bottom: 7%;
}
@media (min-width: 766px) {
    .main-nav li {
        display: inline-block;
    }
    .top-pad {
        float: right;
        margin: 0;
        padding-top: 0;
    }
    .margin {
        float: left;
        width: 48%;
        margin: 0;
        text-align: left;
    }
    .col1 {
        float: left;
        width: 48%
    }
    .col2 {
        float: right;
        width: 48%;
    }
    img {
        max-width: 100%;
        padding-bottom: 0;
        padding-top: 0;
    }
    .container {
        width: 90%;
        margin: 0 auto;
    }
}
@media (min-width: 1024px) {
    body {
        font-size: 1.75em;
    }

    h1 {
        float: left;
        display: inline-block;
        width: 50%;
    }
    nav ul {
        float: right;
        display: inline-block;
        width: 50%;
    }
}

/*
clearfix
*/

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
.clear {
    clear: both;
}
Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

A much better way to share code (particularly with large or multiple files) is with a workspace snapshot. Take a look at this video about sharing a snapshot of your workspace.

It's also helpful to provide a link to the course page you are working with. You might also want to take a look at this video about Posting a Question to the forum.

Also, this looks like a reposting of your previous question, you might want to revisit and delete that other one.

1 Answer

Laura Coronel
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Laura Coronel
Treehouse Teacher
Laura Coronel
.a{fill-rule:evenodd;}techdegree
Laura Coronel
Treehouse Teacher

Hey Frank Grillo!

The best way to get help on the Techdegree projects is asking the question in the Slack community! There you can share your GitHub link and speak to the Student Success Specialist and other students LIVE. In Slack you can ask questions on the topics you're learning, have your project peer reviewed before submitting it, getting help on project and more! In Slack, we can download a copy of your project and really dive deep and give much more detailed and clearer answers in a much shorter response time. It's a great community!

On the bottom right side of your Techdegree home page there's a section titled "Your Techdegree Support Center" with some pictures of your Student Success Specialist. At the bottom of that section is a big blue button that reads "Go to Slack" or "Join Slack". Click on that button and follow the steps to logging into Slack! We hope to see you there!