There are a few things I had trouble fixing.
Candles pic I want to span the entire width of the screen.
I also think I am having some trouble clearly organizing my code. If someone can look into that and give me feedback I would much appreciate it.
It is good but I would recommend some more padding between the box edges and the text.
I think the candle image is too big and takes a long time to load. Also it is taking up space to the right of the browser view. I think a smaller image here would improve it greatly.
In general the layout needs some improvement. Then it will be a very god tribute.
Sorry to hear about your friend Jasminder pal. It’s often a hushed-up issue in the Sikh community. As for your page, I agree with the other comment that the candle image occupies basically the whole viewport (on codepen at least). I honestly thought that was all you had at first. And given the purpose, you want the picture of you three to be the centerpiece, and not require scrolling.
If you want to organize your code (proper indents and all that), in every pane (HTML/CSS/JS), you can “tidy” the code, by click the down-carat and selecting it from the drop-down that appears (Before):
- What you could try, if you want the candles first, is to use CSS transitions on the
opacity property, so that it fades.
- Alternatively, if you want, you could set the image as the background image, or do both, which might allow the photo of you guys to be dramatically revealed.
- You may want to down-scale the file size of the image as well. Free tools like GIMP (GNU image manipulation program) can let you do that (it looks intidimating, but there is a lot of free help online, and it’s like free Photoshop). [Hint: play with the canvas size, and export settings].
- You’re using bootstrap, and I’m not quite sure why.
- You have to make a design decision: keep that dotted border, get rid of the bullets on the list items (given your CSS, you probably want that), or pull them inside. This is the page you need to read
- Some of your smallest text is just too small (And i’m reading it on a 17-inch screen.
- Make sure that you look at your page on your phone, and use a responsive meta tag to make sure the phone’s physical pixels determine how many pixels the phone’s browser renders.
Thanks for your comments! Yes, the candle image is too damn big, I know haha. I wanted it to span across the screen and it ended up becoming way to big.
I will play around with the passing and see what i can modify.
Thanks a lot, I appreciate it!
Bro! Wow, you gave me so much feedback. I want to sit infront of my Mac and filter through each part you wrote me step by step. That is exactly what i needed. I am using Bootstrap because it was required for the task I did for the tribute page on freecodecamp. To be honest, its all still taking time to sink in (everything i have learned I mean). The requirment was to also write code in html exclusively.
I agree, the text is so small. I had a lot of trouble trying to center text, change font sizes and changing fonts while working on this.
You gave me SO much info, I truly appreciate that.
And yes, it is very taboo, not only in the Sikh community but in many communities. JP was an awesome guy.
Also, don’t be afraid to look stuff up. And again. And again.
For HTML/CSS help, I would often google:
“w3 html TOPICNAME”, or
"w3 CSS TOPICNAME" - for example "w3 center text"
They have a great “Try it” functionality that lets you see the code and the result side-by-side, as well as change things and re-run the code to see what changes. This is how you really learn to code. There is no truer joke than this one about programming. I remember getting it as an undergrad on an email chain.
y = f(x)
return value = function (parameters)
Wow, this is a very moving tribute to your friend, he sounds like a great guy. I almost don’t want to critique something so personal (and @vipatron has already given a ton of great advice). Great job on the project and on helping to spread an important message that needs to be heard more.
Thank you @lionel-rowe, appreciate your comment a lot.
Hi @vipatron, I printed your last comment and posted it on my cork-board. I am going to do everything you said step-by-step. You hit the nail on the head when you said being quick when I code, because I felt SO lost when I started and I literally googled everything. I will do the beta.freecodecamp.org series and type it all. You are right, it will make me sure and clear of my code without wasting time googling things in order to get something simple to work. I do not mind doing it all over again because I am in no rush, although I do want to progress efficiently and not delay. In addition, doing the beta fundamentals a second time is going to help me understand what I did already, because I was almost following the tutorials like a zombie and half the time not sure what they exactly meant. I think that now I did my first actual page from scratch, I am going to learn a lot going about it the second time around. Fail faster, succeed sooner.
I’m going to steal that for my students: “fail faster, succeed sooner.”