Could someone please help me a bit with the first portfolio project?

Code Feedback
1

I’m slightly overwhelmed and slightly more frustrated. I don’t know how to put it other than to just simply say I don’t know how/where to start. I mean, I’ve blown through all 119 exercises with relative ease until now, as well as completing html&css, as well as jquery and “how to make a website” on Codecademy, yet here I sit totally unsure of how to even start.

I don’t even want to do anything fancy. I’m a big fan of keeping it simple. Maybe the nav bar on top, some content in the middle, and then the contact stuff at the bottom. I don’t know why I’m blanking out while trying to code, and would really like it if someone could message me or something and help me out a bit? Thanks guys.

2

I’ve blown through all 119 exercises with relative ease

That is a very good sign.

If it’s your first time making a webpage, you might feel a little uneasy, like where to start.

First have a visual idea or much better write it on paper; how the final webpage should look.

Now the coding part: May be look at this sample HTML page and see where each of part of your webpage goes.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple HTML document</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Try to decide what goes where in the code.

3

Thanks @Chromian777 .

I got that much down. Also, doesn’t most of that meta stuff such as the ‘head’ and ‘html’ and ‘!doctype’ tags get left out in codepen?

I did do the tribute page and it came out decent, so I guess formatting a basic html page with text and importing images isn’t a huge deal, and I don’t have a hard time assigning attributes and properties with css, and even got through all the jquery stuff, but tying it all together, and giving my page a layout, and all those divs, I guess that’s where I’m hung up.

4

Seems like you can build a decent webpage but need “a push” to start.

Just start it, that’s all I can say.

5

Try designing the page first. Mock up what you want the page to look like. Many people have used the example as a skeleton, at least that’s what I did.

After that, I used bootstrap to create each section that I wanted - Navigation, Header, About, Portfolio, Contact, and Footer. I went into each section and created more divs - About had Text and Photo, Portfolio had Images and Headers, Contact had Icons. I put a border around each element and I adjusted the size according to the mock up.

Obviously you don’t have to follow my step by step. I’m just saying that having a structure and following that goes a LONG way. It’s hard to start when you’re staring at a blank screen. If you have any specific questions, feel free to ask the forum / chat, or peek at someone else’s code.

Good luck!

6

Thanks man. For what it’s worth, this is my tribute page: https://codepen.io/vxm007/pen/GjkrJZ

And I mean I don’t absolutely hate it. It’s readable at least. And yeah I’ll probably just start writing, put the content in and try to worry about colors and navbars and aligning things later…

7

That is a good structure. Your pic looks familiar, I think I may have seen your portfolio if you posted it. I like the idea of just using bootstrap. The grid thing seems like it offers some ease in organizing your layout, just trying to figure out how to go about doing that. I’m sure I’m overthinking it to an extent, as I tend to do :wink:

1 Like
8

You page looks good, I see a World War vibe :wink:

Two things though:

  1. You might want to use complimentary colors for text and background, if the the background is black, text color should be opposite like white and vice versa. The text is a little bit hard to read.

  2. Margins and Padding. Make sure text, pics and border are not too close to each other.

All the best. :slight_smile:

9

Haha, I just posted mine yesterday so you probably came across it! If you don’t think freeCodeCamp expanded on Bootstrap enough, check out this Youtube tutorial. I haven’t watched it yet myself, but I saw it posted on another Portfolio thread from someone else and I’m looking forward to it!

But I would totally time some time to look at other pages, get some ideas, and mock up a draft. Then take a break and then create a structure. And like I said, I just finished it, so if you have any questions, drop me a message!

1 Like
10

Thanks man I’ll check out that video right now

11

Try looking at other portfolios through google search to know the structure. You don’t need to worry and be intimidated at how cool they look and how interactive they are. You will eventually learn those, and when you do, you can always update your portfolio to suit you. What’s important is you have a structure in mind, and then work through that. Polish your bootstrap, html, and css skills. Then when you’ve learned more javascript, go back and improve your portfolio. I myself have also just started with the portfolio project, and will try to finish it throughout the weekend. Hope you can do that too. Good luck to us!

12

I second the suggestion to start with a draft on paper. Like, literally sketch the appearance of the page on a piece of paper. Then you can figure out what tools get you the design you want, rather than winding up with a design that you were led into by the tools at hand.

I also second the suggestion to look at others. Just search for “portfolio” here on the forum, and you’ll find hundreds of submissions. Some will give you ideas you like, some will help you, eh, know what you don’t want to do, and at some point all these inputs will cause something new to pop up in your brain of its own accord.

13

@AbdiViklas Thanks for the response. I got it going, though it isn’t entirely completel I’m happy with how it’s coming out. My concern wasn’t so much the design of it but actually coding the structure of the layout but I got it rolling :slight_smile: