nguyenhce

Thank you so much, do you know tutorial resources about mobile app design? I search on Tutplus but they have not much tutorial like 1stwebdesigner.com

@Jakdothtml: well, I do not know what is difference about native apps and applications ? can you tell me that. I just want to be a UI app designer, no coding, no html

Hi guys, I made this topic just want to ask you about mobile screen size. I'm learning app design in mobile and I want to know screen size of cell phones like Galaxy S5, iPhone 5S...etc. Where I can find it? please tell me if you know tutorial for mobile design resources. Thank you so much

I know that's hurt but you should listen to your client because they pay you to help them, I know many clients have bad ideas and don't want accept your design that you think it's better than their idea. But that is business, what do you need to do is explain your idea what you think is good for them, and if they still dont want it, just do what they want. You just already tried to educated them and that's your responsibility.

Thank you for your advice, but I think rbrtsmith and William were right, I think I should design it just like regular web layout and leave HTML/CSS for coders . Well, I know about HTML/CSS but I dont want to code, just know it to help my design better.

Hi guys, I just want to ask you about Wordpress, I'm a web designer ( just design, not coding ) and I see many clients on freelance web post that need to re-design or design new website base on WP. My question is: what is designers need to know when design/ re-design a WP template website? function, plug-in or sth...? And if sth I should know to make my knowledge about WP design is better, please tell me. Thank you so much guys

Hi Jack, I try to use Jsfiddle.net ( including Code Pen ) before but it's not display the website. I'll try to up on JSfiddle again for you

Thanks Arianna, could the book useful for designer? I see " development " word . I just know HTML/CSS/Jquery

Sorry for that long post above. Please check my jQuery only please. Thanks function scaledown() { $('.work>figure').removeClass('current').addClass('not-current'); $('nav>ul>li').removeClass('current-li'); } function show(category) { scaledown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-current'); $('.' + category).addClass('current'); if (category=="all") { $('nav>ul>li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work> figure').removeClass('not-current'); } } $(document).ready(function() { $('#all').addClass('current-li'); $("nav>ul>li").click(function() { show(this.id); }); $("#fb").click(function() { window.open("https://www.facebook.com/tran.nguyen.7545"); }); $("#linkedIn").click(function() { window.open("http://www.linkedin.com/profile/view?id=97470019&trk=nav_responsive_tab_profile_pic"); }) })

Yup,please post your code in www.jsfiddle.net. Your code is so long in this topic

Hi Wynn, relate with these post above. I try to make the pic boxes scale down when user click on the menu ( i.e: websites ), and I want the animation of .one and .two will not display when boxes scale down but the do not work on jQuery file. Can you please review it and tell me what I am wrong? Thank you This is my HTML: <div id="container"> <div class="avatar"> <figure class="my-pic"> <img src="img/nguyen-2.png" alt="Nguyen Tran"/> </figure> </div><!--End .avatar--> <nav> <ul> <li id="all">ALL</li> <li id="web">WEB</li> <li id="mobile">MOBILE APP</li> <li id="testimonial">TESTIMONIAL</li> <li id="contact">CONTACT</li> </ul> </nav> <section class="work"> <figure class="web"> <a href="#"> <img src="img/web-Raymond.png" alt="web-Raymond" /> <dl> <div class="one"> <dt>Client</dt> <dd>Raymond Brown</dd> </div> <figure class="mobile"> <a href="#"> <img src="img/web-antking.png" alt="web-antking" /> <dl> <div class="one"> <dt>Client</dt> <dd>Antking</dd> </div> <div class="two"> <dt>Role</dt> <dd>Web design concept</dd> </div> </dl> This is my CSS: .work figure { float:left; margin: 20px; width: 200px; height: 200px; background: #9d2e2c; line-height: 33px; -webkit-filter: sepia(0.4); position: relative; padding: 0; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 200px; width: 200px; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 20px; margin: 0; line-height: 2.5; background: rgba(0,0,0,0,; color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; font-family: PT Sans Narrow; font-size: 12px; margin-bottom: -16px; } .work figure dl dd { margin-left: 0; } dl div { padding: 10px; width: 180px; opacity: 0; right: 0; position: absolute; background: rgba(0, 0, 0, 0.5); transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .one { -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } .two { top:100px; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } .work figure:hover { -webkit-filter:grayscale(0.; } figure:hover .one { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } figure:hover .two { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } .current { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .current-li { color: #f8001d; } .not-current { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; } .not-current:hover dl { opacity: 0; } This is my Jquery: function scaledown() { $('.work>figure').removeClass('current').addClass('not-current'); $('nav>ul>li').removeClass('current-li'); } function show(category) { scaledown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-current'); $('.' + category).addClass('current'); if (category=="all") { $('nav>ul>li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work> figure').removeClass('not-current'); } } $(document).ready(function() { $('#all').addClass('current-li'); $("nav>ul>li").click(function() { show(this.id); });

Hi guys, I coding my website and I met problem with font compatibility on browers, I use Georgia font in my CSS but only Chrome display it, FF and IE8 do not work. Do you know how to make FF and IE work? Thank you This is my HTML Navigation: <body> <div id="container"> <div class="avatar"> <figure class="my-pic"> <img src="img/nguyen-2.png" alt="Nguyen Tran"/> </figure> </div><!--End .avatar--> <nav> <ul> <li id="all">ALL</li> <li id="web">WEB</li> <li id="mobile">MOBILE APP</li> <li id="testimonial">TESTIMONIAL</li> <li id="contact">CONTACT</li> </ul> </nav> And this is my CSS: @import url(http://fonts.googleapis.com/css?family=Georgia); @import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow); ::selection { background: #333; color: #fff; } ::-webkit-Scrollbar { width:9px; } ::-webkit-Scrollbar-track { background: #eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0,0,0,0.1) insert; } ::-webkit-Scrollbar-thumb { background: #999; border: thin solid gray; } body { font-family: 'Georgia', Arial, Sans-serif; background: url(img/br.jpg); padding: 0; margin: 0; border-top: 12px solid #1f9300; } I try using import from Google Font but it's still not working on FF and IE. Btw, which fonts designers use for the website? Thanks

Yeah, I am learning HTML and CSS too, u know, I think many web designers always know HTML/CSS/Jquery, so I think we should know a little about SASS

Hi guys, I am still learning HTML 5 & CSS 3, I saw many TUT wrote about SASS and they said it'll help you alot in front-end coding. I dont know what is SASS and does a designer like me should use it for front-end coding? Thank you

Thanks Smith, by the way, I am searching a book or resources guide how to design mobile apps. Do u know any sources or books? thank you so much

Well, I am using W3schools now and I'd read your link about W3Schools, too bad heh. The problem is I can't affordable to learn from treehouse.com, so can you recommend another sources? well, I mean, free sources

I want to ask you guys about this topic that I try to learn how to design an app for mobile like iOS, Android. But I still do not find out a book that teach me how to design an mobile app. In web design, I'm reading Principle of Web design book and Professional web design volume 1,2 and it's great for new beginner in web design. Does anyone know which books teach how to design phone applications ? Thank you

Great for my bookmarks too

I'm using Sublime text 2 and I love it but why I can't find out preview plugin ( like Run on Notepad++ ) when you need to run your code on browsers to test. Does anyone know any preview ( or Run ) on browsers for Sublime text 2 ?

Oh man, you're right, I need to clean space before hover =.=. Thank you so much Wynn, it's working now

Thanks for that Wynn. But I still do not understand what's happening on my code,it still not work until I deleted the opacity on .work figure dl. But on your JSFiddle link it's working with this opacity is 0. What's wrong with my code Wynn? Although I try to put z-index in the end, it's still not working. .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 20px; margin: 0; line-height: 2.5; background: rgba(0,0,0,0,; color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; }

Hi Wynn, So you want to told me that use transform:translate() making the contents just appear on the picture, not come from left and right ?

Thank you guys so much. Now I learn great exp for my front-end knowledge. I will fix my code. Again, thank you.

Hi guys, I am coding my website and have a little problem about the CSS. You can check this link below: http://jsfiddle.net/nguyenhce/w862m/3/ I want the content inside the tags dt & dl work on the picture and they will come from right & left of the pic when the user move the cursor on the pic but I didnt know why the CSS do not work and I cant see my problem. Please check it on the link above and fix it for me if you have free time ( and please tell me what I am wrong? ) Thank you so much

You work from freelancer.com? Cool, I am finding projects on this site too, but they prefer you know about dev ( php, flash...etc ) than elance.com. But honestly, freelancer.com have many projects with high price ( dammit )