FCC - Tribute page + Survey Form

Hello everyone,

Finished working on the first 2 FCC projects, and, I’d very much treasure any kind of feedback.

Tribute page:
https://codepen.io/AndreiCpen/pen/GzxBgw
Survey form:
https://codepen.io/AndreiCpen/pen/PVeKbP

Thank you so much !

3 Likes

Congratulations! You did awesome on your first projects . You should be happy with your work.

3 Likes

@mdotcoder
Thank you very much - that is really encouraging :flushed:

2 Likes

@Hollow Tribute page looks fabulous! How about setting a max-width on the text so that it will not take up the whole width of the screen? Some screens are very wide.

#tribute-info p {
  max-width: 900px;
  margin: 0 auto;
}

Just an opinion.

3 Likes

@brandon_wallace
Thanks for the suggestion and the words of kindness - I very much appreciate it.
This is what it looks like on my screen: https://i.imgur.com/4YaXOXc.png

After pasting that into the CSS section it then looks like this: https://i.imgur.com/ENley7m.png
Then, deleted the ‘p’ so that it won’t shift the <h2>s so much and it looks like this: https://i.imgur.com/om8Fj8L.png

However, I am not sure to understand what you mean because I set the width of #main in ‘vw’ and thought it would pretty much yield the same result on any monitor width: https://i.imgur.com/hY6UCrd.png
So, there should be a margin there right ? :thinking:

I am a little confused - could you please expand on that ?

2 Likes

@Hollow
I have an easier way to do what I suggested. Here is how it works.
You wrap the #tribute-info div with a div called tribute like this:

<div class="tribute">
  <div id="tribute-info">

      <!-- Your HTML code -->

  </div><!-- END tribute-info -->
</div><!-- END tribute -->

With that in the HTML file you now only need to add this to the CSS:

.tribute {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

This will fill the maximum width in mobile view, but on a larger screen such as my 24" inch wide screen the text will only expand to 900px width leaving margins on the sides of the text.

What do you think?

2 Likes

@brandon_wallace
I understand what you mean now.
Great suggestion! I just added max-width: 900px to the #main id instead of creating another div + class though. I believe it looks a bit better even on my screen too now - he he :grin:

Thank you for taking the time to check out my work - it has clearly helped me improve. Always good to have a different perspective on things!
Margins are important and I am definitely going to take larger screen sizes into consideration in the future to improve readability.

Thanks again for the constructive feedback, and, if there’s anything else you might notice please let me know !

3 Likes

Hey,

Great work on both the tribute page and the survey form - loving the look of them both and found the code really clean and easy to follow.

Well done :clap:

3 Likes

You clearly have some talent at graphic design. I am assuming you have a portfolio of your graphic work somewhere. I would take the FCC test bar off and put them in your GitHub or wherever you keep your portfolio work. And take out the joke in the drop down menu for your portfolio of course.

Edit:
So you can go into an interview and say, “… And here are some examples of what I can do with just raw HTML and CSS.”

4 Likes

Hi @Prideth , where are the examples ? I’d love to see them. Thanks

1 Like

@mdotcoder sorry, that was some bad syntax on my part. I don’t have anything as pretty in my portfolio made as simple as what Hollow has accomplished. It has been so long since I went looking for a job my portfolio is not even online anywhere anymore.

I am feeling the strong need to change that. The last website I got paid to build was over 20 years ago. I was young and did not think I needed a portfolio of this kind of thing. Right now I am wishing I would have saved that work, it is all gone now. Either replaced or just taken down as companies no longer exist.

So, my response to Hollow was to say,“It looks great, put it somewhere you can reference in the future,”. It is proof that they can bring a good graphical design sense to simply written HTML. That in itself is not going to get them a job, however a potential employer will look at this and think, “If I hand this person a task, I can expect the result to look good even if it is a simple task.”

1 Like

20 years ago! Wow. Now, I really do want to see your portfolio. So when you have it done, please kindly notify me too. I’m sure it would be an interesting one to look at.

1 Like

3 posts were split to a new topic: I finished my first project

Very cool projects I like them very much. For the first projects, you made big progress.

1 Like

Hello everyone, I just finished my first project. It looks ugly and quite similar to the example.pls look at it and tell me your feedback: https://codepen.io/ng-ho-ng-t/pen/ardYvz

Hi. Good job. I can assure you, it doesn’t look ugly and looking quite similar to the example is also sign you have a grasp of the main concepts considering its your first project.

You could add some space to the top and bottom of the main content because right now, they’re just sitting on the edge. You can do this by adding top and bottom padding to <div id="tribute-info">

#tribute-info{
  background: hsl(60,0%,90%);
  padding: 20px 0;

Good job. Happy coding!

Thank you very much mdotcoder

@dat1, dat is a really nice page!

:slight_smile: