Web Dev Questions That Don't Need Their Own Thread v4

[Doritos_Man]

I'm thinking about making a personal website for myself for work, school, etc. I'm trying to decide what I want to use for it, like Rails, Django, Flask, Node.js, static HTML, Wordpress, etc. Any suggestions? I'm not a huge Web Dev guy but I think it might be useful to learn a little.

[Flak]

[QUOTE=Doritos_Man;46351657]I'm thinking about making a personal website for myself for work, school, etc. I'm trying to decide what I want to use for it, like Rails, Django, Flask, Node.js, static HTML, Wordpress, etc. Any suggestions? I'm not a huge Web Dev guy but I think it might be useful to learn a little.[/QUOTE]
What do you want it to do? Do you want a blog, a portfolio, a forum, all of the above?

[Doritos_Man]

[QUOTE=FlakAttack;46351751]What do you want it to do? Do you want a blog, a portfolio, a forum, all of the above?[/QUOTE]

Blog/Portfolio
Just something that I might be able to work on showing off stuff I'm making and have some information about me

[Miljaker]

Does anyone know exactly how browsers implement millimeters? If I make a div the size of an A4 paper (210x297mm) it displays 794x1123px on my desktop. Would a high dpi tablet display the same amount of pixels or does the brower convert it to more pixels?

[editline]29th October 2014[/editline]

Nevermind found it. 25.4mm always displays as 96pixels on screens. Exactly what I was looking for.

[KinderBueno]

Is there anything wrong with using Ajax for user registration?
I mean it's very simple to use and makes registration faster, yet I still don't see many websites using it.

[buhbang]

Whats the point of having ajax registration? There's nothing fast about it.

[KinderBueno]

[QUOTE=jung3o;46371783]Whats the point of having ajax registration? There's nothing fast about it.[/QUOTE]

Well I mean things like error checking, check if user already exists etc.. instead of loading another PHP page and catching the error.

[KmartSqrl]

There's nothing wrong with using AJAX for anything as long as you're making sure you've got passable fallbacks in place and you're not worsening the user experience by doing it.

[Oda]

This is probably a very simple solution to a dumb questions but im stuck... when i was coding in browser i noticed that anytime i change the size of the browser the elements (i.e boxes, words, and images) sorta squish together. like all the boxes will be inside each other etc.

CODE:
CSS_____

body {
  padding-top: 50px;
  background-image: url("resource/gif.gif");
  margin: 0px;
}
h1{
  font-family: BlissfulThinking; font-size: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}
@font-face {
 font-family: BlissfulThinking;
 src: url(resource/blissfulthinking.ttf); }
