Web Development - WAYWO - #8

[daniel_c]

[QUOTE=Dorkslayz;44586883]Small tip, consider doing the checkout process in stages, instead of all in one page.

Perhaps display the price somewhere too.[/QUOTE]

Could you explain what benefit splitting the checkout up would have? I personally prefer to have it all on one page but I'm prepared to be convinced.

I feel the price is pretty well displayed on the main SSL page, the first link takes you directly to the purchase page (where the price is only displayed at the bottom) as it has a coupon but ordinarily a customer would have clicked through from the main page:

[IMG]http://files.danielchatfield.com/9U7G+[/IMG]

[rsk_]

[QUOTE=daniel_c;44586989]Could you explain what benefit splitting the checkout up would have? I personally prefer to have it all on one page but I'm prepared to be convinced.

I feel the price is pretty well displayed on the main SSL page, the first link takes you directly to the purchase page (where the price is only displayed at the bottom) as it has a coupon but ordinarily a customer would have clicked through from the main page:[/QUOTE]

It's a UX thing, customers can sometimes feel overwhelmed when there are lots of boxes to fill out.

Should also just clarify that I meant you should show the price a little clearer on the purchase page, I didn't like having to scroll down right to the bottom to find it.

[Kwaq]

[QUOTE=samm5506;44582042]I found out that it's possible to create grids in CSS using repeating gradients. I made this (works in IE10+):

[IMG]http://samuelmaddock.com/up/2014-04-18_17-24-45.png[/IMG]
[URL]http://codepen.io/samuelmaddock/pen/pgHkK[/URL]

I also found out that [URL="http://samuelmaddock.com/up/2014-04-18_17-20-16.png"]Chris Coyier favorited it[/URL] (he writes a bunch of articles on css-tricks.org)! :dance:[/QUOTE]

I stole this and converted it to be an em design grid, that lets me see em sizes/scaling on content as I prototype:

[t]http://lw2.co.uk/brl.gif[/t]

It's really useful for me thanks :v

[Jimmy422]

Which one of these looks better?

[t]http://i.imgur.com/85pQ33s.jpg[/t]

Or

[t]http://i.imgur.com/DpEhpeh.jpg[/t]

Currently looks like the bottom one, but a web developer friend of mine said it would look better reversed like the top.

[djjkxbox360]

Bottom one would look better if the image was moved up so that the light gray touches the top of the screen

[Kwaq]

[t]http://lw2.co.uk/mew.gif[/t]

got bored on easter v:v:v

adding networking node server and then its done!

update
[t]http://lw2.co.uk/xo.gif[/t]

[Miljaker]

Started making a basic lightweight framework with a friend of mine. Focused om extremely quick development of simple websites.

To test it out and improve on it we are working out an movie club website. Its going to be an invite only movie club. Every few days a new movie is picked based on suggestions and votes. After you have seen the movie you can join the discussion about it. It is supposed to have a very natural discussion flow on it.

When you go to the cinema with a bunch off friends your first few words after the movie are something similar to "that was amazing", "The first one was better" or "hah that was so bad it was good". After that you go into more detail and you keep making the details smaller. We are going to try to recreate that in a website. Anyway, working on login right now, have a wip ss.

[t]http://i.imgur.com/GYHjyrO.png[/t]

oh and if you feel like going to a mostly broken website (expect errors) [url]http://www.somemovieclub.com/[/url]

[Svenskunganka]

I'm attempting to create a personal site for myself. First time attempting [I]real[/I] design. Using bootstrap to get a better hang of it, modifying what I can to make it look better.

I can't seem to find the correct class to override and remove the underline under that menu aswell as I can't get the menu to "interact" with the image.

[T]http://i.imgur.com/w5OLGAw.jpg[/T]

Also, I definitely plan on changing that disgusting font. Have spent an hour on this so far.

[superbird]

[QUOTE=Svenskunganka;44611978]I'm attempting to create a personal site for myself. First time attempting [I]real[/I] design. Using bootstrap to get a better hang of it, modifying what I can to make it look better.

I can't seem to find the correct class to override and remove the underline under that menu aswell as I can't get the menu to "interact" with the image.

[T]http://i.imgur.com/w5OLGAw.jpg[/T]

Also, I definitely plan on changing that disgusting font. Have spent an hour on this so far.[/QUOTE]

Don't bother putting your resume on your site if you are going to have:

while($intoxicated == true) {drink_water();}

on the background.

[Svenskunganka]

[QUOTE=Superbird;44612023]Don't bother putting your resume on your site if you are going to have:

while($intoxicated == true) {drink_water();}

on the background.[/QUOTE]

*sigh*, do you really think I'm that stupid? I've spent about an hour on this, and two of those minutes went to the background. It's an internal joke between me and a friend of mine. It's a rather funny story. It's always nice to work on something when you have something "fun in the background". :downs:

Anyway, onto the real issue. The menu and the logo won't get closer to eachother for some reason. Maybe I have to set a z-index? Gonna try!

[Jelly_]

The HTML snippet that you show is missing a <body> and == true is redundant on the PHP one.

[superbird]

[QUOTE=Jelly;44612295]The HTML snippet that you show is missing a <body> and == true is redundant on the PHP one.[/QUOTE]
Part of the inside joke. Along with every other bug/mistake you might encounter.

[HarryG321]

[QUOTE=Superbird;44612023]Don't bother putting your resume on your site if you are going to have:

while($intoxicated == true) {drink_water();}

on the background.[/QUOTE]

Agreed.

while($intoxicated) {drink_water();}

The above is much better programming practice

[Maqtiah]

[QUOTE=Svenskunganka;44611978]I'm attempting to create a personal site for myself. First time attempting [I]real[/I] design. Using bootstrap to get a better hang of it, modifying what I can to make it look better.

I can't seem to find the correct class to override and remove the underline under that menu aswell as I can't get the menu to "interact" with the image.

[T]http://i.imgur.com/w5OLGAw.jpg[/T]

Also, I definitely plan on changing that disgusting font. Have spent an hour on this so far.[/QUOTE]

That underline is a border.

navbar navbar-default { border: none; }

Should fix it.

Next time please come with a live example so we can test it before we can confirm it works please.
Also there's a lot of tools to help you set up the menu, [URL="http://bootstrap3-menu.codedorigin.com/#sthash.OMhHt6JV.dpbs"]here's one for example[/URL].

Also you did try and inspect the menu right?
[IMG]http://i.imgur.com/2QmOm6J.png[/IMG]

(this is taken from the docs)

[editline]22nd April 2014[/editline]

Not sure what you mean with "interact" with the image either

[shodan]

[QUOTE=HarryG321;44612680]Agreed.

while($intoxicated) {drink_water();}

The above is much better programming practice[/QUOTE]

nah man

for(;$intoxicated;drink_water());

:v:

[Svenskunganka]

First of all, I just want to apologize to you Superbird. Was not OK of me to react like I did. Sincerest apologies to you. I was definitely not planning to have that as my background image, it was simply a markup image to see how it could look like and I didn't have anything else in mind at the time. But once again, I am sorry for how I reacted.

Onto the progress:

I've made some updates today with some help from Moofy. He's great at tutoring and I almost instantly grasped everything he explained, so a big thanks to him!

Here's the final design of the portfolio, might tweak some colors before I'm finally finished with it.

[url]http://svenskunganka.com/[/url]
[t]http://puu.sh/8jJu2.jpg[/t]
(Note: The index is the only page I'm finished with. Definitely going to take some extra time and effort into the other pages)

I'm not fully happy with the background image. Thinking of making all the code completely straight instead of rotated. Any inputs?
Also, the background is supposed to emulate the Sublime Text 2 default color scheme Monokai.

[B]Btw, it's responsive![/B]

[Datzy]

[QUOTE=Svenskunganka;44619636]First of all, I just want to apologize to you Superbird. Was not OK of me to react like I did. Sincerest apologies to you. I was definitely not planning to have that as my background image, it was simply a markup image to see how it could look like and I didn't have anything else in mind at the time. But once again, I am sorry for how I reacted.

Onto the progress:

I've made some updates today with some help from Moofy. He's great at tutoring and I almost instantly grasped everything he explained, so a big thanks to him!

Here's the final design of the portfolio, might tweak some colors before I'm finally finished with it.

[url]http://svenskunganka.com/[/url]
[t]http://puu.sh/8jJu2.jpg[/t]
(Note: The index is the only page I'm finished with. Definitely going to take some extra time and effort into the other pages)

I'm not fully happy with the background image. Thinking of making all the code completely straight instead of rotated. Any inputs?
Also, the background is supposed to emulate the Sublime Text 2 default color scheme Monokai.[/QUOTE]

I kept clicking around to see what I could find but all I got were octothorpes! :(
[img]http://i.imgur.com/mkYmL54.png[/img]

[Svenskunganka]

[QUOTE=Datzy;44619905]I kept clicking around to see what I could find but all I got were octothorpes! :(
[img]http://i.imgur.com/mkYmL54.png[/img][/QUOTE]

[QUOTE=Svenskunganka;44619636](Note: The index is the only page I'm finished with. Definitely going to take some extra time and effort into the other pages)[/QUOTE]

What you can do though, try to resizing the window to all different sizes and see how the site would operate on smaller devices.

[Datzy]

[QUOTE=Svenskunganka;44619927]What you can do though, try to resizing the window to all different sizes and see how the site would operate on smaller devices.[/QUOTE]

Runs nice, but please add a bottom margin.
[img]http://i.imgur.com/WxEpSUp.png[/img]

[superbird]

[QUOTE=Svenskunganka;44619636]First of all, I just want to apologize to you Superbird. Was not OK of me to react like I did. Sincerest apologies to you. I was definitely not planning to have that as my background image, it was simply a markup image to see how it could look like and I didn't have anything else in mind at the time. But once again, I am sorry for how I reacted.

Onto the progress:

I've made some updates today with some help from Moofy. He's great at tutoring and I almost instantly grasped everything he explained, so a big thanks to him!

Here's the final design of the portfolio, might tweak some colors before I'm finally finished with it.

[url]http://svenskunganka.com/[/url]
[t]http://puu.sh/8jJu2.jpg[/t]
(Note: The index is the only page I'm finished with. Definitely going to take some extra time and effort into the other pages)

I'm not fully happy with the background image. Thinking of making all the code completely straight instead of rotated. Any inputs?
Also, the background is supposed to emulate the Sublime Text 2 default color scheme Monokai.

[B]Btw, it's responsive![/B][/QUOTE]

Still not a fan of a Monokai themed background. I think it would look a lot better with a faint pattern in a light color.

[Svenskunganka]

[QUOTE=Datzy;44619993]Runs nice, but please add a bottom margin.
[img]http://i.imgur.com/WxEpSUp.png[/img][/QUOTE]

Definitely looks better with a 20px bottom margin for the smaller screens. Thanks for the input!

[editline]23rd April 2014[/editline]

[QUOTE=Superbird;44620044]Still not a fan of a Monokai themed background. I think it would look a lot better with a faint pattern in a light color.[/QUOTE]

Moofy suggested aswell that I should go with a lighter background, so I'll play around with different backgrounds and see if I can get something together that blends along better.

[editline]23rd April 2014[/editline]

Found a brighter background pattern, how does it look? I don't really have an eye for art. Also removed the rotated background "code" and repositioned it.
[t]http://puu.sh/8jPpC.png[/t]

[BeatAlex]

Definitely prefer the lighter colour scheme. But now the code looks like it's one file of code rather than two seperate snippets (Like the PHP code is running after the </html> tag), but is missing <?php opening tags.

So my opinion is to move it back to the right just maybe not slanted.

[Killervalon]

[QUOTE=Svenskunganka;44620050]Definitely looks better with a 20px bottom margin for the smaller screens. Thanks for the input!

[editline]23rd April 2014[/editline]

Moofy suggested aswell that I should go with a lighter background, so I'll play around with different backgrounds and see if I can get something together that blends along better.

[editline]23rd April 2014[/editline]

Found a brighter background pattern, how does it look? I don't really have an eye for art. Also removed the rotated background "code" and repositioned it.
[t]http://puu.sh/8jPpC.png[/t][/QUOTE]

I don't really like the background at all, also I don't like how it's asymmetrical

[Svenskunganka]

[QUOTE=BeatAlex;44621788]Definitely prefer the lighter colour scheme. But now the code looks like it's one file of code rather than two seperate snippets (Like the PHP code is running after the </html> tag), but is missing <?php opening tags.

So my opinion is to move it back to the right just maybe not slanted.[/QUOTE]

In my opinion, the background looked really bad when the html was on the right side. Maybe I can toy around and add something behind each block of code, to mimic it's their own respective "file".

[QUOTE=Killervalon;44621823]I don't really like the background at all, also I don't like how it's asymmetrical[/QUOTE]

We all have our personal opinions about things. I'm personally very happy with the background, I wanted it to illustrate some things that I'm dedicated to. I am happy for your feedback, but I can't satisfy everyone because we all have different opinions. Maybe you could append your feedback and tell me why you are dissatisfied with the background?

[B]Anyway, here's the final design of it atleast, for those of you who want to check the source:[/B] [url]http://svenskunganka.com/[/url]

[superbird]

[QUOTE=Svenskunganka;44620050]Definitely looks better with a 20px bottom margin for the smaller screens. Thanks for the input!

Moofy suggested aswell that I should go with a lighter background, so I'll play around with different backgrounds and see if I can get something together that blends along better.

[editline]23rd April 2014[/editline]

Found a brighter background pattern, how does it look? I don't really have an eye for art. Also removed the rotated background "code" and repositioned it.
[t]http://puu.sh/8jPpC.png[/t][/QUOTE]
I was more along the lines of suggesting you re-envision the background altogether.

[BeatAlex]

Looks better, it bugs me though that the syntax highlighting is different to the background image.

For example, const ENGINE has red then blue in the background, but blue then red in the syntax highlighter.

[Spero78]

What does that background look like at a smaller resolution?

[Rayz]

Well.. Here you go. Old version though. :/
Anime streaming site.

[IMG]http://puu.sh/2M19U[/IMG]

[shodan]

Make it look less like bootstrap. Something simple like removing gradients and rounded corners in form elements can do wonders.

[:awesome:]

[QUOTE=Svenskunganka;44620050]
Found a brighter background pattern, how does it look? I don't really have an eye for art. Also removed the rotated background "code" and repositioned it.
[t]http://puu.sh/8jPpC.png[/t][/QUOTE]

Using a copyrighted character you didn't make as your logo probably isn't the best idea