Here’s v 1.0 of my Carl Sagan tribute page.
Project Link- http://codepen.io/Cazzowary/pen/akjYva
I know it’s pretty unimpressive, but it’s my first crack at it! Feedback appreciated!
Decent job.
I suspect it will get a bit squishy on mobile devices, but I couldn’t view it full screen to confirm. For others to view your pens in full screen mode, you’ll need to verify your codepen account.
1 Like
Okay here’s v1.5! https://codepen.io/Cazzowary/full/akjYva/
I’ve made the image responsive, as well as adjusting some of the formatting. I’d like to place the two main div’s (the intro pic and the main body) nested within a larger background div. Need to review my lessons to figure out how to do that.
1 Like
hey @JacksonBates I’m suddenly running into a strange problem. My main img is actually a link as well, but whatever size I make the image the ‘link’ takes up the whole width of the page. So like if I move my cursor to the left or right of my main image it still changes to the link cursor, and clicking will move me through to the link destination. Any idea what’s happening there?
Also, I activated my account so you should be able to view it in full screen now. Thanks!!
-Jeff
Very nice!
Carl Sagan was a smart man. How long did it take you to do your project? It took me approximately 10 hours (over two days) to do mine.
Feedback would be appreciated on mine as well!
Good luck!
Awesome page, @erickstirlingpro ! Love Bruce Lee!
Your page looks like you put a lot of effort into it. Going the extra mile by incorporating pictures, videos, lists, links, etc. The only thing I would like to see that isn’t there is maybe a splash of color. The B/W theme works very well with all the old pics/vids of Bruce, but a splash of color strategically placed might grab the eye!
I’m actually going to go through your code and learn how you did those awesome quotes, and how you embedded youtube vids!
As for my page, I was much more concerned with just figuring out how everything worked and pushing out a functional page asap. I find that if I’m not making regular, measurable progress I tend to flounder. So the actual first version of the page probably got coded and pushed up in about an hour or so. Since then I’ve been working on improving it. I guess my style at this point in my coding journey is more iterative. I want to push up a bare bones version just to make sure I understand what’s happening. Then afterwards I can take my time and add layers.
So for instance, I’m definitely going back after this and adding some youtube vids and block quotes, inspired by your page! I also want to try adding several sections and fleshing out everything and adding some buttons that take the user to different parts of the page. That’s part of the next coding project, the portfolio page, and I want to make sure I have a firm grasp of that.
-Jeff
Thanks Jeff!
Guess what? You and I think the same. This is my Tribute page 2.0. I did exactly as you have done. You see the first container? The one that looks like a book cover? That’s ALL I had when I posted it for the first time. (On Gitter).
It took me 7 hours approximately to create it, as it seemed all that I had learned was gone as soon as I saw the blank html box. It was pretty demoralising thinking “My God, this is all I can do after all those lessons?” Lol.
It took me so long because I had to go back and review lots of code I hadn’t memorized properly. I am very glad I did because now I know I have the basics down. Another reason it took so long is because I fiddled around with the design a bit too much. I deleted vast quantities of useful code just because I didn’t like the design.
That said, when it was critqued for the first time (yesterday) most said it needed some context, so today I spent another 3 hours, yes, only three hours (compared to that awful performance yesterday) researching and adding the context.
I’ll add some color and (hopefully) some simple animations or something.
Thanks and goodluck Jeff!
Ha! Totally feel you on the blank html page. Like “Uhhh, okay. What now?”
I’m looking at your blockquote CSS but it’s not stuff I’ve seen before. what part of the CSS is generating that vertical grey bar and cool " symbols? I totally want to poach it for my site!
As for the color, I’m certainly no designer (just look at my page LOL!) but maybe even just a colored bar separating your intro headline and pic from the body might help draw people in. Red always complements a B/W color scheme!
-Jeff
Terrific idea with the color. I’ll gonadd that right now actually. 
Here is the .css for the vertical grey line and the “open quotes”
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
Link where I found some good blockquotes: