My first tribute page using Dreamweaver

Code Feedback
1

It took me about 8-10hours to finish it. Most of the problems were at CSS, if i made just a minor tweak to the page, it would break apart, so googling and asking from stackoverflow made little easier. Tried to be little creative but don’t know how it looks for other people. Just happy that I’ve finally made my first page.

https://codepen.io/togu/pen/KKPZNNa

2

Just from first glance and messing with a few things: your margin and padding are way to much, no need to make it 300 or 400px.

I would do something like 16px or close to that: if you know rem units I would try 1rem padding and 2rem margin.

Also, little tip when working with code pen: you have a lot of whitespace all over the place, if you hit the little arrow button on which section you are working on: HTML, CSS, Javascript, you can tidy the code and it makes it look nicer.

I don’t know if you are trying to make it mobile friendly right now or not but I would fix the images to stack on top of each other at smaller screens or at least make them smaller.

I do like the picture and giving a darker transparent background to the tribute portion looks good just really need to fix the padding and margin issue.

3

thank you for your comments! Yeahm like you said I’m having spacing issues on my page. I didn’t try to make it mobile friendly. I just wanted to the contents to be in center like most web pages. Seems like getting image on background made alot harder to make other things on top of that.
And may I know what kind of whitespaces?

4

Hi @togu, not really liking it to tell the truth. I’m on a laptop and having one word per line is not how I like to read things. Doesn’t matter that they’re all in the center. Additionally;

  • 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.
    • the <br> element is not allowed as a child of <ul> You can use margin and/or padding in CSS if you want to add spacing.
  • validate your email address with codepen so we can see your pen in full view
  • make your page responsive. It falls apart on smaller screens.
  • on the desktop the parking and Times Square images overflow
2 Likes
5

Your image takes a long time to load, and the text really is a pain in the eyes to read.
Your #tribute-info should not have so much padding. 20px should be good.
You don’t need so much margin on it either.
try deleting all the stuff in the tribute-info css id and replacing it with my code:

#tribute-info {

  background-color: rgba(30,23,23,0.5);
  border-radius: 5px;
	box-sizing: border-box;
	color: #fff; 
width:80%;
  margin-left:10%;
  margin-right:10%;
  padding:20px;

}
Code explanation

The width of your tribute-info div is 80% of the entire width of the screen. That’s why I set its width to 80%.

There is 10% margin so that it is in the middle of the page.

padding gives a little more room inside of the div. 20px to be exact. You can now read the text better.

I kept all of the colors and styles of your code besides the padding and margin which mashed up your page.

Make your images stack on top of each other so that there is enough room so there is no horizontal scroll.

You picked a modern font that really matches New York. Nice job on that.

At all else, I’ve really enjoyed the work you put into this. Great job for your first project.
:slight_smile:

1 Like
6

gotta admit, looks much more nicer. If I reduce the browser in size the second photo doesn’t shift. :frowning:

7

When I look at it on my computer there is a lot of unnecessary spaces between your elements in the HTML. It isn’t anything that is going to break the application but you can easily tidy it up and make the code more readable but hitting the tidy HTML or tidy CSS button

8

Register your email address so we can see the full view display

9

You forgot to add the code I gave you.

I know how to make the images fit in.
Put both images in ONE <figure> tag.

Solution 
<figure id="img-div">
    <img id="image" src="https://www.avalonhotelnyc.com/wp-content/uploads/2018/12/architecture-building-exterior-buildings-1389339-1300x867.jpg" alt="new york city parking"/>
		<figcaption id="img-caption"> New York City Parking Rare Sight</figcaption>	
          <img id="image2" src="https://cached.imagescaler.hbpl.co.uk/resize/scaleWidth/815/cached.offlinehbpl.hbpl.co.uk/news/OMC/TimesSquare-20151006033612984.jpg" alt="yellow cabs" />
					<figcaption id="img-caption2"> Times Square with usual yellow cabs</figcaption>
				</figure>