#Leaderboard {
  background-color: rgba(0,0,0,.6);
  width: 40%;
}
.boxm1{
  background-color: rgba(0,0,0,.8);
  top: 100px;
  left: 375px;
  position: absolute;
	width: 1200px;
	height: 300px;
	border-radius: 10px;
  border: 1px solid #2979D5;
}
.boxm2{
  background-color: rgba(0,0,0,.8);
  top: 445px;
  left: 380px;
  position: absolute;
  width: 600px;
  height: 800px;
  border-radius: 10px;
  border: 1px solid #2979D5;
}
.boxm3{
  background-color: rgba(0,0,0,.8);
  top: 445px;
  right: 320px;
  position: absolute;
  width: 550px;
  height: 800px;
  border-radius: 10px;
  border: 1px solid #2979D5;
}
.boxm4{
  background-color: rgba(0,0,0,.8);
  top: 130%;
  right: 16.5%;
  position: absolute;
  width: 1200px;
  height: 400px;
  border-radius: 10px;
  border: 1px solid #2979D5;
}
.boxm1head{
    text-align: center;
    color: #2979D5;
}
.boxm1head2{
      text-align: center;
      color: #2979D5;
}
.topbox{
  width: 100%;
  height: 2px;
  top:10%;
  background-color: #2979D5;
}
.boxm1image1{
position: absolute;
left: 9%;
top: 45%;
}
.boxm1image2{
position: absolute;
left: 34%;
top: 45%;
}
.boxm1image3{
position: absolute;
left: 59%;
top: 45%;
}
.boxm1image4{
position: absolute;
left: 84%;
top: 45%;
}
.boxm1text{
  position: absolute; 
  left: 7.5%;
  top: 68%;
  color: #2979D5;
}
.boxm1text1{
  position: absolute; 
  left: 32.5%;
  top: 68%;
  color: #2979D5;
}
.boxm1text2{
  position: absolute; 
  left: 56%;
  top: 68%;
  color: #2979D5;
}
.boxm1text3{
  position: absolute; 
  left: 82.5%;
  top: 68%;
  color: #2979D5;
}
.servdetail{
  position: absolute; 
  left: 3%;
  top: 2%;
}
.boxm2img2{
position: absolute;
left: 2%;
top: 15%;
}
.boxm2img1{
position: absolute;
left: 3%;
top: 25%;
}
.boxm2img3{
position: absolute;
right: 2%;
top: 15%;
}
.rules{
  position: absolute; 
  left: 27.5%;
  top: 13%;
  color: #2979D5;
}
.news{
  text-align: center;
  color: #2979D5;
}

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>BleekRP</title>

    <!-- Bootstrap core CSS -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href=" ModernRP.css" rel="stylesheet">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><font color="#2979D5">Bleek</font></a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="ModernRP.html">Modern RP</a></li>
            <li><a href="1940.html">1940 RP</a></li>
            <li><a href="hl2.html">Half-Life RP</a></li>
            <li><a href="minecraft.html">MineCraft</a></li>
            <li><a href="donate.html">Donate</a></li>
            <li><a href="#forums">Forums</a></li>
            <li><a href="#about">About</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
       <div class="topbox">

      </div>
    </div>
    <div class="boxm1">
      <h1 class="boxm1head">Modern RolePlay</h1>
      <h2 class="boxm1head2">Why Play?</h2>
      <p class="boxm1text">Its a community!</p>
      <p class="boxm1text1">Play with friends!</p>
      <p class="boxm1text2">It can get competative!</p>
      <p class="boxm1text3">Its Customizable!</p>
      <img class="boxm1image1" src="resource/browser.png" style= "width:72px;hieght:72px">
      <img class="boxm1image2" src="resource/steam.png" style= "width:72px;hieght:72px">
      <img class="boxm1image3" src="resource/stats.png" style= "width:72px;hieght:72px">
      <img class="boxm1image4" src="resource/messages.png" style= "width:72px;hieght:72px">
    </div>
    <div class="boxm2">
    <a class="servdetail" href="http://www.gametracker.com/server_info/play.auroraen.com:27015/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/play.auroraen.com:27015/b_560_95_1.png" border="0" width="560" height="95" alt=""/></a> 
    <img class="boxm2img1" src="resource/warning.png" style= "width:24px;hieght:24px">
    <img class="boxm2img2" src="resource/warning.png" style= "width:72px;hieght:72px">
    <img class="boxm2img3" src="resource/warning.png" style= "width:72px;hieght:72px">
    <h1 class="rules"> Server Rules</h1>
    <!--remeber to edit this bitch-->
    </div>
    <div class="boxm3">

    </div>
    <div class="boxm4">
    <h1 class="news">Update Logs</h1>
    <h2 class="news1">10/26/14</h2>
    <p class="news2">Website is 50% complete</p>
    </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

[Meller Yeller]

So this question is more from a design than development aspect. Currently I know HTML and CSS fairly well and, if necessary, I know how to implement jquery plugins. Is this enough knowledge to actually have a job as a web designer or ux designer? Or should I branch out on my own to learn javascript and whatever else?

[PortalGod]

do you have to use a templating engine with express to be able to use response.locals? I'd like to avoid using jade or ejs stuff if I don't have to

[Maqtiah]

[QUOTE=Meller Yeller;46381226]So this question is more from a design than development aspect. Currently I know HTML and CSS fairly well and, if necessary, I know how to implement jquery plugins. Is this enough knowledge to actually have a job as a web designer or ux designer? [B]Or should I branch out on my own to learn javascript and whatever else?[/B][/QUOTE]

Yes, you should.

[lope]

