I think I’m as done as I can get without feedback and a massive increase in skills. I wanted to make something that was aestetically pleasing as well as functional. I am wondering if it perhaps has turned out a bit too bland, or what do you think? It’s so easy to become blind after staring at your own work for so long!
I had to rewrite my code a few times to tidy things up and look for better solutions. If you see something that has been done in a weird way, please let me know.
Good job. I like the color scheme and the overall feel of the site. I don’t think its bland I think its a good use of mute colors. I quite like the font too.
I would suggest looking at the push / pull properties of bootstrap. With that property you could make your picture appear above the text on narrower screens for a more natural flow.
Also, in codepen you only need the html between the body tags. The stuff you would normally put in the header goes into pen settings like where you enabled bootstrap. Other than that all your html and classes etc seem to be in the right place and your css makes good sense (you dont need to specify px or any other units to zero values though).
I didn’t know about the push/pull, so will look into that. Same with the header code. I added some through the codepen settings, but wasn’t sure if everything could be added there or not. Good to know.
Regarding 0px, is that true when they are presented in-line as well, or only when they are on separate rows? I mean, if I need something to be “10px 0px 10px 10px”, how will it know that the right side should not have a value added?
I’ve pasted the two different examples from my code below. The .custom-padding did actually have values on all sides, but I changed it as I altered the design slightly.
yeh the header code goes into the pen settings under Stuff for head. You should also Insert the most common view-port meta tag too via the button. That tag help to render the content according to the screen size on the device.
Your .custom-padding can be written as below. Each value position goes like so - top, right, bottom, left. clockwise around the element. The same principle applies to border and margin etc. It’s quite intuitive once you get used to writing them that way. The 0 could be any unit of measure and it’s still the same width or size so css doesn’t make you distinguish 0 values.
.custom-padding {
padding: 20px 0 0 10px;
}
edit - another way to write it too. this one mean 0 on the top and bottom, 10px on the left and right.
.other-padding {
padding: 0 10px;
}
For designing responsively ( I’m going into detail here because I get the impression you like your work to be just right) you might be interested in other units of measure than px. Things like em's and rem's - i’ll not post a link because there’s tons of info on google about them. Essentially an em is the size of an m. (usually equivalent to 16px) and a rem is a relative em . Pixels are not entirely suited to responsive design once you get down to it. No harm in for now though just thought you’d like the pointer.
I see. So the nil has its place, but doesn’t have to be defined as there is nothing to define. That sounded less intuitive in writing than it did in my head, lol…
I tried to use the one-line method where I could, but in the end it got a bit mixed up after all. Didn’t know about the repeating of values like the second example, so that was useful too.
I did see something about the alternative ways of defining size, but it sort of went over my head because I never really took a closer look. I’ll check it out for the next project. I do indeed like things to be just right, including how my code looks. It’s farly simple stuff now, but when working on larger projects I imagine that having these little things down to a tee could actually make a difference.
If you ever read a book or do a course on responsive design methods, they’ll teach you all about that kind of thing anyway so I wouldn’t worry about it too much. I can pass you some links and stuff but didn’t know if you were just concentrating on the FCC javascript curriculum right now.
I have indeed dived straight into the JavaScript module (which demands considerably more of my head than the HTML stuff, yikes!), but I might need this for future projects. I reckon I can come back to this thread if that need arises I really appreciate your feedback and help, so thank you!
Hi! Well done! I like it! The page is well structured, and it’s responsive; probably on small screens the font size of the about section is a bit too big. To comply with the SoC rule (HTML for structure, CSS for presentation, JS for bahvior), you should avoid inline styles, and you should remove that few lines of javascript: if you want to hide the border outline that appears when you hover on portfolio imgs, you have just to add a border:none rule for the .thumbnail:hover class at the end of your stylesheet, instead of disguising it with the background color (your jquery function does not actually hide the border of the element but the first time that you hover on a .thumbnail element applies a faded pine border to all the thumbnails of the portfolio).
Nice, that’s very helpful! I assumed there would have to be a way to change it without using jQuery, but I couldn’t manage it, so I figured I’d just sort of cheat my way out of it, lol. Mainly because I didn’t know that I could set the border to none.
Is the goal to not have any in-line styles at all? I think I was just being a bit lazy here, so I’ll have to clean it up. I did one round of it already, before the (for now) finished version, but I’ll aim for all styling to go via CSS then.
thank you for sharing your professional profile. It looks great! Can you please tell me briefly how you were able to take a screenshot of your webpage and post it on the internet so that it can be used as a thumbnail for your professional profile.
