Web Development Basics Question?

cpuxtech · November 26, 2013

Ok so I have been learning Java for Android Development but have recently been interested in Web Development as it seems like an extremely thriving area with applicable uses.

I have gathered some resources on the main web dev languages, but many examples show horrible aesthetics with crappy designs...

For instance, a login box will often look like this:

So this may be functional , but is extremely unappealing and I just want to make sure that if I want to learn web dev stuff, I am not going to have useless knowledge. Like for instance, how does Google get ahold of this :

Obviously that is much better looking, but is this through the work of custom themes and presets/layouts, or will an understanding of web development languages give you the ability to make something as beautiful as a Google product?

Thanks!

bmxtricky5 · November 26, 2013

i don't know much about web dev i just started learning my self but i think i may be able to help.

What you are showing there is just some code in a html doc if you want to make things like Google does you will need to learn css. For instance:

say i wanted to make text blue in a paragraph through css.

<html><head> <link href="style.css" rel="stylesheet" type="text/css"></head><body><p id="paragraph">This is text</p></body></html>

Then the css would look like to make the text blue:

#paragraph{     color: blue;}

If you really want to learn web design watch "thenewboston" on youtube his web design tutorials are great thats where im learning.

I know i didnt show how google does that but i hope in answered your question if you need more help just ask

and if i got anything wrong feel free to correct me

adelhied · November 26, 2013

learn about CSS that will answer all your question in design and layout. in terms of animation learn javascript and jquerry, it will give you basic yet powerful design for your websites.

currently studying jquery now

wing2k5 · November 26, 2013

Maybe I can provide some insight into this. It may not give you a straight answer, but hopefully it will lead you in the right direction. As background, I have been working as a web developer for 4 years now.

As @bmxtricky5 and @adelhied pointed out, CSS (a.k.a. cascading style sheets) is what dictates the colors and layout on a website. HTML is what structures a web page, but CSS is what "styles" the individual elements on a web page (i.e. textboxes, buttons, images, etc.) to makes things look nice, and sometimes, colorful.

To create CSS themes, like what Google uses, takes a long time and a lot of trial and error. I don't recommend creating your own from scratch, as there are groups out on the interweb that do provide CSS themes for free. I'll suggest two here that I usually use and are relatively easy to understand.

Suggestion 1: Foundation by Zurb

Suggestion 2: Bootstrap by Mark Otto and Jacob Thornton

The added bonus with both suggestions above is that they both provide CSS styling that also works on mobile devices. Done correctly, you could use those CSS themes to create a website that is viewable on PCs, tablets, and smartphones on MOST browsers.

Hope this helps.

laxer · November 26, 2013

Another view for you.

I've done webdesign for years. (10+ although only 6 or so I would consider actual experience)

In recent years I have been too busy with my College CS courses to keep up with new web technology mainly CSS3 and HTML5 but, basic coding practices apply to those and everything older.

When first developing the biggest thing to get done is basic functionality. Therefore the first screenshot you provided will be more than enough for the first half if not more of development.

Ideally, these HTML forms are going to be read in by some backend language(PHP/ASP/etc). The backend in most of the programming teams I've been in is the first thing you develop.

Thus, until the backend is developed and tested a basic form like your first screenshot will be perfect.

From there, or if you are just a front end developer you move onto the client side design more so: everything the end user will see.

I am not sure exactly how google created that form but, I would imagine it is something like this:

There is something preexisting that contained your email(likely a session or a cookie that expired) from this email they can do a database lookup and get your name/picture for a more customized form.

The html form they have there is pretty basic, a password field and a stylized submit button.

As others have said above, all client sided design is HTML/CSS/JS/JQuery/Flash/C#/etc.

In general, I will avoid flash and only use C# if I have to. The majority of the frontend work I do is in HTML/CSS/JS/J-query.

If you are a beginer I would say it is acceptable to piggy back on existing code like @wing2k5 suggested. However, once you are experienced you should not have any code that isn't used. Especially in the web world those extra bytes add up quickly to your bandwidth consumption.

I don't know what experience you have but, I would start here:

http://www.w3schools.com/

Get a basic page built up then post it online for feedback.

If you need a place to host your files, you can't argue with free basic webhosting: http://www.000webhost.com/

That's about all I got for now, hopefully I didn't confuse you too much

Gofer01 · November 29, 2013

It's all CSS. Use firefox go to a web page and then turn off css. In fact go to this web page with Firefox and then turn off CSS. No matter what language you use in a web application. The web server renders the app into html or JavaScript. and uses CSS for the colors, fonts, sizes and position of elements(content) within a web page

Google is using 2 text box elements, 1 button element 1 image element and most likely several p and or div elements. The looks come from CSS