Bukowski's Tribute Page :: Project Feedback

So… here we go! :muscle:

Here it comes my Tribute Page Project to see what feedback I will get on it! :slight_smile:

https://codejourney.ibaifernandez.com/my-tribute-page/my-tribute-page.html

Surfers’ warning ahead!

  1. First of all, I’ve been told that there’d be no problem if I linked my project from my own site. I hope there’s truly not at all :heart: Well, a subdomain of my site, anyways (I don’t know yet the proper slang for everything I am learning lately, as you will notice, haha :sweat_smile:
  2. I know that the CSS file’s a freakin’ mess, I still have to get good at organizing it… any recommendations on that?
  3. HTML file was fully validated thru W3C HTML checker, which I am quite proud of. I tried applying as many semantic mark-up as possible instead of just using divs for everything.
  4. I may have tried to overachieve a bit adding a sidebar and whatnot, but I really wanted to see if I could get media queries working so that the sidebar went down when looked at in a smaller screen device, which I believe I’ve been able to do properly.
  5. I’ve tried to bring as many concepts as possible into the game from those I’ve been learning in my Code Journey — which I’ve taken seriously for the last 7 days or so. Hope I’ve made it successfully.

Now, please, machine-gun me with all the improvements that could be made on this project.

Thanks so much in advance for it!

Cheers!

Hi @ibaifernandez !

I think your page looks really good.
Congrats!

Just a few things.

For project feedback, usually people will also link their code in the post. That way we can take a look at it instead of digging through your github.

I looked at the repo and it looks good.
I would just suggest adding alt descriptions to these images

 <img src="img/Charles-Bukowski-1.jpeg" alt="">
<img src="img/Charles-Bukowski-2.jpeg" alt="">
<img src="img/Charles-Bukowski-3.jpeg" alt="">
 <img src="img/Charles-Bukowski-4.jpeg" alt="">

The other thing is the navbar.
I would suggest having a fixed navbar.
It will make it easier to navigate between sections.

At a certain breakpoint, the navbar disappears completely. I would work on making it visible at all times.

Keep up the good work!

2 Likes

:heart_eyes: Thanks a lot, @jwilkins.oboe!!! :heart_eyes:

When you say “link their code”, you mean to provide the proper links to GitHub or to post it as source code using back ticks?

About the alt descriptions, it’s hard to decide when pics are for decorative purpose, hehe :sweat_smile:

About the navbar, you’re totally right that a fixed bar would make it easier to navigate between sections, but when I make it fixed, the main pic disappears a bit beneath it, and what I am struggling the most about is the fact that I don’t know what “proper design” is when using “this or that code”… I mean, it’s even hard to explain what I want to explain, but, for example, let’s say that I don’t know if it’s better to use relative or absolute units when positioning things, or if I should choose one or the other thinking of the responsiveness (or if I should just leave responsiveness for media queries once I am done with the main (desktop) design… I am so full of doubts! Haha! :laughing:

And yes, I made the navbar disappear at some point because my goal was to create one of those burger menus, but I got a little confuse when trying to do so, so — since it’s just a one page thingy, I decided that mobile users could just scroll up and down… I will improve it tomorrow, thought. Besides, I realized that at 320px width, the media query needed a loooooot of work, so I kinda gave up for today. It’s been some very intense 6 hours for doing that and I am just exhausted. Will keep trying tomorrow!

Thanks you, thank you, thank you :slight_smile: Comments as yours motivated truly a lot!

Cheers!

It would be your github repo.

Just put it aside for today.
Start tinkering with it again tomorrow. :+1:

And also, you don’t have to implement everyone’s suggestions when it comes to style.

Just food for thought :grinning:

1 Like

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

  • As I mentioned in your other post, you need to place the test suite correctly.
    • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address.
  • Run your CSS code through the W3C validator.
    • There are coding errors you should be aware of and address.
  • You give the user a form to talk about your subject, give them a place to enter their name and an email addr but the form has no submit. That’s a bad UX.

Thanks again, @Roma!

I will do all proper corrections, then :slight_smile: Now, once I have done 'em all — along placing the test suite properly — can I just send the link again?

Now, about the form. Certainly, I forgot the submit button :eyes: Bad Deadpool :man_facepalming: Now, once I have it, is there a way which I should have supposed learned about by now and that I am totally forgetting in order to make that form properly work? Last nite, doing my research, it all seemed to point at the use of PHP files, which I believe not to know a thing yet :sweat_smile: Anywyas, I will keep researching :angel:

Thanks a lot!

Cheers!

Yes, just resend the link.

The form doesn’t actually have to work. The second project is a form and the submit button will not actually work. I was just observing that you had a form for the user to enter information but no way for them to actually “send” that info.

1 Like

@Roma,

Cool :slight_smile: I will. And yes, I totally forgot about the submit button :man_facepalming: Bad, bad Deadpool, hehe.

Thanks!

Seriously you made this by studying just a week? It look’s great. Can you provide a link to your code?

1 Like

Yep, quite serious! Haha.

I was not unfamiliar with web design (if you can really call it so at all) because of wordpress(.org), but I’d never tried to code my own stuff from scratch before.

You will actually realize that as soon as you take a look at my crappy organizational skills to what CSS is concerned :face_with_hand_over_mouth:

The part that’s taken me longer so far has been getting familiar with the Command Line (although it felt like coming back to my childhood, when I used MS-DOS to play ‘Indiana jones and the Fate of Atlantis’ and stuff like that :laughing: ) and, moreover, with what Git was, how to use it and how connect it with GitHub and then to my server (and that part’s been the one that’s made the proudest, haha).

Anyways, I guess that, in order to share my code, I should simply share this link here, right?

It seems so. And then, to let you have a look at my ‘so much fun’ CSS, it’d be this one:

And that’s that. I haven’t been able to do any improvements at all this morning, but I plan to do some of them this evening. Hopefully, I can have a proper result to upload before the day ends :slight_smile:

Cheers!

I was really curious how you arranged that side bar. I haven’s used much floats myself, at least not with a proper understanding, so I’ll play around with your code. I too struggle with organization of CSS, especially in the current project (landing-page), so yours looks pretty good to me (but what do I know, I’m a beginner myself :slight_smile: ). I have a codepen account so I use that to share my code on here, what resources did you use to learn git? I really need to learn that coz currently I just upload files there using gui :unamused:.

1 Like

Hi there, @RReiso! :slight_smile:

Well, as you may’ve already seen, thought of two semantic blocks, main and aside, and just floated them respectively, one to the left and the other to the right. I don’t know if there’s any kind of special magic to it, but it definitively worked out for my layout :slight_smile:

As the beginner that I am myself, I’ve realized a few things in my short Code Journey so far:

  1. Precisely, be intentional about your code, rather than playing around with it. This is, use properties as you start understanding them properly — not fully, but at least properly — rather than just throwing a bunch of them to see which one ‘does the trick’ you’re hoping for. It’s exhausting trying to make something work by playing around with properties rather than sitting back to think which ones will actually work in a given context or onto a expected result before you actually write those properties.

  2. Reading somebody else’s code also helps me a lot to figure it out what the heck is goin’ on. Actually, it was the one thing that made me realize that most of times, a few ‘intentional lines’, so to speak, do more for your design than a bunch of lines. I guess this is what the DRY principle speaks directly about.

  3. Cascade (as in 'Cascade StylesSeets") is sorta big deal.


display:block;

margin: 0 auto;

will work while


margin: 0 auto;

display: block

will not to what centering block elements is concerned. So it’s good to have a brain cell just dedicated to analyze the order in which one is setting up every property.

  1. Have a good proper understanding of inline elements vs. block elements will also help you out of more than one frustrating situation, I believe.

  2. Now, one of my main conclusions was that many results to what CSS is concerned is about thinking of all the proper dimensiones of “every box” you’re layin’ out (may that be that CSS Box Model I’ve read about, perhaps?). Thinking of such dimensions (and deciding among them in either absolute or relative terms) feels like quite a big issue… and actually that is what drives me mostly crazy when facing the design initially. This is, all of my insecurities — most of them, at least — come from thoughts as these ones: “OK, so I see this all awesomely in my 13” Mac Book Air screen, but… how about a 15” Mac Book Pro? How about my mom’s 15” Windows-based personal computer? And what about her small 13” Lenovo Yoga? Will relative measures screw up my design? Should I be using absolute measurements instead? As said, it drives me crazy! Because I’ve somehow understood that relative measurements help you somehow with responsive design… not that you don’t need to do your media queries at some point, but the fact that if you use relative measurements properly… it should be easy to see your work adapted in between different devices.

  3. Finally, it is really useful to to me to think — and even draw upon paper — what I want to see reflected on the canvas rather than just imagining it in my head. Mixing what with the ‘be intentional’ principle, I try not to write any code at all whatsoever till I think I’ve got it all figured it out. I mean, I ain’t sayin’ that I don’t miserably fail sometimes and then I go like: “Dude! This should have worked! Why is it not!! :angry:

And that’s pretty much it. I don’t know if any of what I just wrote can help you in any way, but I truly hope it does somehow :slight_smile:

The Odin Project, mainly, and all the related resources that they provide the user with. Since I am newbie here, I can paste more than 2 links per post, but I solidly recommend and encourage you to create an account there and read everything they tell you to read; there are some amazing resources in there. Actually, I sorta knew FCC before, but it is their ‘Front-End Essentials’ lesson which drove me back here to get familiar with HTML and CSS. I guess that, soon, it will drive me back here to get to know about JS scripting :slight_smile:

Don’t hesitate to let me know if I can be of any further help :slight_smile: Sharing and teaching is definitively the best way to learn :slight_smile:

Thanks for letting me do so!

Cheers! :heart:

2 Likes

You might consider working with flexbox and grid for future projects instead of messing with floats and clears.

It makes it easier to design responsive layouts.

FCC teaches them but here are some additional resources :grinning:

1 Like

Yeah! Awesome, @jwilkins.oboe :slight_smile: Thanks a lot!

I actually tried it out on a smaller project that I will upload it some time soon – as soon as I have a bit of time to give it another look and to have a better comprehension of it :slight_smile:

Thanks for the resources :heart_eyes:

Now, my question would be: Is it better to just work with flexbox as default mode, so to speak, so that floats and clears don’t ever get in my way no more? :face_with_hand_over_mouth:

Cheers!

Edit: About CSS grid I don’t have no idea so far :thinking: Hehe.

When I started a few months back, I didn’t really like floats and having to worry about the clear fix hack.

From what I have learned is that at one point you had to use floats but now flexbox and grid have replaced that.

It just makes it so much easier especially for larger projects.

You could start by reviewing those sections in the FCC responsive design course and then looking at the css tricks articles.

1 Like

Hi all!

I’ve finished polishing the project. Now:

  1. CSS is — or so I think — pretty neatly organized now, including alphabetization of all properties and comments to ease the search of specific elements.

  2. Media query for the 320px breakpoint has been included and all media queries debugged and commented.

  3. All alt attributes have been included.

  4. Fallbacks for gradients and color variables have been included.

  5. All <br> tags have been erased.

  6. I’ve properly included the <script> before the closing of the <body> tag so that I can see it and run it now. “10 out of 10” it says :relieved:

Ready to move on to the next one :muscle:

Thank y’all!

Cheers!

PS: I am not adding the links again for they can be found in this same thread – both to the live page and to the CSS and HTML files on Github :heart: Hope you like it! :heart:

Edit: Btw, @Roma, when can I take the script out of my file? Or is it just for me to know that I complete the exercise properly so that once I have checked it out I can just take it off? :smiley:

Good tips, @ibaifernandez. I try to use only the properties that I understand, though sometimes it is experimental - as a result of trial and error, which is completely appropriate for the knowledge level I have now, that’s how I learn. With time I hope to be able to fully predict what will certain property do to my layout before I actually apply it. Also before starting coding, I draw my intended layout on the paper, it helps me make sure how many divs I will actually need.
I’ve heard about The Odin Project, but never really researched about it, thanks, I will look into it

1 Like