Need some help with Portfolio Project

Need some help with Portfolio Project
0
#1

So I am having a bit of trouble trying to get all of the images and text to fit in this box that I created for my about me section. They all seem to not let anything be placed above or below them in that box. The main thing that I am trying to do is to add more social media icons below the two that are there, but when I do it just pushes them further to the right. What am I doing wrong? I am only three days into learning code and everything I have done so far has been from tutorials and different code learning apps. However I can not seem to find a fix to this issue. Any help would be greatly appreciated. Please feel free to look at my code to tell me what I can fix.

Here is the link:

#2

The fist thing is you should put your Logo and Navigation inside a header tag. Header is then divided into two sections, first one is for the logo, second one is nav.
I divided the About me section into three Divs each having a unique ID. Javascript is nood needed at this point. You can use Javascript later when you want to add advanced effects and interactivityin your site.
Here is the code.
HTML

<body>
       
    <header>
       <a href="#" id="logo">Brandt Hugins</a>
       <nav>
        <ul class="navbar">
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        </nav>
    </header>
    <section id="about-me"> 
        <div id="left">
            <img class="insta" src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/instagram_logos_glyph/03H5cHNMt-Jni4pe9u+7/glyph-logo_May2016_200.png"> 
            <img class="twitter" src="http://animagehub.com/wp-content/forum/uploads/2016/08/twitter-vector-18.png">
            <img class="fb" src="http://www.pngall.com/wp-content/forum/uploads/2016/07/Facebook-Transparent.png">
            <img class="google" src="http://freeiconbox.com/icon/256/3535.png">
        </div>
        <div id="center">
            <p class="para1">An aircraft mechanic just trying to figure out what to do with his life in 18 months. I'm a beginner coder who went into this knowing the bare minimums. My end game in all of this is to develop game apps.</p> 
        </div>
        <div id="right">
            <img class="photo" src="https://scontent-dft4-1.xx.fbcdn.net/v/t1.0-9/15940837_1592837084076740_9126466424961385690_n.jpg?oh=bfaf9772693d5f8b23453f2d4ecea5b1&oe=5918C896"> 
        </div>
    </section>

   
</body>

CSS

* {
    margin: 0;
    padding: 0;
}
#menu {
    width: 100%;
    margin: 0px;
}
body{
    background-color: green;
    margin: 0;
    height: 900px;
    font-family: Rockwell;
    overflow-x: hidden;

}
header {
    background: #151515;
    width: 100%;
    height: 76px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 2px solid white;
    z-index: 99;
}
ul {
    list-style: none;
}
ul:after {
    display: block;
    content: "";
    clear: both;
}
ul li {
    display: inline-block;
    float: left;


}
ul li a {
    display: block;
    color: aliceblue;
    text-decoration: none;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 1.3em;
}
ul li a:hover {
    background: gray;
}
#logo {
    margin: 20px;
    float: left;
    width: 200px;
    height: 50px;
    display: block;
    color: aliceblue;
    font-size: 1.7em;
    text-decoration: none;

}
nav {
    float: right;
    padding-right: 30px;
}
#about-me {
    border: 1px solid #000000;
    border-radius: 10px;
    height: 310px;
    width: 85%;
    margin: 100px auto 10px;
    padding: 20px;
    text-align: center;
    background: gray;
    box-shadow: 5px 5px 8px #1f1f1f;
}
#left {
    width: 30%;
    float: left;
    text-align: center;
}

.twitter {
    width: 150px;
    padding-left: 5px;

}
.fb {
    width: 150px;
    padding-right: 27px;
    margin-right: -10px;

}
.insta {
    width: 125px;
    padding-bottom: 10px;
    padding-left: 20PX;
}
.google {
    width: 125px;
    padding-bottom: 15px;
    margin-left: -10PX;
}
#center {
    width: 34%;
    float: left;
    margin: 0 24px 0 26px;
}
#right {
    width: 31%;
    float: left;
}
.photo {
    width: 300px;
    border: 4px solid;
    border-radius: 20px;
}
#center p {
    text-align: left;
    font-size: 1.76em;
}
#3

Wow man that looks great, and so much more simplified than mine was. I looked through the code and I can see most of the mistakes I made. I do have one question though, what is this little block of code:

ul:after {
display: block;
content: “”;
clear: both;

I commented it out just to see what it did and it put all of my icons on the right side of the screen instead of on the nav bar. Why does it do that?

Edit: Also on another note, are there any tips to make the code more mobile friendly? I made a new pen just to see what your code looked like and then I was going to go back and edit mine accordingly but when I loaded the new pen up on my iPhone everything was out of place. On my original pen it loads fine, the nav bar doesn’t scroll down, but other that that it looks the same. I don’t know what the difference between the two is other that the javascript code I used for the nav bar. Is there anything you might know that would affect that?

#4

That block of code is used whenever we float the contents of a div. Then the div box itself collapses, because it thinks that there is nothing inside it. Thats why we apply this rule to the parent element.
I havnt made your code mobile friendly a.k.a responsive. You can use CSS Media Queries, CSS Flex, and Bootstrap to make responsive webpages, which will be viewed nicely on PC, Tablet and Mobile.

#5

Thanks for all of your help man. Here is the final product, I made some edits to it based off of the help you gave. If you would like to look at it and throw me some feedback that would be great!

#6

Wow, This time you have done a great job. :slight_smile:

#7

Glad you figured your problem out. I’m on the same project and I have a project for you…Did you already know someone Javascript before starting? If not how did you learn that in 3 days? Am I missing something or something? The example provided by FCC had a lot of javascript involved in it even thought the website itself didn’t look too complex. I thought I was on the right track until I saw that code.

#8

I’m not the OP, but my advice for javascript is to learn it in pieces as you need it. Basically, you can first make your site by using HTML to build the framework (the bare bones) of it. Then use CSS to act on your HTML classes so you get everything styled how you like it. Lastly, when it comes to dynamic behavior (such as clicking a button), you can move to the javascript. For our purposes, javascript is useful for breathing life into those bare bones of your projects so you can do some fun and useful stuff, not just have a pretty-looking website. I am still relatively new at this stuff too, but I have found that when I can’t figure out how to do something with javascript, I can usually find a good answer on StackOverflow with the help of a succint google search. If you’re having trouble coding a button to link to another webpage, for example, try googling something like “javascript button click open link”. You can do this! Don’t be afraid of javascript, it’s really not too bad once you get your feet wet!

#9

Well I wouldn’t really say that I “know” JavaScript. The only JavaScript that is in that page is to make the nav bar move up and down with the page and I watched a tutorial for that. However I am in the same boat as you as far as FCC’s lessons in JavaScript being complex. I recommend downloading the app Learn JavaScript from the App Store if you really want to understand JavaScript better. It breaks it down more simply and explains what it is better. The same developers also have one for html and css and those helped me a lot and taught me somethings that FCC didn’t.