Do i need to beautify my projects or am i spending to much time on one project?

Hi All

Do i need to spend time in beautifying my projects to almost look similar to the example provided or should i just follow the instruction provide and only input ID and codes without being bothered how it looks?

In my opinion its good to beautify the project. i can revise and recall the codes learned plus learn new codes.

But on the other hand its time consuming.

I am afraid i am wasting time on a single project. Maybe the upcoming projects will force me to spend more time on beautification.

So should i not spend time in beautifying the projects which dont tell me to or should i make the project a bit similar to the example provided.

I am not sure what projects lay ahead.

Example in project Product Landing Page
i spent time in beautifying and animating the heading to my liking. Should i proceed this way? Or will it take me forever to finish the course?

Link to the animated header below:

Edit fiddle - JSFiddle - Code Playground

Please Advice

this, no
you don’t need to make them similar at all, you should use content and style of your liking

work on them, be proud of them
it is totally fine to do just the bare minimum now and return to them later if you want to touch them up a bit, so you can use the projects to showcase what you can do

1 Like

Thanks. yes it would be good idea to showcase my finished work later on to employers or customers.

But the question is, should i spend a lot of time styling them to my liking? Like the example that i have shown. I animated the title even though its not mentioned in the project that i need to animate it, color it and style it etc. It took me some time because i had to recall a few syntax.

The reason i ask because i am afraid that i am spending alot of time on styling a project to my liking.

There are various projects and lessons that i need to do and learn.

On one side its good to style it. I am practicing, revising, remembering and learning new codes. But maybe i will get the opportunity to do that on other projects.

What is the right thing to do? Should i spend hours and days on one project to style it to my liking or just type the codes as instructed and move to the next project (offcourse the webpage will look plain with no colors and styling etc) .

I spent a little bit of time styling mine, but nothing too fancy. That being said, the project isn’t untouchable after you submit it. You can always go back and explore new styles later on, as your skills continue to develop. As long as your project still passes the tests and has the test script, you are good to change it whenever you like!

1 Like

I would say neither - take for example the sample projects, they are simple, nothing fancy, but they work

give yourself a time limit, make it work, make it nice, and then move on.
it doesn’t have to be perfect, just easy on the eyes.
Nowadays less is better.

1 Like

Thanks for the tip :slightly_smiling_face:

i see. thanks for the tip :smiley:

My personal opinion is to perfect it as much as possible before moving on.

Something I saw you use was @import with css. Avoid doing that. I’m not sure if that’s a codepen thing, but never use it in your actual code.

Why? If you look at your network tab when loading your site, you’d see that it blocks other css files from loading at the same time, making your site take longer to load.

1 Like

One last note.

Make your css rules more specific. If your site is wrapped in a div called “.login”, then add .login to all your rules.

As it stands now, most of your rules are somewhat globals, meaning you cannot use those class names on any other page. If you do, you’ll find yourself writing over rules multiple times which you want to avoid.

I also strongly suggest avoid using ids and use classes as much as possible. By adding an id, it becomes increasingly harder to update that rule. On a one page site like you have this isn’t an issue, but it’s always a good idea to write code that has the ability to scale.

hi
thanks. I am not sure what @import is yet. its not me who added it. its the example/sample provided in the project of the course.
here is the link to the project.

Link to the project

i need to write codes and make my page function similar to the sample provided.

But i will put in mind not to use import. Thanks :smiley:

Ummm i am still a bit of a beginner therefore i dont understand many of the things said . sorry :crazy_face:
In regards to your last note and previous post. maybe you need to notify freecodecamp regarding these. I am bit concerned now. Because i am checking the sample provided by freecodecamp to see what codes they used.

though i do have some questions to ask:

  1. What you mean by adding .login to all my rules…?
  2. You said most of my rules are not Global. i remember there are a list of Global attributes on w3school. can you please show me an example of the mistake done. For me to understand.
  3. “id” the project tells me to add id. Though i too rather use class because i can style it easier. Please show me an example to know if we are talking about the same “id” in question.

sorry for the confusion and questions :dizzy_face:

Hi

Codepen is like a sandbox, which means you don’t have to put the entire “theoretical” code. Example : with codepen you have no <head> part into your html nor you have to link to an external css page. Codepen allows you to do html css and javascript in a kind of “same file” which is not the real-real world

If you want to do it with “rules of art” you need to add more code, related to more complex part, you can let it on a side and go into those questions later :slight_smile:

Hope this will help you to understand

Don’t panic, kerafyrm gave you really nice advices but maybe not so beginner friendly