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:
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:
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
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
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.
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
#WDDS17 Design Journal 
February 24, 2017 at 1:33 pm
Hi Avery,
Thanks for posting this and for trying to add to your site.
There are several coding errors that are preventing your updates from working, but I think the initial issue is that you have not uploaded your resume.css to the right place. When I go to http://averyymarz.com/css/resume.css I do not see the additions you have made and discussed in your post. Be sure you are uploading resume.css to the css folder which is inside the public_html folder.
Once it is online, I can help you fix the errors.
Thanks!
Bill
LikeLike
February 24, 2017 at 3:29 pm
There are a few semicolons that are missing. The specific font should be first, and there is a hyphen missing for “margin bottom.”
LikeLike
February 24, 2017 at 6:44 pm
hahaha can relate to the #deathbydesign. I wish that HTML and CSS were a little bit more similar. I found the transition hard to go from using on every element to { and just the over all structure of the two different formats through me off. I’m hoping as the weeks go on CSS will start to become a little more easier to grasp and apply to our resumes.
LikeLike
February 26, 2017 at 7:06 pm
lol can definitely relate to death by design. Web design isn’t easy for beginners like us but you seem like you’re getting the hang of it so far. I think this week learning about padding, margins, borders, etc is gonna help in the future. It’ll make everything come together and it’ll be helpful when we go to put stuff in our resumes.
LikeLike
February 26, 2017 at 8:27 pm
I had a similar issue, posting to the wrong location at first, it is easy to do. I agree that the transition from HTML to CSS was a little confusing, however as we progress it is becoming somewhat easier. I’m hoping to see the progress as we complete our assignments and build on them. Sample code does help in many ways, but the trouble-shooting takes time when there is a problem.
LikeLike
February 28, 2017 at 6:53 pm
I was having very similar problems, and I felt that my issues with my css page were so far gone, i just started over and made a new one. In making my new one and comparing it to the old one, I realized that I missed putting semicolons after a lot of lines of code, so now I am making sure that i am very meticulous and organized with my css page, as the old one was the complete opposite. For now, mission is the getting the margins, boxes, and padding together on my page to catch up where I need to be.
LikeLike
February 28, 2017 at 6:54 pm
I was having very similar problems, and I felt that my issues with my css page were so far gone, i just started over and made a new one. In making my new one and comparing it to the old one, I realized that I missed putting semicolons after a lot of lines of code, so now I am making sure that i am very meticulous and organized with my css page, as the old one was the complete opposite. For now, mission is the getting the margins, boxes, and padding together on my page to catch up where I need to be.
LikeLike
February 28, 2017 at 7:06 pm
I was having very similar problems, and I felt that my issues with my css page were so far gone, i just started over and made a new one. In making my new one and comparing it to the old one, I realized that I missed putting semicolons after a lot of lines of code, so now I am making sure that i am very meticulous and organized with my css page, as the old one was the complete opposite. For now, mission is the getting the margins, boxes, and padding together on my page to catch up where I need to be.
-Adashia Franklyn
(My previous post did not have my name on it)
LikeLike
March 1, 2017 at 4:10 am
#deathbydesign so accurate! The website you posted is actually really helpful, I’ve used it a few times when I’m lost about certain rules or just need help fast. It really helps to have a guide when web designing, especially since CSS seems to be much more complicated than HTML.
LikeLike
March 1, 2017 at 3:07 pm
#deathbydesign is very relatable. As we move on I’m kind of getting the hang of it but agree that with this being my first exposure to this kind of stuff the new material can be confusing
LikeLike
March 6, 2017 at 5:37 pm
I can relate to the issues you’re having, and online sites and books are helping to clarify things for me too. I’ve been finding myself spending hours messing around with the format of my website and its very difficult to find a format that looks good. getting the coding correct so that it looks the way it’s supposed to is another battle
LikeLike
April 18, 2017 at 1:40 pm
I really like how you wrote this piece by piece; it was really easy to follow and understand because of the structural flow. Also, this type of work is perfect for all of us in coding classes. I have found that headers, paragraphs and borders have a similar structure, but are more time consuming than anything on the HTML page. For me, the sizing is super tricky! It takes me a while to get it right, and playing around with them can seem tedious at times. I really like that you’re not afraid to speak about your weaknesses!
LikeLike