This is my first Post on the Forum.
I have made this tribute page and i sincerely request everyone to look at it and suggest me what could be done differently. I was really struggling while positioning elements and i think there is a lot of room for improvement.
While creating this website all by myself, I realized how easy it is to just read through tutorials and pass quizzes and feel good about yourself. I have also realized, the only and only way to learn web development is by making yourself uncomfortable. I was literally shaking while creating this website.
Here is what i created:
The part where i struggled the most was where i had to position the elements and setting the appropriate margins and padding.
Any type of suggestion, be it positive or critical, are welcome.
Thank you, I have been in love with this platform.
By the end of today, I plan to work on the survey form. I have realized that more time should be spent on creating something rather than passing quizzes which i feel is easy.
I often have the same problem with layout and proportions … and what helped me the most was the chapter on CSS grid, mostly the grid-template-areas section
just as you said it’s much easier to pass quizz than apply what you’ve learned in that quizz in a concrete project.
I’ve just finished the Tribute Project and I’ve tried to use grid-template-areas on it and it works better than i thougth …
Hi @datageekrj, your page looks good. Some things to revisit;
- On using codepen. codepen only expects the code you’d put within the
<body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to
<head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
- The link to your font would go in the box labeled ‘Stuff for <head>’
- Everything between the
<style> </style> tags should be placed in the CSS section in codepen. No need to include the
<style> </style> tags there.
I mention this because;
- codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
- You’ll find using the validators to check yourself to be very useful as you progress.
- Regarding the fonts, you call ‘Segoe UI’ and ‘Roboto’ but you never link or import them. You may have them loaded locally but users may not.
- Run the test script. You page passes 9/10 user stories.
- Click on the red failing button and it will show which user story is failing and give a suggestion on what it’s looking for so you can pass.
Thanks @Roma, for the feedback. I really need such feedback. I will go and fix these things really quick.
One little doubt, although i set the image’s width to the 80% of its parent element’s width and when i resize the window, the image is resizing as expected but why does the image responsive test is not green.