I’ve been quiet on here due to a household full of COVID, but I’ve been plugging my hours in every day to get this done. I’ve got a bit of a retro colour scheme going on. It probably took me WAY longer than it should, but hopefully a year from now I’ll look back at this and laugh.
Also, if anyone could help me out with why my grid has a wide right margin, I’d be super grateful. Grids are not my strong suit, Grid Garden or no Grid Garden.
Also an exercise in seeing how long I can put off starting Javascript.
@ZaraK That looks really amazing! Some people really can design a page nice and you are one of them! It is fully responsive, passes all tests, and looks very nice. I am very bad at grid and I can’t see a solution, but I would imagine it would have to do with some other padding or margin you put inside that grid or on some of those elements. I would say move onto JavaScript though as it is a really good skill to have. Happy Coding!
Thank you - what lovely feedback, that’s very kind indeed! The most fun part for me is having a little think about which aesthetic to go for with each project.
Yes, I can’t for the life of me see what’s up with that terrible grid. Perhaps some fresh eyes tomorrow will help.
Javascript! I think it’s going to be tough, but hopefully FCC will break it down nicely.
I’m sure you’re familiar with box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click.
Try adding the following to the top of CSS;
* {
border: solid 1px lightgreen;
}
You’ll notice the .project-image is not centered within the .project-tile while the .caption is. It just shows more for the one on the right
Nice looking page. Cobra Kai and Sega Genesis, you have good taste.
I would suggest you stack the nav and project grid at small screen sizes (the nav overflows the page), maybe around 460px you can stack the elements (one column).
And yes, basing the projects around my interests really helps with motivation. Choosing the perfect Sonic sprites/writing from Johnny Lawrence’s bitter POV pleases me no end!
I would suggest making the nav links larger. Think of mobile users and their fat fingers. In fact, I’d suggest you always give links enough padding so they have a nice hit area.
For your nav links and the hover effect, to not have everything jump on hover, you can add a transparent border by default and then toggle the color on hover.
@ZaraK Nooice! I love the background image and the color combination! That sliding effect looks cool.
It looks like you are ready to post this webpage on a web hosting platform.
I suggest using a free web hosting for a static website such as the one you created.
Get a real domain name to make the page look professional. Free domain names are also available.
I suggest a different font for the id welcome-content and remove the text-shadow because I do not see the same text-shadow in other areas.
I think you should line up the four social media icons in a row in desktop mode.
Brilliant, thank you. I’ve made those changes to the sm icons, and made the text shadow more uniform throughout. I’ve also changed the ‘Jost’ font to Nunito.
Also, thank you for the kind comments! I love yellow/brown/orange/black combos for that 70s feel.
I don’t feel anywhere good enough to post to a hosting platform yet! I feel like my code’s cobbled together using sticky tape and bits of wire, so it definitely needs more work before I send it off into the world!
Hi @ZaraK!
I like your page very much. Maybe you can checked the contrast, cause the section about on my mobile doesn’t show good (maybe the font-size ia small but I bet on contrast). I put a screenshot here.
And maybe you would like to do hamburger icon for mobile? Cause the navbar gets really big in height (you can see it on screenshot).
And your icons for social media on mobile are a little bit big in comparison with other elements (with section About for example).
Sorry, I just wanted to help cause I really liked your page.
Right, fixed that About section and reduced the size of the social media SVGs. I was researching how to make a hamburger menu instead of the unsightly large column nav on mobile, but the most common CSS method seems to use pseudo elements with absolute/relative applied, and my skills are too elementary to apply that to the flexbox mess I’ve created. I think I’ll have another go at this with fresh eyes/more experience under my belt later on, as I’m well and truly burned out on this particular project!
