Hi Fellow Coders.
I have just completed the New Responsive Curriculum, having done the old one a while back.
Here is my Profile Page, which shows both my old and new projects.
Any comments (helpful)?
Instead of copying all the code in here, I have inserted a link to my Sandbox. I hope that’s allowed on here. . . .
Looks good… a little plain I think, but what do I know 
. My friend always hates how my pages look.
A few things I like to add to spruce certain areas up that you might have fun playing with:
smooth scrolling: In a page where you can either scroll through the contents, or use a link to quickly get there, I think its nice to enable smooth scrolling. What it does, is when you click the links, instead of just magically popping to that spot, it will actually quickly scroll there. You just need to add this in your html styling for the site:
html {
scroll-behavior: smooth;
}
rounded corners: Curtain items look a little unrefined with sharp square corners. Rounding those corners off a bit in certain situations helps it look a little more elegant. You set them on visual elements, like images, divs, etc. You can set the roundness based on pixels or percentages. Usually just 10px or 15px is enough to just smooth it out. If you want an object to be circular, set it to 50%. You can also set only certain corners, like for your buttons, if you leave the top corners square, and round the two bottom corners, it would have an interesting folder tab look to it. Play with making your flower circular to, although rounded square would look good too:
#yourdiv {
border-radius: 15px;
}
.make-it-circle {
border-radius: 50%;
}
.just-the-bottom {
border-radius: 0px 0px 15px 15px;
}
Shadowing: Careful, its easy to overuse this, but I like it for anything that is meant to stand out on its own. Box-Shadow adds shadowing around the item and makes it look like its above the items behind it. It does good for a stand-alone image, like your flower, and since your page is held in a darker container than the background yellow, a box-shadow would make that stand out as well. The settings are <x-offset> <y-offset> <blur-radius> <spread> <color>. Setting a different color can also give a glow effect instead of a float effect too like below:
#my-shadowed-item {
box-shadow: 10px 10px 25px 3px black;
}
Lastly, and wasn’t even going to mention this one as its use could hurt, but sometimes you get a fancy effect by making things slightly transparent. When setting a background color, you could use an alpha setting that would make it slightly see-through. Maybe it would be a neat effect on your nav-buttons if they were a little bit bigger, but might also make them hard to read so might not be a good idea… but thought I’d mention it in case you wanted to play with it. 1 is solid, 0 is invisible… a good setting to just slightly see things behind it is like a .7 or .8… although if its seethrough it also mixes with colors behind it, so might need to mess with the colors too. Most seethroughs I just set as black, or similar to the background (0,0,0 is black). Could also use opacity setting in CSS to get the same effect.
.see-through {
background-color: rgba(0,0,0,.7);
}
Sorry, this wasn’t meant to be a book, but hope some of this gives you more ideas to mess with, and happy coding
Hey, thanks for the ‘book’. I appreciate the feedback. Thank you.
Totally like the round flower idea.
I will definitely look into those items you mentioned.
Quick question: will smooth scrolling slow things down on, say, a phone, with mobile data?
I suppose I could do a media query for that . . .
I do try to keep things loading and moving fairly quickly where possible.
I don’t believe there is any relevant performance cost of smooth scrolling.
I have implemented some changes …
If you would like to check my sand box again (link above).
I appreciate your feedback. Thanks for taking the time . . .
Nice, those changes definitely made it look more refined, and the transparent tabs did turn out nice. Flower might be a tad too big now, lol, but might just be my resolution. Good Job.
Fun technical point… your tabs aren’t in front of all your elements:
I’m guessing you intend for those Nav tabs to be in front of everything else. This is due to the order of your HTML objects as your sample project buttons were probably created after your Nav bar buttons.
Naturally objects created first appear behind objects created second (top to bottom), or basically children in front of parents, but it doesn’t have to. The property to fix that is called z-index. ‘z’ is refering to the third dimension (x, y, z) and the z-index can be used to determine what appears in front and what appears behind. Things with a bigger z-index appear in front, and stuff with a smaller z-index appear behind. Every element on your page by default has a z-index of 0.
So if you want the nav-bar to be in front of everything else, just give it a bigger z-index. I usually just put 999, but I believe just a 1 would work too.
#your-nav-bar {
z-index: 999;
}
Happy coding
Well actually. Tabs are an interesting thing on a phone . . .
I have found that some sites have the tabs on top, then when you want to get to the info underneath, it’s half covered by the tabs.
So . . .
Not sure how best to solve that.
I did it by making the nav-bar background NONE for small screens.
Not sure what is best for that though.
I could put another ‘quicklink’ at the top right to show/hide the menu, so they can see the whole page.
What do you think?
I think they call them hamburger menus…
Basically hidden until you click it. For just a 3-item bar though, I think just making it smaller and along the top of the phone shouldn’t get in the way enough for it to matter.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.