My Tribute Page - George R.R Martin

Code Feedback
1

Before I begin, I would like to thank @Madalena.design for inspiring me and sharing much of their knowledge. Most of the design elements are pulled from her own tribute page (which is worth a visit) and many things I have learned from her forum post, are implemented throughout the code. This has led me to create my own CSS methodology, and if you’re interested there are a multitude of comments explaining how it works.

Anyways, here is the link to my tribute page repository.

Here is the link to the actual page on Github.

I would appreciate any and all criticism. Feel free to look through my code!

Have a great day! :grin:

PS: Check out @Madalena.design 's new series on web design… Many of the concepts like color theory and responsive design and typography are said to be covered soon!

3 Likes
2

That’s a wonderful tribute :heart: page, though it would be much better if you replaced the lorem ipsum text with real text.
I would very much love to hear your thoughts on This Survey Form I built. You seem a more senior learner. I would do with your invaluable feedback because it’s my first HTML/CSS project.

1 Like
3

Wow! extremely impressive!
I like how you used madelena’s page as an inspiration template for yours. Although yours is simillar, it is still a powerful work you’ve created. i’d rate it 10/10. great job.

1 Like
4

Thanks for all the kind words! :sweat_smile:
Also, I’ll keep in mind about the Lorem Ipsum text suggestion. (I really just wanted to use a quick and simple text filler so I could focus on the other aspects of the webpage)

It would be my pleasure to provide you with feedback on your survey form! :grinning:

This looks great; it responds well to different window sizes and the color palette doesn’t distract you from the content. In terms of your code, I recommend that you begin learning about different relative units. Pixels are fine, but using rems or ems is better for responsive web design in the future. Anyways, you seem to be doing great and keep it on with the great work! :grin:

1 Like
5

Thanks a bunch. I will definitely have to learn about rems , ems and other relative units. Hopefully I will be able to implement them in my next projects.

6

I was looking over my code again, and was wondering if there was any better ways to animate a web page.

I used animate.css in combination with JavaScript to animate headers as it scrolled into view.

Does anyone know any better animation tools, or how to make sure the animation with the headings occurs every time it is in view?

7

You can do simple animations in CSS3. Start by checking out This W3C Tutorial .

8

Big thumbs up! Well done! :clap:

1 Like
9

Thanks for all the nice words!

10

Does anyone have any suggestion to where and how can I learn to make better animations using plain JS and CSS so I can make it more customizable. Currently, I use animate.css which has pre-defined classes that I appended to my code. Feel free to look through and ask questions about my code to understand what I did.

11

Beautiful page! I love the simplicity and the use of white space. Looks great!

12

Hey campers!

Would this be a good project to show on a portfolio? Just as one example of my front-end skills? :sweat_smile: