Should i look at example codes for my portafolio?

1

I just recently started two weeks ago and I’m struggling a lot on my first projects. I know i should try my best make my own code but I don’t come up with ideas; just as the navigation bar, tried to do it like for 3 hours, I gave up, and took an example’s code; I used it and tried to understand it.

So should I keep looking into more example’s code or what do you guys recommend me to do?

2

Hey there fellow camper! :slight_smile:
I know the feeling, sometimes you can beat your head into a wall for long enough that the learning process actually comes to a halt.
My personal recommendation for you is to start with a bootstrap theme template.
Can find many of them here -> https://startbootstrap.com/template-categories/all/

And bring in your template code and set up any bootstrap source files required in codepen, so that you can hit run and see your pretty new template :slight_smile:

Now from there you can customize it in any way you’d like.
You’ll find yourself, hopefully, constantly referencing to the documentation at http://getbootstrap.com/.
And you’ll gradually start figuring out all the nifty stuff that bootstrap has to offer! I recommend adding http://getbootstrap.com/ to your bookmarks on your browser! Because you’ll be using it that much! :slight_smile:

Cheers,
-CraftyClark

2 Likes
3

Thanks a lot ! It’s really helpful

4

and this is just a suggestion. It’s up to your preference.
But I would recommend ditching code pen and downloading a text edit like sublime3 to do this and all future projects. I think 99% of developers would agree w/ me that you’ll learn way more this way. Basically, if you use codepen now, there will become a point where codepen is no longer capable of handling your projects, and transitioning to a text editor will probably case you some headache. Starting w/ a text editor from the beginning seems best from my perspective.

Cheers,
-CraftyClark

2 Likes
5

Copy-Pasting a bootstrap template with a few edits and claiming it as your own work is plagiarism and is against the rules (as well as completely impractical for learning). However, if you are short on ideas, there is nothing wrong with looking at example projects, code samples, or modeling parts of your site after a template. I like to open up websites in Chrome developer tools and view the html and css code. Just keep in mind that it needs to be your own work. :slight_smile:

1 Like
6

“There are many great portfolio templates out there already. However, you should consider building your portfolio page as much as you can from the ground up. Using Bootstrap can help make this process much easier for you.”
@fernibain hey man. startbootstrap actually may be a bit confusing for you to get going as well.
What would possibly would be best is to go to http://getbootstrap.com/getting-started/
Scroll down the page to the “basic template”

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Start with this.
And then directly below this on the same page. You’ll see examples using the framework and how to implement different components. I’d recommend looking at the code of some of the examples. And begin with trying to implement the navbar code into your basic starter template.

Cheers,
-CraftyClark

7

@CraftyClark - I’d recommend Brackets for beginners. Sublime Text is a good editor, but I think people new to web design will find the Live Preview feature in Brackets to be very useful. I’ve also created a basic HTML 5 skeleton that people can use to learn how to set up their own pages. It can be found on my github. If anyone needs help cloning that repo or downloading it onto their computer, just message me and I’ll help you.

3 Likes