I’ve always heard the chatter between people in my major about the difficulties of Web Design, but I thought how hard could it be?

Well, turns out pretty hard so far.

For this week we began specifying exactly how we wanted our content to appear through the use of CSS. The most difficult part so far has been learning the rules of CSS and what properties to use at certain points. I began to just play around with different features that I picked up from CSS3 for Web Designers.

First in the Body I wanted to keep the margin at the automated size but wanted to create a solid black border around the body to really pull it off the page and bring attention to it. I have been messing with different heights and widths for the body so that it would appear nicely on every browser and device, for the body I made the width 300px. By using a solid black border with a light gray background color I tried to again bring attention to the body of my resume. I always get worried when the elements I’m using do to show up in color but I’ve learned that not all will… for example the margin element below you can see is still black.

Body screenshot:

Screen Shot 2017-02-22 at 3.30.25 PM.png

For my headers I specified font-family, font-size and font-weight in order to bring attention to the use and direction of my headers. I still haven’t really grasped an understanding of which fonts work best together and work for most browsers so I’m really just doing trial and error. I found a great converter website for em and pixel which really helped when I was choosing my font-size..

Website  >>>>> https://www.w3schools.com/TAgs/ref_pxtoemconversion.asp

I then continued by using the code for margin -(bottom, top,left,right) to see how it would affect the placement of my margins for my headers. I don’t know if it will be distracting seeing my headers I used various positions but some mistakes are good mistakes…..right?

Header screenshot:

Screen Shot 2017-02-22 at 3.30.46 PM.png

For my paragraphs I experimented with padding( bottom, top,left,right). This element just creates space around the text, I read that is was a shorthand property but I still wanted to specify and see how it visual changed my paragraphs. This element could be very tedious.

Paragraph 

Screen Shot 2017-02-22 at 3.31.08 PM.png

Lastly, sorry I know this might seem time consuming but I was actually surprised how quick coding can be with the guide of a book or online site…. For my unordered lists I used the #nav tag in order to navigate links if I decide to use them in my links. I also specified the use of reba colors and used a text shadows in order o draw attention to my lists in a different way. Lastly I added list-style with an outside square to change it up a little.

Unordered lists

Screen Shot 2017-02-22 at 3.30.59 PM.pngScreen Shot 2017-02-22 at 3.30.53 PM.png

Well, just when I thought I had it…… For some reason all my coding in brackets is not appearing on my resume html. Im guessing I need to connect my resume css with that of my html but I am a newbie and am not sure how to do that so Im stuck with the coding in brackets and noting changed on my page. Hopefully Bill can help with that part but all for now, hope I could be of some type of help with this epic fail below haha.

Screen Shot 2017-02-22 at 3.48.01 PM.png

But it is still  the beginning of my Web Design class and I haven’t given up yet.

Check in with me in 3 months to see if I survived #rip #deathbydesign

Site: http://averyymarz.com/resume.html

Avery Marz

Advertisements