So I’m working on my tribute page. I’ve made it up to this point following the map with relative ease (I have some previous knowledge with HTML/CSS). Now I’m on Codepen and I find myself looking at other people’s tribute page’s code. Is this OK? I’m not copying and pasting, just using it as a guide because honestly, I don’t have the knowledge of the various classes and commands I should use. The only ones I’m aware of are those taught here. I just don’t feel right or feel like I’m learning the right way, but I’m not sure any other way to do it. Anyone have any opinions or suggestions?
I personally think that you shouldn’t look at the code of a project you haven’t finished yet—particularly with the “earlier” projects in the curriculum—and it’s great that you are questioning yourself.
I think most people can’t avoid “copying” something that they like. You may see a nice Bootstrap class called
jumbotron in other people’s portfolio and decide to use it when, in fact, it’s just an abstraction of a bunch of fundamental DOM elements that you should really know and code from scratch if you want to become a good developer.
Reinventing the wheel may be a concern here, but it should be the least of your concerns when you are just starting out, not least because if you don’t learn your basics you will end up wasting your time later on trying to figure out why something doesn’ work (and perhaps even give up on coding).
It’s perfectly fine to let your projects be ugly when you are learning. This workflow may help:
- Plan basic layout and/or functionalities on a piece of paper (or your tablet)—don’t go overboard and plan every little thing because it’s a waste of time, your might as well start coding if you are writing down the logic of a form submission
- Create the skeleton of your page with
<div>s (or any other appropriate elements of your choosing), make sure that everythingis positioned as you intend them to be
- Be as diligent and sensible as possible with applying classes your
<div>s—it will save your time once you want to start stylising things
border: 1px dashed black;to visualise your
<div>s as necessary
- Let the page be ugly
- Really, just let it be ugly for now
- Put text and pictures in and make sure everything is positioned properly
- Style things and check again that things are working properly
- Show people when it’s done (you may not get feedbacks sometimes because not everyone has the time to do it—in cases like that, show your family and friends)
Changes are you probably already know more than you need to—so don’t over think it. Get things done, move on, and come back again to fix things once you will have learnt more.
It’s a useful exercise to look at other people’s solutions after you’ve finished a project or algorithm challenge, but it shouldn’t be necessary beforehand. Instead, there are other channels you can look to:
- Creating a specific effect/interaction: Google search e.g.
smooth scrolling effect jsand look at a few of the Stack Overflow answers.
- Learning about a specific HTML element, CSS property, etc.: search for it on MDN.
- Learning how to use a Bootstrap class, jQuery method, or something from another library: read the docs of that library.
Just to reiterate what others have said well.
To me, the different levels here are:
- Try to solve it yourself.
- If you run into trouble, google it.
- If that doesn’t work, search the forum (I’ll bet you money you aren’t the first camper to have that problem).
- If you can’t find the question, ask the forum. Just ask a very specific question, and show us what you’ve done.
To me, that is a fairly good strategy. Obviously, the higher up on that list, the better you’re learning
- Check youtube - you’ll find people coding specific challenges and stepping through their solutions. Don’t code along, just watch. Then try their solution.
- Peak at others’ completed projects. Just peak to steer you in the right direction. Don’t actually copy their code, just get an idea.
- Code along with the youtube example, making the changes you need.
Those are a little more iffy, but not exactly beyond the pale. They are a good backup strategy if you run into trouble.
- Directly copying someone else’s project code and using it as a framework for yours.
- Completely copying someone else’s project and making minimal changes so you can hide its origin and claim it as your own work.
These clearly are “cheating” territory.
That’s not to say you won’t cut and paste here and there. You may have little issues here and there where you find and example in MDN or some solution on Stack Overflow. There is nothing wrong with a little cutting and pasting here and there. Professional coders do it all the time. But you must understand what is happening, and will probably need to make adjustments to fit your specific needs. Borrowing a little code here and there isn’t an issue.
The most important thing is that you learn. The less you borrow, the more you learn.
Thanks for the responses. To clarify a bit, I am not copying someone else’s code, just utilizing it as reference, similar to how I occasionally look back at lessons to refresh my memory. I’ve laid out how I want my project to look and think I just need to start plugging away at it.
What would be a good resource to reference? Are their any books I can purchase that have all HTML/CSS/JS commands that I can use? That’s where I’m getting a block. I don’t know what it is I’m looking for, so that’s the problem for me (what kind of styles, features, effects).
Hi buckeyerunner1, you don’t need to buy books. If you take a look at this site: https://www.w3schools.com/ you can find tutorials that you can read through and get practise with. That’s a good site to get an overview of a topic really quickly.
It is OK to get stuck or question ourselves. My first tribute page was a mix of Google and guesswork. Eventually, it turned out OK. Now, I look back and hate it so I did a second one. That is what a journey is about. Discovery.
Today, I was watching a video and the guy said something that really stuck with me - The message was something like “The hardest part of being a developer is working out how to split down a large task into smaller chunks.”
With this in mind, I would try to visualise or draw the layout and think about the functionality you want. Then, if you don’t know how to do a part, use Google or ask on the forum here or elsewhere.
For your reference, the thing I remember scaring the hell out of me for the tribute page was creating a box in CSS. I mean, I did the tasks, but it made no sense. A few hours of searching and wanting to scream I found how to do it. @CodeNooooob has already reference the site that I used.
Thanks for all the responses. The link that @CodeNooooob shared is exactly what I need. Just something to reference so I don’t feel the need to look at someone else’s code. I’ll be sure to share my page during the process and at the end for feedback.
Glad to help. What you find with the projects is that you can look at the task and decide what you need to study in order to do the job. I wouldn’t pay too much attention to the number of hours that the project is supposed to take by the way. It might be listed as 10 hours; but if you need to research a new topic, you might spend a week doing that properly. Once you’ve done your research, you won’t be tempted to look at anyone else’s solution as you’ll have your own ideas already. Also, you can always go back at a later date and rewrite your project if you want to once you’ve learned some interesting new ways of doing things.
If you don’t know how to do something, you have to look for it on Google.
I’m the same boat…I really like that link also…best