Search

#WDDS17 Design Journal

html5 • css • web standards

Aspire with little re-wire

We need to get our confidence back. I feel as though this class feels like they should be master coders by now, but that’s not true.

Css-tricks.com is a great resource. This site not only provides forums for you to discuss issues you might be having with CSS, it provides various tips and tricks that others are discovering simultaneously. You get inspiration to go further still (that’s the Magis) and discover tricks from simple ——————-> difficult.

I spent some time dillying and dallying all around the site trying to find something to write about and I came across the “Snippets” section of css-tricks. It’s a fun section where you can basically browse  random fun bits people have discovered through their trails with CSS. One very simple trick that I discovered was an inner shadow css code. I was excited to find this because it essentially works the same way that the alternate color boxes work in our resume only it’s used for shadowing…observe.

This is a copy of my digital resume BEFORE the new CSS code was put in alongside the code itself:
screen-shot-2017-03-02-at-4-59-50-pmscreen-shot-2017-03-02-at-4-59-40-pm

 

screen-shot-2017-03-01-at-9-20-11-am

To the left is the HTML code, to the right is the CSS code and under it is the before version of my resume. Now here is the after version:

screen-shot-2017-03-02-at-5-43-00-pm

LOOK AT THAT 5:45 (yes I know this is late) SHADOW. INCREDIBLE RIGHT?!

Just that little bit of shadow adds just that much more character to my lowly resume and I did it using a coding technique that we have already learned in class (and css-tricks). There are a lot of tricks with coding that are not that far out of our reach but are still difficult to master accurately.

The reason this is my blog post is because the theme of many of these blog posts has been a quasi hopelessness. On the contrary I believe that we are right where we have to be in terms of coding our resumes and learning HTML and CSS in general. While going through the pages and pages of people not understanding what is going on (not just this class, but people all over the world) we need to get that this is building blocks.

It’s block on block on block until we get to the final levels of what we want until finally we can get to something as cool as this: http://www.rleonardi.com/interactive-resume/.

Robby Leonardi’s resume is packed full of more than just HTML and CSS:

screen-shot-2017-03-02-at-6-19-03-pm

This seems like it’s far out of our range, but there is no possible way that I could have even figured out how to do shadowing just a month ago. At the rate that we are learning nowadays we should be able to do this by the time we graduate (maybe not me, because I graduate soon, but you get it).

My point is that this is fun! This is all an adventure that we are experiencing together. It just takes a quick visit to certain websites to see how close we are to coding new and exciting landscapes and it’s only a matter of learning. Bill will get us there.

Designing From The Ground Up

Web Designing from the ground up is like building love “From the ground up” as told by country music artists, Dan + Shay.  

So, let’s start from the beginning. 

Our relationship with web designing all started back in January. That was the initial start of the semester and our bond. We locked eyes with the “Brackets” and “FireFox Developer” applications. The rest was History…..SIKE (well, not “history” just yet).  February was a short month, full of assignments. It is now March, and we have accomplished a great deal of progress. We  worked hard on each coding assignment growing closer and learning about its imperfections day in and day out. We learned what buttons we could push and when we were crossing the line. As time went on, we met its font-family deepening that bond with one another.  We are still getting used to being in this relationship but are working towards a long and successful journey.

As we look into the future of our relationship, (April and May) we plan on creating a beautiful website.  Life with coding will eventually be more than a memory in our class and our legacy of a website will forever live on.

Below are the lyrics to “From the Ground Up” by Dan + Shay. (I incorporated my own comical lyrics to represent this wonderful journey)

Continue reading “Designing From The Ground Up”

Playing Around Until You Get it Right

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

I have no idea what I’m doing

Do you ever try to do something that looks so simple and fairly straight forward, and other people around you are able to do it without a problem, but you’re the one that’s having trouble?

Welcome to my struggle.

Although my coding skills are still at the beginner level and I haven’t touched it since we created it, anyone that goes onto my site is greeted with a white page with a simple sentence explaining that there’s nothing to see. I may not be able to create an elegant page with fancy features (yet), I at least wanted to make my page look a little bit more lively. To do that, I wanted to simply apply a background image to my page.

First things first, I wanted to play around with the code and not make anything final on the main page, so I duplicated my resume.css and renamed it for my sandbox page.

Since I had no idea what I was doing, much like with everything else when it comes to web design, I had to trust the good and mighty Google for the answer. Much like the rest of the class, I used w3school.com to guide me through the process. At first, I wanted to set the background using CSS, and this is what the code would look like:

cssbackground-image

Okay, simple enough. So I tried that myself:

cssbrackets

(I am aware there is no semicolon in the above image. I added it after taking this screenshot. It did not help)

No results. Okay, maybe there’s something else you have to do but they’re just not showing that part. I tried adding images/ to before the image file. Nope, that didn’t work.

This is the part where I tell you that everything starts to look like this.

After trying multiple other combinations and trying to toy with the code, I had a thought: “Did I add the image to the server?”

Oh, geez. So I did that, and then used the initial code I used. Still no dice. I looked up multiple videos and followed them to see if there was something I was doing wrong. None of them were working for me.

…Okay, now I’m getting frustrated.

This is about the time I noticed that Mike F was able to do what I was trying to do, but in HTML. “Alright,” I thought. “I’ll try what he did.” I used the same page of w3school that he had used and switched to my sandbox’s index.html document.

htmlbackground

I did exactly what he had done, and checked to make sure I wasn’t making the same mistakes he made. I inserted the code, and then uploaded the file to the server

No changes.

Yep. That’s it. I’m done with this.

After spending hours trying to figure out something that seemed so simple from the start, I came up empty. As of now, I don’t know if there was something I was doing wrong with the code or there was something outside of it I didn’t take care of. With my luck, it’s something so simple and an easy oversight.

