I didn’t look at your code but that whitespace is almost always because of a margin from that element or other elements, and it can be fixed by looking at margins from nearby elements.
You can alter image sizes in your CSS using height/width properties. The best practice method would be to load the image in a photoshop-type app( if you don’t have access to photoshop) and resize the image correctly and then use that image. When you set the height/width props in CSS of an image, the browser still has to load the actual image size and then resize it, doing that work in photoshop increases performance. (if i have a 1000px tall and 1000px wide image and i set the following in css: height: 100px; width: 100px;, the browser still has to load 1000x1000 image and resize it to 100x100 versus letting photoshop do the hard work and only loading your desired image size)
I don’t touch bootstrap but if you would like to level up your css skills and learn about the box model, absolute/relative positioning etc i would advise you to run through the following site, which is fantastic.
html and css credit @P1xt for the link, who for some reason seems to have every good programming link ever invented…anyway.
I can’t recommend that page enough, also check out the net ninja for more css, animations. He is truly amazing at teaching solid intermediate css skills.
I would check out those 2 resources first, learn a little, play around a bit and then come back to your portfolio and see what changes you can make to make that portfolio even better.
I think you’ll be alot more adept at answering the question: ‘how do i move that element’ or ‘why does that element not move like i thought it would’ or ‘why is there whitespace here’ etc.
Also, and everyone is unique so take this with a grain of salt, but I am of the belief that as a beginner who lacks css skills, you should stay away from a framework like bootstrap. I know it might be easier as a beginner to type in a classname and see some css applied but it really isn’t teaching you much. If you start with a blank css file and do the work yourself, you’ll learn 1000x more. Understanding the ‘why’ will go a long way towards being able to solve similar problems in the future without having to google or ask questions, you’ll know how to apply the fix because you understand what is happening on a low level. Anyway, that’s just my opinion, do what works best for you as you learn and try to progress.
Good luck and happy coding.
