My adventure of a portfolio page

My adventure of a portfolio page
0

#1

I had a lot of trouble at the get-go this being the first site I’ve ever made, but after endless googling, tweaking, and reading about HTML, CSS, Bootstrap etc… I think I have managed to make something functional. I have the format down, I just have a couple styling questions as my CSS skills are very weak, and of course am open to any type of advice! Here is my pen

  1. Why is there white space between my background images? Do I have to manually set the height of each class? I thought background-size: cover; should take care of this?

  2. What is the easiest way to alter my images sizes, add borders, and change the positioning? I mostly am focused on getting the correct spacing between my images, paragraphs, and buttons. For example, I want to move my social links a little further down from my form and space them out a little. I have attached a sketch I drew of my ideal layout.

  3. How can place my text elements inside of a box or some object to clean things up a big?

  4. Lastly how can I add in some different animations for scrolling, hovering over images etc…also what can I improve on the most?

All comments are welcome and greatly appreciated! Very glad to be apart of this community where we can all help each

other improve!!


#2

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.


#3

That definitely makes sense, I’ll def check out those resources! It’s just that all the work in the course prior to the the portfolio page had us using bootstrap so I figured I would at least use it somewhat on the project. I love this as well

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.

This is exactly what I was thinking and realized more as I got further along, I often wondered what my tweaks were doing and what was underneath the framework. My goal was to just get up something functional and make it a work-in-progress as I learn more. The devil really is in the details. Thanks again for your advice and let me know if I can return the favor!


#4

By default lots of browsers have margins and padding on all pages. To get rid of that you can put
body {margin:0px;padding:0px;} in your CSS. I’d say definitely bookmark the W3schools CSS reference for all of your CSS needs.
http://www.w3schools.com/cssref/default.asp