First project ever: Tribute page - BTedds

Here is my tribute page:
https://codepen.io/btedds/pen/rNWVwJQ

I am struggling with the CSS more than the HTML - not that I´m not struggling with both since this is my first go at coding!

Is the CSS really as bad as I think it is? I had no idea what I was doing!

Hi @BTedds!

Welcome to the forum!

I think your page looks good.

I think you should review the lesson on applied accessibility for giving links meaningful descriptions. Wikipedia is not that accessible.

Html is pretty straightforward. There are some stuff in CSS that take some time to get used to.

Thanks I’ll take a look at giving links meaningful descriptions
update: I have taken a look at the lesson you mentioned and I have updated the link to give it more meaning: hopefully it is better now :crossed_fingers:

I was fairly happy with this project but I didn´t use CSS flexbox or grid and so I made a branch of this and I’ve been playing around with CSS flexbox to make the tribute page content/image more responsive.

It is messy but I have at least got it working so that the image and the main text adjust width wise. You can see it here: https://codepen.io/btedds/pen/eYBNPjR

I am happy with how making a branch of my tribute project has shown me how I can use flexbox. If anyone has any ideas on other things I can do to improve my original project it is always appreciated.

Welcome @BTedds

I don’t think that CSS is really that bad as far as syntax and implementation. The difficulty comes from the inherent nature of styling. There isn’t a one-size fits all approach for styling every webpage without making your CSS very complicated - That is why we have frameworks now to remove some of that tediousness.

That being said, I would work in the way that the projects recommend. DON’T use a framework for your first couple of projects. Mind you, they will probably look like crap like mine, but it serves to build your understanding. When you understand and then you go up to frameworks, you will be able to pump out code that looks nice and then just do some minor personalization tweaks where you want.

Don’t give up! Most importantly, have fun!

And your first project here looks pretty good :+1:

1 Like

Your second one looks good as well. Some things to revisit;

  • One of the tests fails. It’s an easy fix.

I usually don’t comment on styling but maybe think about getting rid of the bullet points.

1 Like

Thanks really great feedback…I will take it all on board and work through the projects as recommended.

Thanks for the feedback- I will take a look at the test fail and the bullet points.

Thanks all!

I have removed the bullet points using:

li {
  list-style-type: none;
}

Is this the best way to do it - it seemed the simplest to me?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

thanks…i will do that in future

For your question about the bullet points you can also just target the ul

ul {
list-style-type: none;
}

I did try that first but it didn´t seem to work but maybe I just mis-typed something. Is there any advantage of one over the other?

Targeting the ul will remove the bullets from all of the li items.
Both work though.

1 Like

It looks good @BTedds.
Again, it was a suggestion to remove the bullet points. Your design is your design. Don’t feel you have to change your styling because of what someone says.

I really appreciated the suggestion, I did prefer it with the bullet points but I wanted to know how to remove them after you suggested it and it wasn’t something I had even considered before.

So thanks and don’t worry I am not really too worried about the styling ATM, I am more concerned about it all working properly (or at least how I want it) and writing good code.

Learning how to remove the bullet points was very useful so thank you :smile: and suggest away!

1 Like