Is it OK to try and mirror the example project or should you come up with your own design?

The title basically. I have completed first three projects so far and I find it best to try and mirror the provided projects and not try to come up with a completely different site to pass the tests.

I don’t copy code from the projects, I just use it as a goal of what to create. Also it is also simpler to simply use the content from the example, than to come up with my own to be honest. :slight_smile:

So my question is if I am breaking any rules here by trying to mirror the example projects instead of creating something that would be more original?

Link to my GitHub profile: https://github.com/kpav33 . New users can only put two links into a post and I have three projects to link to, so I am linking to my GitHub profile instead. There are links to published projects in the about section of each repository.

3 Likes

Are you giving it your own personal style?

1 Like

I have made some differences compared to the example projects, but overall if you compare the two anyone can notice that they seem to be of similar design (particularly my product landing page project). I didn’t really spend much time with trying to come up with my own design, because I felt that my main goal should be to focus on the functionality and how the page works and that I don’t really need to focus on coming up with my own style as much.

Additionally I did try and make my own design for the survey form projects and it passed all the tests, however I really did not like the way it looked. That is why I decided to rather try and mirror the existing design, because I thought it was much better. So when I went to work on the product landing page project I also kept up with this mindset to focus on the functionality and not worry to much about making something completely different on my own.

1 Like

Giving your project some of your individual flair will mean that you have to figure out how to overcome challenges introduced by your own design. I think that this is a good exercise.

4 Likes

I agree. Practicing design is part of the overall goal of the challenges as well.

But I fully understand why being given a mockup and using that for the code makes it easier to focus on just the code.

It also mimics the task of being given a design to replicate in code. Which isn’t a bad idea to practice. But for that, you have something like Frontend Mentor challenges or just pick some design from Dribbble or whatnot and try to create it in code.

Hi @kpav!

Welcome to the forum!

I felt the same way about my survey form.

That has been my approach with the front end projects. I am more worried about getting my random machine to work that having a knockout design.

It is totally fine if your designs are on the simpler side when starting out. Once you get more comfortable with css than you will probably start to take some more risks.

At least for me it’s not even just the fact that I get to focus on the code I also learn something else, which I doubt I would come up with on my own. For example with the product landing page project the example uses Font Awesome icons, which I previously never heard before and I wouldn’t use them if I tried to come up with something on my own.

At least when it comes to the first three projects I don’t think that they are particularly hard to complete if you are just trying to make sure that you pass the tests. I could make something that doesn’t look as nice and polished and it would still pass the test, but by trying to replicate the example project I have to put in more time to achieve the same results and I think I learn more this way.

1 Like

Thank you for your response. It seems that most people say that it is OK to try and mirror it, but one should try to come up with their own design. My questions was mainly about whether I am actually breaking some sort of Free Code Camp rule by trying to mirror the example projects.

I only came up with this question, because when I checked my profile I noticed the Academic Honesty Policy and I wasn’t sure whether by working the way I do I somehow breached this policy.

So for example after I finish all of the projects and I click on the Claim Certificate button, could I have any issues, because of the way my projects look? I am just trying to avoid any potential issues in the future. Maybe I should address this question directly to the Free Code Camp employees. I found the support@ freecodecamp .org email, do you think that is the right address for such questions?

1 Like

Well, it might help to see one of the projects so we could see for ourselves.

But the whole goal, for this first section is not to get good at design.

My point was that just come up with a simple design that is yours. For my front end projects, the designs are super simple but they are mine. I am more focused on getting the javascript right than creating a super complex design.

So, I don’t know if you have breached the academic honesty policy because I haven’t seen your projects.

But, if you are concerned, you can go back and make some subtle changes and be fine.

Links to the projects:

I was thinking about making some changes and I already have a basic idea of what I want to do.

1 Like

@kpav, the code (HTML / CSS) is not the same so you should be okay.
As has been stated, if you give the projects your own style you may learn more.

Couple of things though. On the tribute page;

On your survey form;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like

With my Calculator react project I basically copied the example code into atom, commented out what each line was doing, and rewrote it myself. That was probably the easiest way to learn for me when i was completely lost.

I highly discourage copy-pasting the example and rewriting. That is against the academic honesty policy that you agreed to on freeCodeCamp.

“I understand that plagiarism means copying someone else’s work and presenting the work as if it were my own, without clearly attributing the original author.”

“I understand that plagiarism is an act of intellectual dishonesty, and that people usually get kicked out of university or fired from their jobs if they get caught plagiarizing”.

“Aside from using open source libraries such as jQuery and Bootstrap, and short snippets of code which are clearly attributed to their original author, 100% of the code in my projects was written by me, or along with another person going through the freeCodeCamp curriculum with whom I was pair programming in real time.”

“I pledge that I did not plagiarize any of my freeCodeCamp.org work. I understand that freeCodeCamp.org’s team will audit my projects to confirm this.”

In the situations where we discover instances of unambiguous plagiarism, we will replace the person in question’s certification with a message that “Upon review, this account has been flagged for academic dishonesty.”

Academic Honesty Policy

Thank you very much for answering, this is exactly the sort of answer I was looking for. Also thank you for the feedback of my projects. Regarding the <br> tags, I actually have a comment in the HTML file of the project to remind to replace the tags with something else. When I tried doing it before I had some issues so I sort of pushed this issue as something to do in the future. :slight_smile:

Thanks again for your answers.

1 Like

I have done no copy-pasting of the actual code from the example . I was asking about mirroring the visual design of the example page and implementing it on my own, not copying the code.

1 Like

I also think you are in the clear @kpav.

I like the color scheme you chose for the product page

2 Likes

If you are interested I added the changes that you recommended. On the tribute page I changed the link text to “Learn more about Herman Potočnik” and on my survey form I removed the <br> tags and replaced them by putting input inside of my label tags and then in CSS setting label’s display to block. So now it works the same way but without the <br> tags.

Also noticed that I had a problem with my responsive code not working on my mobile and learned that I have to add <meta name="viewport" content="width=device-width, initial-scale=1"> to my code so now it works as it should.

Thank you again for your help with my question and for providing me with feedback on my projects.

1 Like

Thank you, but I must confess the colors were chosen completely on random and it seems like it just ended up working somewhat well. :slight_smile:

Thank you for taking your time and answering to my question as well.

1 Like