This week in web design we are continuing to learn new design options while playing around with our resumes. We began thinking about how our pages would look on other devices besides our computer screens; like cell phones and tablets. The goal is to make our resumes as responsive to other devices as possible. When this was first introduced to us I was kind of confused. I was not sure if we needed to put all of the coding that we had already done under each section again and just change the numbers, or if we had to put what we were changing about the page under the section — wow this sounds more confusing than it actually is. I am also never sure what size to put for the fonts or margins or anything so I kind of just put random ones and hope for the best! (not sure if that’s very efficient though)

So, I decided to go with the less tedious option and just insert into my CSS what I wanted to change when my page responds to different viewing platforms (as pictured). I copy and pasted what I had already coded, so I left some unnecessary extra information that would, in the end, not effect my resume.

Screen Shot 2017-03-01 at 8.09.31 PM.png

I played around with different numbers until I found ones that best suited the sizing of the fonts and margins for the different platforms. Here is what my resume looked like on my computer screen compared to my cell phone screen:

Screen Shot 2017-03-01 at 12.04.31 AM.png

IMG_7924.PNG

After somewhat grasping the idea of responsive web design, we moved on to coding floats and divs. These essentially split our content onto each half of the page, as you can see in the picture of my resume on a computer screen. This is called float. Float allows for different elements to “float” to different parts of your webpage. We realized that you have to be sure that you use the clear property as well to make sure that your background color is not taken away when you insert “float.” Here is what that looks like in your html and CSS files:

Screen Shot 2017-03-01 at 8.46.46 PM.png

Screen Shot 2017-03-01 at 8.46.27 PM.png

 Float and div can be used for more than just text! It is very common to use with images as well. I found a site online (w3schools.com) that is super helpful with all things coding and breaks down float and clear for css. Not only does it tell you how to code them but it gives you information on what to do if your floating element overflows outside of its container. The site also provides examples and definitions of css float properties. Definitely a useful resource to use if you ever run into any problems.

As soon as I feel like I am starting to get the hang of things, something new comes along and sometimes makes me confused again. But in the end I know that this is an array of new information that I would never in a million years thought that I would ever be learning. As stressful as it can be to learn new things it is at the same time exciting and I look forward to adding to my newfound knowledge of web designing.

Here’s a link to my resume: http://breannewelsh.com/resume.html

Thanks for reading!

– Breanne Welsh

Advertisements