Web Design Tribute Page Feedback

Project Feedback
#1

Hey,

i just started to learn coding with fCC and need some feedback on my tribute page.

I found it really difficult to give the page a personal style. Also to be fair, i had to check the editor of the example tribute page sometimes, because i didn’t know how to move on.

Thanks for your help

#2

Cool, it looks pretty good.

I found it really difficult to give the page a personal style.

A lot of great developers are not great at design. Don’t worry about it too much. That being said, learning a little about it and starting to be aware of it as you use web sites - that can go a long way.

Also to be fair, i had to check the editor of the example tribute page sometimes, because i didn’t know how to move on.

Well, your honesty is admirable. You’re certainly not the first person to do that. Heck, some people copy entire sections of code. The most important things is that you understand what you used. That being said, there is also great value in learning how to research things and figure things out on your own - that is one of the most important skills a developer has. And google is your best friend. As a developer, you won’t have a sample project off of which to work, but you will always have google, stack overflow, and documentation. Hopefully you’ll gravitate towards those tools.

As for the code…

This looks a bit odd to me:

  <p><em>- A pioneer in the fight against organized crime -</em>
    <hr style="width:400px">
  </p>

I don’t think the hr tag goes inside a p. A p is a paragraph - it seems weird to have a line as part of a paragraph - I’d move the hr outside the p.

And this:

padding: 5px 10px 5px 10px;

could be simplified to:

padding: 5px 10px;

Still, looks good. Have fun on the Survey Form.

2 Likes
#3

Thanks for your feedback.

The hr tag inside the p was a mistake. Already corrected that. I forgot about simplifying the notification on padding. Thanks for pointing that out.

The more i was working on the page, the more i thought about the design. But then i was lacking the coding skill to really implement those ideas. I will try not to worry about it too much, but im already struggling to find topics for the projects.^^

Thats some great advice. Its difficult to go from a course, where you just fill in given text, to a project, where you actually have a blank page and should start on your own. I always went back in the lessons first and tried to figure out a solution myself. Sometimes i just couldnt find the lesson in the course and googling the specific html or css command was way faster.

Im looking forward to start the survey form.

#4

The page looks pretty awesome as it is. A minimalist approach works best when it comes to placing content because it is easier on the eyes of the reader.

Referring is not necessarily a bad thing. The only thing that matters is that we learn every time we refer. Developers Junior or Senior, the whole spectrum, refer to docs and Google for developing.

#5

The more i was working on the page, the more i thought about the design. But then i was lacking the coding skill to really implement those ideas. I will try not to worry about it too much, but im already struggling to find topics for the projects.

If you’re looking for design ideas I used to look at websites or templates online and just copy those. I would not look at the source code, instead I’d open it up in a tab and try to mimick what I was seeing. Here is a good resource for that: One Page Love

Note that it didn’t teach me anything about design but forced me to try and figure out how to code what I saw.

1 Like
#6

Your page looks good @jukusuna. Some things to revisit;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Note that in this line #main { font-family: Oswald, sans-serif, Arial, monospace; } arial and monospace will not be seen. If oswald fails to load the system will find sans-serif and will never had a need to look at anything after.

This has been addressed but I want to add, the hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.

#7

Thanks for your feedback and advice everyone.

@Roma
What would be a case to use the <br> element? Im working on my survey form and the only way i can set the radio buttons underneath with the description next to them is a <br>. In the lessons of the fCC course it is done by using <br> aswell.

#8

The link I provided gives use cases for the <br> element.
I understand the code snippets in the lessons use them but it is not a best practice.

Regarding the survey form, instead of using <br> elements to have each inline element on a new line use, or set, container elements to be block-level elements so they’ll each take up the full width.

1 Like