Using HTML/RWD, how can I create UI's ? I'm out of my element here as I am have been doing back-end development for about a decade.

6    14 Sep 2015 07:33 by u/404_SLEEP_NOT_FOUND

I would like to pick up webdesign again but it has changed so much, I am not sure where to (re)start.

I am going to be making a UI for an app, but it will be rendered using PhoneGap (as well as just exist as a standard mobile version).

Here's some examples of what the kind of UI/design I would like to be able to achieve:

Where should I start? I come from an era where people were still using tables to layout webpages, and mobile didn't exist yet. I have about 20-40 hours I can apply to learning this. I'm not looking to become an expert (I recall there are a lot of gotchas in this field, and it takes a lot of time to really master it). I just want to be able to create UI's that look similar to the above. I'm sure mine will be more flat/basic though, as I am just making an MVP.

4 comments

1 u/koalakareklub 15 Sep 2015 02:42

Hello, young web developer here. I originally began using just normal CSS, HTML, and some Javascript to build basic responsive sites. If you have some time its easier to learn native than it is to hack a robust package like Bootstrap or get into the in n outs of Angular. Depending on what you know and how fast does determine where to go next.

Think of a website like this: The HTML is the structure of the car, the CSS styles the car, colors, paint, interior, and Javascript is the engine behind the car.

In that sense Javascript can also create the HTML structure, Javascript can style the HTML with CSS. Javascript can control, manipulate and change a site. For me Javascript is very powerful, since its object oriented it can pass, manipulate, and render data easily.

So, to start I would look into understanding CSS3. Theres SCSS/LESS which creates a more robust tool set that can create variables, modules, plugins, for loops, and conditional statements with CSS. Making CSS faster to write, easier to organize, and cleaner code.

I use Javascript to do a lot with a website. From getting data from the backend with Node, Websockets, and MonogoDB. To rendering a full responsive site, and loading in the necessary data from the back. Theres alot to dive into, dont try to do it all yourself, but I do find fiends of mine struggling with entering web dev when they try to alter frameworks from the start like Bootstrap. Theres just a lot going on in there, and if you don't know what to look for it can become overwhelming.

I'd suggest to get up and running, download MAMP (creates a local apache server on your computer), get Sublime Text or I use Webstorm by Jetbrains, and get a source control like SourceTree hooked up to BitBucket or what not. If you have any questions just PM Im down to help!

Also for creating a responsive site theres a couple ways to do it. Theres break points using media screens in CSS, Javascript can get the screen width or div tag width, and you can alter the code that way. Also percentages for div tags' not the best but also another route.

Check these out for ideas, inspiration, and tutorials: http://tympanus.net/codrops/ http://codepen.io/

0 u/shirtlords 14 Sep 2015 12:47

Lots of bigname brand sites still use tables. They just use them in harmony with all the new stuff.

There are template sites like say, styleshout, that are great starting points because they throw everything buzzword-compliant and an extra buzzword-compliant kitchen sink in.

0 u/dracostheblack 14 Sep 2015 16:53

There are tons of frameworks out there. Ionic is angular and cordova. Or use angular cordova and zurb, or bootstrap. Tons of good choices.

0 u/0x7a69 15 Sep 2015 14:05

Old timer here, you want W3schools.com and for the tricky stuff wwww.quirksmode.com. Most JavaScript tool kits are pretentious and try to do everything. Kits that specialize on things are usually quite good, however I would not recommend using either to start learning.