Once I fully learn HTML and CSS what should I go onto next? Javascript, PHP, ASP, jQuery, etc...

[PhoebeU]

[QUOTE=lope;46383827]Once I fully learn HTML and CSS what should I go onto next? Javascript, PHP, ASP, jQuery, etc...[/QUOTE]

It's really up to you. I'd suggest to learn jQuery first a bit once you know that decently you might want to try out how vanilla Javascript is and go further from there. For backend it's hard to recommend anything since there are quite a lot of things you can use. I'd suggest PHP, Ruby or Python although PHP is getting a bit out dated in my eyes compared to the other options that are available.

[PortalGod]

[QUOTE=Superkipje;46391268]It's really up to you. I'd suggest to learn jQuery first a bit once you know that decently you might want to try out how vanilla Javascript is and go further from there.[/QUOTE]

very bad idea

learn javascript first, then use jquery if you need to

as far as backend goes, I'm learning node.js/the mean stack and I'm loving it so far

[Cyberuben]

[QUOTE=Superkipje;46391268]It's really up to you. I'd suggest to learn jQuery first a bit once you know that decently you might want to try out how vanilla Javascript is and go further from there. For backend it's hard to recommend anything since there are quite a lot of things you can use. I'd suggest PHP, Ruby or Python although PHP is getting a bit out dated in my eyes compared to the other options that are available.[/QUOTE]

How can you learn jQuery before javascript? jQuery is a javascript library, not a different language...

[CBastard]

[QUOTE=Cyberuben;46395032]How can you learn jQuery before javascript? jQuery is a javascript library, not a different language...[/QUOTE]

There's quite a lot of JavaScript that isn't necessary to know to use JQuery since it's built to make things easier. Things like DOM manipulation, applying styles, animation, AJAX which JQuery helps a lot with mean that someone can get a lot done without ever knowing how to do them in plain JavaScript.

[danjee]

What do you study in school to do web development? Assuming there's no "web dev" major

[Candy Bee]

One of the majors I'm looking at at a polytechnic college I'm transferring to is Software Development with a Web & Mobile focus. That may honestly be your best bet is to look for Comp. Sci. related courses with a focus on web.

[Maqtiah]

[QUOTE=danjee;46397022]What do you study in school to do web development? Assuming there's no "web dev" major[/QUOTE]

Web Development..? Literally my class is all about that, and it's indeed called that. (translated from Danish at least) I wouldn't even say "maybe it's just a thing in Denmark" considering there should be plenty of opportunities in the US.