Mike, if you’re reading this: please. Help a brother out and show me your ways!

-Domenic Manzi

http://www.domenicmanzi.com

Just when you think you’re getting it..

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

The Struggle: New Web Designers Edition

As a communications major at Saint Joseph’s University, we are all required to take a web design class. At first, I wasn’t aware of this but when I found out my first thought was, “What did I get myself in to?”

When I tell people I’m taking a web design class, they always have the same reaction which consists of, “Wow, that must be really hard I can’t believe you’re learning how to code”, or “I would never have the patience for that, it seems literally next to impossible.” To answer those responses, the truth is that it is hard to code, and it does take a lot of patience.

Sitting in my first web design class though, Bill made it so easy to understand how to code. The coding application we use, Brackets, also makes it easy to make sure we know what were doing and how to code the correct way.

To start our coding off, Bill had us download Fire FTP and Brackets, which are both needed to make sure the website becomes live. From there we created our website links with HTML to make sure the site was in fact live. Follow this during week 3 of our class meetings, we put what we had learned into practice by creating a resume within Brackets to practice coding. While we were coding, we learned how to separate sections of our code into paragraphs, headers, sections, titles, lists, and unordered lists.

Going into this week we decided to take a look at CSS along with the HTML we’ve been learning how to code. Within CSS, we learn a lot of different things including color coding and styles as well as how to make your website look ‘more like you’ so to speak. Everyone has a different style, so when it comes to making a website, you want to be able to express yourself. When I was looking into coding with CSS and making my site look more like me, it was a struggle as you could imagine. I did have our books for a resource though, and obviously the wonderful internet helped me in my time of crisis.

I decided to try and give my website a little pop of color, and found some coding on the internet that helped me out. (the below screenshot is from the website I found the coding.)

SCREENSHOT FROM WWW.W3SCHOOLS.COM

Screen Shot 2017-02-16 at 3.01.25 PM.png

 

 

screen-shot-2017-02-16-at-3-07-10-pm

 

screen-shot-2017-02-16-at-3-07-22-pm

**the above content is my success in coding my website with a different background color. The website I found gave tons of different examples of how to do a new background color like above, as well as setting the width for borders and using different fonts within CSS. Now that I am more confident with coding with CSS and I know this site exists, I’m excited to play around with different coding elements more. I highly recommend this site for anyone who is struggling with coding in general, they literally have everything on there that you need to know about codes.

I know my site as of now is super bland, but feel free to check it out at http://www.ginaoliveri.com/resume.html.**

p.s: I know it’s still only my resume… enjoy stalking my peeps  – xo 🙂

Background Images, Color, and Moving Text

http://michaelgfarrell.com

Designing for humans is important. Often times we are afraid to interrogate human characteristics into our design and use of technology. We forget that technology is an extension of ourselves. The more we understand this, the more we can use and design technology/the internet/websites as exoskeletons of our minds and relationships. I believe we need to use technology to express our vulnerable, transparent, and honest selves (to whatever extent we feel comfortable doing so.) In doing this we can design the web in ways that promote values over impulses. One simple start to designing for human-centered-purposes is integrating art with our websites. This can certainly be tricky especially when using websites for professional and academic purposes but in this context (a personal website, web design class, experimenting) I thought it would be appropriate. I wanted to change the background of my site (at least the index) to have something that wasn’t so boring (i.e. plain white background.) I decided to use an artwork that I contributed in producing along with other human and non-human authors. I had no idea how to add a background image/pattern and so I asked the interwebs (via duckduckgo.) The code I found was on https://www.w3schools.com/tags/att_body_background.asp

screen-shot-2017-02-15-at-9-17-59-pm
So I used this code. It didn’t work! After about an hour of trying small things to get it to work (made sure all letters were lowercase, triple checked the code, made sure the picture was saved as jpg) I finally realized that it was not coming up because I never transferred the photo from the images folder on my wd folder to the public html. So I did this. But. Still. Nothing. What the hell! Finally I looked back at my sandbox image code and realized that there was “images/” before the picture title. Once I entered images in front of the title (<body background= “images/picture with color.jpg” >)  it finally worked! Wow. I was not thinking.

The art I used was a picture I took on my phone. I then corrupted (4 artistic purposes #_# ) the file on my computer, and lastly converted it to a jpeg (because this was the format I was familiar with from our work in the sandbox.) I like the way it looked but this specific pattern/color/style would definitely distract visitors on my website (which for now is going to be used for primarily academic and professional purposes.) And so I will probably remove it soon and use something less aesthetically “noisy.”

screen-shot-2017-02-15-at-9-16-05-pm

 

Lastly (for fun) I decided to mess around with some text colors/styles. I attempted to make text “blur” using this code from http://www.registerednursern.com/cool-html-codes-animations-text-effects-marquees-backgrounds/#html-text :

<TABLE  STYLE=”filter:blur(color=black,  strength=5)”> <TR><TD><center> <b><font color=”#FF0000″>Put Your Text Here!</font></b></TABLE>

It did not really make the text blur, however it did help change the color as you can see it is a nice light green shade.

screen-shot-2017-02-15-at-9-47-40-pm

I also tried to make text move. I used the code

<marquee onMouseover=”this.scrollAmount=2″ onMouseout=”this.scrollAmount=8″ height=”34″ width=”713″>Put Your Cursor over these Words & See what happens!!!!</marquee>

This worked!

screen-shot-2017-02-15-at-9-35-02-pm

It’s a picture here so it’s not moving but go to michaelgfarrell.com and you’ll see. *_*

Blog at WordPress.com.

Up ↑