Image Credits: Stephanie Taylor
I definitely learned a lot from the responsive resume/personal statement website project. Going into this project I had very limited knowledge of the workings of html and css. CSS scared me. I knew a little bit of what html was, but never really knew anything about css or how they were connected. Html seemed easier for me to understand. I think it’s still that way to me, but CSS doesn’t scare me half as bad anymore.
I changed the colors of my website half a dozen times during this project. I was trying to use the psychology of colors. My first choice was a bright shade of purple because purple is often thought of as being a color that represents success and being that this is a portfolio website/resume assignment, I wanted to give people the impression that I was successful. However, my original shade was blindingly bright and very difficult to read. I continued to study up on color psychology as well as observe other successful websites as well as my classmates and realized that blue would be the better option. Blue represents calm, peacefulness. It is also easy to build upon — many shades of blue are easy to read.
Earlier on in this project I think I focused way too much on the colors/design and not enough on the code itself. I did this because colors offered a sense of comfort to me — they seemed easy to pick out and play around with. Coding was challenging and made me nervous. I didn’t want to break anything and I didn’t understand how many parts of coding worked.
The more I coded the easier it became. When I read about coding in the textbooks it confused me. The textbooks were simple and easy to read, but coding just didn’t click with me until I did it for myself. I think coding is one of those things in life that I have to use my own trial-and-error experience to learn. I also learned a lot by taking apart my classmate’s websites. I constantly checked their pages to see how they were approaching the assignment. When I saw something that I liked I would view their html/css codes and try to apply it to my own website. When I did this I often found that their visions didn’t match what I wanted to do with my website, or that, while it looked good on their sites it didn’t cross over too well to mine. However, even when the codes didn’t look so great on my website, playing around with them definitely helped me learn how to code and what codes created what functions.
I feel much more confident about coding now than I did before. I am quite pleased with how my website looks at this given moment. However, there are definitely some things that I would still change if I had more time. For one, I don’t have my writing samples listed at the moment. This is a requirement for the second project, but still many people included it this time around. I saw some classmates add it directly to their resumes which I found interesting. I kind of envision having a whole separate html file/page just for them. I have a lot of writing samples and if I give them their own page I think it will help to keep it neater.
If I had more time I might also have made my personal statement it’s own page instead of just placing it on the home page. I’m not sure about that though. I do kind of like it on the front page as I feel it helps to set the tone of the website as a whole. This is a decision I’ve been pretty torn over. I think I should look at some more examples to figure out where to go with that. If I had more time I think I would have also done a bit more with margins/padding/borders or perhaps division boxes to make my page stand out a bit more. Padding and margins originally scared me and gave me much anxiety, but once I began learning where/how they are used on a page I started to understand them more and my anxiety went down. I struggled a little with the boxes and figuring out how to use them in a way that made elements pop out without the website feeling too crowded. I still feel like there are more creative ways to use the division boxes that I just didn’t have the time to discover yet, though.
Overall this has been quite the learning experience and an incredible intro into the world of web design. I can’t wait to learn more and see how my website evolves as the semester goes on.
Screenshot of final index html codes
Final screenshot of resume html codes
Final css stylesheet screen shot
As a senior Writing Arts major at Rowan University, I have grown used to having my ideas of what constitutes or defines writing challenged. By this point, I can certainly say that writing is a lot more than just words on paper. However, I still never really thought about writing in the form of codes until the responsive resume/personal statement in XHTML and CSS. I’ve always been interested in coding/html and thought of it as a fun hobby, but to me web design was for well, web designers, not writers.
However, to be a writer you have to do more than just write these days. This is a point I made in my personal statement and strive to live by. If you want to be a successful writer, you need to learn how to do it all. Companies would rather hire a writer that can code then have to hire a writer and a web designer. By learning to code your own website in addition to writing your own web content, you will be able to stand out from other applications.
Writing for the web and writing in code is a lot of fun, but certainly challenging. In other forms of writing such as creative writing, you have to pay close attention to details. Details tell the reader everything about characters, what they should think, feel, and how they should react to the written text. This is no different in the world of coding. While it is advisable to stay simple especially on a beginning level, details are still everything. They can make the difference between having a website that is in compliance with XHTML/CSS guidelines and one that is not. They can also tell the user what to think, feel, and how to react. For a portfolio website like the one I have just created, you want to make sure your details tell potential employers that you are experienced, professional, successful, and responsible. In order to do this having a page that looks clean, is easy to read, and has neutral, positive colors (blue is an example of this as it often envokes feelings of calamity and peacefulness). Websites that look sloppy and have dark, dismal colors (or ones that are too bright) may give off the wrong impression that a potential employee is clumsy, careless, or too negative.
I’ve always considered myself to be a writer of many genres and I am excited about adding web design coding to the long list of genres that I can specialize in. I believe I have made good progress with expanding my knowledge of XHTML and CSS through this project and I look forward to advancing my skills throughout the rest of the semester.
Final version of website’s main page
Final version of website’s resume page
Image Credits: TemplateMonster.com
When it comes to web design/coding there is one thing I constantly find myself dreading, procrastinating against, and otherwise fearing: setting my margins/padding.
Setting margins and padding in web design feels like algebra for me…a foreign concept that I have difficulty grasping. The more I try to understand, read my books, and learn about it, the more confused I become.
I have always been terrible at math and have never been able to understand measurements. I just can’t seem to visualize what 24px looks like around a box on a web page or what a 10px margin looks like.
My textbooks, Karl Stolley’s How to Design and Write Web Pages Today and Ethan Marcotte’s Responsive Web Design explain the concept of padding and margins pretty thoroughly and their light-hearted tone makes reading the text easy, but I still can’t grasp the concepts when I read about them in print. Padding and margins are elements of web design that I need to learn by hands-on trial-and-error experience. In order to understand what 10px or 24px looks like I need to see it in action.
With the padding Tryit Editor on W3Schools I can do just that. I just put in some numbers for the px and it will show me what it looks like as opposed to other settings or no settings at all. I can see this tool as being very helpful to me as I design my website. I think that padding and margins is something I will always struggle with due to math being such a weakness for me, but I think the more I work with web design/coding the better I will be.