[wizard`]

[QUOTE=danjee;46397022]What do you study in school to do web development? Assuming there's no "web dev" major[/QUOTE]

In Australia the course is called AIT (Applied Information Technology) and covered web development through to low level software engineering. There was limited exposure to graphics design too but usually you have to do another course like photography or full blown graphics design.

Some curriculum's are very ambiguous about what courses are about. Check your syllabus for references to computing, IT and programming. Always take the highest level course that is available to you in this regard because even that would probably be rather elementary but at least give you a kickstart into something more advanced and open doors to a multitude of extra-curricular programs.

[QUOTE=Moofy;46397348]Web Development..? Literally my class is all about that, and it's indeed called that. (translated from Danish at least) I wouldn't even say "maybe it's just a thing in Denmark" considering there should be plenty of opportunities in the US.[/QUOTE]

Sadly the reality is that it's pretty close to "just being a thing in Denmark". There's only a handful of countries outside of Europe that have a well designed curriculum regarding the computer sciences. Typically there are very little to no opportunities for high school students to study programming as part of their education and the places that do offer this usually don't have the teachers. This is of course changing but mostly at the behest of silicon valley tech giants like Google and Microsoft. Politicians are apparently more interested in school prayer and the teachings of Jesus Christ to care about one of the fastest growing and largest industries in their nations.

/2c

[lope]

We have "Web Design" that consist of basically learning HTML and CSS. Not sure how it is at college level but the uni I want to attend has a course for "interactive technology" which has some web dev (and game dev which I probably won't do). not sure what you learn exactly though.

[buhbang]

you're better off either doing graphics design or computer science.

[KmartSqrl]

[QUOTE=Meller Yeller;46381226]So this question is more from a design than development aspect. Currently I know HTML and CSS fairly well and, if necessary, I know how to implement jquery plugins. Is this enough knowledge to actually have a job as a web designer or ux designer? Or should I branch out on my own to learn javascript and whatever else?[/QUOTE]

Do you know how to design well? That's 100x more important than what languages you know if you want to be a designer.

[ENG.jonny]

Hey guys...
So I'm making this small website, as a starting project to get back into and for more experience.

I've finished the navigation bar, which has this code:

/* Navigation */

div.navwrapper {
  margin: 20px auto;
  width: 350px;
  float: left;
}

p {
  font-family: georgia;
  font-size: 1rem;
  line-height: 25px;
  margin: 24px 0;
  text-align: center;
}

nav.vertical {
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  overflow: hidden;
  text-align: center;
}

  nav.vertical > ul {
    list-style-type: none;
  }

    nav.vertical > ul > li {
      display: block;
    }

      nav.vertical > ul > li > a {
        background-color: rgb(157, 34, 60);
        background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        border-bottom: 1px solid rgba(255,255,255,.1);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
        color: rgb(255,255,255);
        display: block;
        font-size: .85rem;
        font-weight: 500;
        height: 50px;
        letter-spacing: .5rem;
        line-height: 50px;
        text-shadow: 0 1px 1px rgba(0,0,0,.1);
        text-transform: uppercase;
        transition: all .1s ease;
        text-decoration: none;
      }

        nav.vertical > ul > li > a:hover {
         background-color: rgb(114, 51, 98);
         background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); 
         cursor: pointer;
        }
        
          nav.vertical > ul > li > div {
            background-color: rgb(255,255,255);
          }
 
          nav.vertical > ul > li > div > ul {
            list-style-type: none;
          }

            nav.vertical > ul > li > div > ul > li > a {
             background-color: rgb(255,255,255);
             border-bottom: 1px solid rgba(0,0,0,.05);
             color: #333331;
             display: block;
             font-size: 1.1rem;
             padding: 10px 0;
             text-decoration: none;
             transition: all 0.15s linear;
            }

              nav.vertical > ul > li > div > ul > li:hover > a {
                background-color: lightBlue;
                color: rgb(255,255,255);
                padding: 10px 0 10px 50px;
              }

and looks like:
[IMG]http://puu.sh/cEfIV/44d7094db7.png[/IMG]

What I'm struggling with is making a header have the same box where 'HOME' is displayed. The navigation is floating to the left, how I want it, and I wanted the header in the centre of the page above it. I thought if I copied the design of the navigation bar, that would work, but it doesn't.

This is what my header code looks like:

header {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  color: rgb(255,255,255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  height: 50px;
  letter-spacing: .5rem;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0,0,0,.1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}

Can anyone help me please? Might be easier if you add me on Steam or something?

[buhbang]

nav.vertical > ul > li {
    display: block;
}

should be

nav.vertical > ul > li {
    display: inline-block;
}

Those are some weird spacing :v:

[ENG.jonny]

[QUOTE=jung3o;46415545]

nav.vertical > ul > li {
    display: block;
}

should be

nav.vertical > ul > li {
    display: inline-block;
}

Those are some weird spacing :v:[/QUOTE]

That doesn't help what I need help with though...

[buhbang]

[QUOTE=ENG.jonny;46415557]That doesn't help what I need help with though...[/QUOTE]

oh my bad. What does the header look like it would be nice to see it on screenshot? Can you use [url]http://jsfiddle.net/[/url] instead of taking a screenshot?

[ENG.jonny]

[QUOTE=jung3o;46415622]oh my bad. What does the header look like it would be nice to see it on screenshot? Can you use [url]http://jsfiddle.net/[/url] instead of taking a screenshot?[/QUOTE]

Looks like this... [url]http://jsfiddle.net/k2Lskfq9/[/url]

[buhbang]

[QUOTE=ENG.jonny;46415713]Looks like this... [url]http://jsfiddle.net/k2Lskfq9/[/url][/QUOTE]

your style is using the element header and the html in that jsfiddle is using the class header.