Beginning Front-end

#1

This is my attempt at (the front-end part) of a website after looking over Bootstrap(I’m new) today. This is all I plan to get done for a little while, because my JS knowledge on a scale of 1 to 10 is a 0. And a website without functionality isn’t worth building for any business, as I plan to do for volunteer work, as I am a senior in High School to add to my portfolio.

Yes, I am using a free host and domain currently, as I plan to use until I get really motivated into doing this type of stuff.
This website is not completed, just the building blocks have been set on most tabs. 3/5
I plan to learn some functionality with JS before pushing on this too hard.

All I am asking for this is a few pointers from knowledgeable members, Thanks.

#2

It’s a good start.

<div class="jumbotron"> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> </div>
This doesn’t make any sense, but I understand that it may work for you, heh.

And that blue of a background can be offputting, but really a great start for someone who just started. I won’t cloud your mind with the bullshit, just keep practicing and looking at examples.

#3

[quote=“Pwnd, post:2, topic:555041”]It’s a good start.

<div class="jumbotron"> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> </div>
This doesn’t make any sense, but I understand that it may work for you, heh.

And that blue of a background can be offputting, but really a great start for someone who just started. I won’t cloud your mind with the bullshit, just keep practicing and looking at examples.[/quote]

I appreciate your time and constructive criticism. I’ll be honest, this “responsive website” bullshit is a pain in the ass. I’m more of a guy who does what seems to work, whether it’s “perfect” or not

ex:

<div class="jumbotron"> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> </div>

The image I have in the jumbotron scales differently on each device, and I don’t want to set exact measurements or it’ll mess up display on a different device. Therefore, this is how I got the image to look “OK” on desktop, and pretty well on devices.

Any help with this would be appreciated. If you all have time, I update this frequently as I have been working on it quite a bit.

edit: This website is (somewhat) responsive now. I have added a dropdown menu (lol) and have the contact page working with js and a small amount of php. The front page buttons send you to the other tabs, just basic simple stuff currently. I plan to add a carousel to the jumbotron with pictures eventually.

#4

Instead of making the image a background, I’d make it an actual img tag within your jumbotron, with class ‘img-responsive’ and see how that works.

Or this

#5

[quote=“Pwnd, post:4, topic:555041”]Instead of making the image a background, I’d make it an actual img tag within your jumbotron, with class ‘img-responsive’ and see how that works.

Or this[/quote]

I’ve tried both already. When I place an the img within the jumbotron the image gets full size, in which case makes the jumbrotron MUCH larger. And I found it’s not just a simple width or height element that must be changed for that to be okay. I have not found the way to get the image to resize to fit the jumbotron.

(I already have the stackoverflow’s method on the page. The background: cover;, just not as an img tag. Which I did try, and it didn’t fix it. It placed the image inside the jumbotron but cut off a lot of it and there’s no way I could move the image where I wanted it inside.

So far, this might be the very incorrect way of doing so. This is, sad enough to admit, working better than the correct methods I have tried so far.

<div class="jumbotron">
                <h1> </h1><br/>
                <h1> </h1><br/>
                <h1> </h1><br/>
                <h1> </h1><br/>
                <h1> </h1><br/>
            </div>

= key to success

#6

[quote=“Adobe, post:3, topic:555041”][quote author=Pwnd link=topic=673963.msg4506051#msg4506051 date=1458808851]
It’s a good start.

<div class="jumbotron"> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> </div>
This doesn’t make any sense, but I understand that it may work for you, heh.

And that blue of a background can be offputting, but really a great start for someone who just started. I won’t cloud your mind with the bullshit, just keep practicing and looking at examples.
[/quote]

I appreciate your time and constructive criticism. I’ll be honest, this “responsive website” bullshit is a pain in the ass. I’m more of a guy who does what seems to work, whether it’s “perfect” or not

ex:

<div class="jumbotron"> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> <h1> </h1><br/> </div>

The image I have in the jumbotron scales differently on each device, and I don’t want to set exact measurements or it’ll mess up display on a different device. Therefore, this is how I got the image to look “OK” on desktop, and pretty well on devices.[/quote]

This is why you use percentages which are relative to the viewport.

#7

I also tried percentages, but what would be wise to add them to?
The div class the jumbotron was inside of? The jumbotron itself? the image itself? all of them?

I am currently using this code, and seems to be the one way I can keep the image inside of the jumbotron somewhat where I need it. But to make the jumbotron bigger, to show more of the image, this is where the h1 and br’s come from.

.jumbotron {
    position: relative;
    background: #000 url("jahlogo.jpg") center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

with the silly code of

<h1> </h1><br/>
<h1> </h1><br/>
<h1> </h1><br/>
<h1> </h1><br/>
<h1> </h1><br/>

: http://prntscr.com/ajuyck

without it:

(decreased browser size to show how it would display on mobile devices.

#8

I got it to look pretty good. If you’re placing an image on the page that isn’t actually meant to be background you should be using an img element instead of a div with a background. The img will adjust its dimensions to the size of the image (I would set the width and height to 100% on the image for it to fit within the parent).

#9

I’ll try that later, thanks again justaguy.

I have a question I’d like answered. I’m really dedicated to learning web development, as this is my only my first attempt.

I need to know which languages I must learn, what I need to know more than others, if I need to use a framework like bootstrap here or something different. I need to know from ground up what to learn. Please!

#10

[quote=“Adobe, post:9, topic:555041”]I’ll try that later, thanks again justaguy.

I have a question I’d like answered. I’m really dedicated to learning web development, as this is my only my first attempt.

I need to know which languages I must learn, what I need to know more than others, if I need to use a framework like bootstrap here or something different. I need to know from ground up what to learn. Please![/quote]

Assuming when you say web development you mean both front-end and back-end:

[ul][li]Languages: Javascript (especially ES6; Node, which isn’t a language, but get to know how it works and that it’s a run-time environment), Ruby (unfortunately necessary for Rails), Python, SASS/LESS, CoffeeScript.[/li]
[li]Frameworks: Rails (personally I hate Rails but startups seem to use it alot), Django, React, Backbone, Angular (maybe… its popularity has stagnated), Bootstrap (but don’t over do it).[/li][/ul]

Some people may agree or disagree with some, and I’m probably missing some things but that’s the gist of it. You don’t need to know them all, but you should atleast specialize in one set (ie. JS + React) for starters.

#11

Looks like a good start, does not look like you’re using bootstrap properly though :stuck_out_tongue:

As for the above; html, css and javascript is a must when it comes to web design. I’d also advise to learn php because it is actually a really good way for beginners to dive into backend web development if you really want to. *To those php haters, we all know what’s going through ur head.

There isn’t really a right or wrong when it comes to choosing between well established frameworks, so do whatever you fancy.

#12

Thanks again to everyone. Very detailed replies which I appreciate.

Web development I prefer to just learn front end, but I’m not sure. Say it was only front end, I’d need to know the obvious: html & css. But then what other framework would you suggest for someone only wanting to do front end?

#13

[quote=“Adobe, post:12, topic:555041”]Thanks again to everyone. Very detailed replies which I appreciate.

Web development I prefer to just learn front end, but I’m not sure. Say it was only front end, I’d need to know the obvious: html & css. But then what other framework would you suggest for someone only wanting to do front end?[/quote]

I listed some front-end frameworks above.

#14

[quote=“justaguy, post:13, topic:555041”][quote author=Adobe link=topic=673963.msg4506144#msg4506144 date=1458944660]
Thanks again to everyone. Very detailed replies which I appreciate.

Web development I prefer to just learn front end, but I’m not sure. Say it was only front end, I’d need to know the obvious: html & css. But then what other framework would you suggest for someone only wanting to do front end?
[/quote]

I listed some front-end frameworks above.[/quote]

In order to achieve that “good-look” you had on my website with the image, did you happen to do anything somewhat like this?

<picture>
 <source media="(min-width: 1024px)" »
 srcset="fullsize.jpg">
 <source media="(min-width: 700px)" »
 srcset="midsize.jpg">
 <img src="crop.jpg" alt="My image">
</picture>
#15

[quote=“Adobe, post:14, topic:555041”][quote author=justaguy link=topic=673963.msg4506145#msg4506145 date=1458946009]

I listed some front-end frameworks above.
[/quote]

In order to achieve that “good-look” you had on my website with the image, did you happen to do anything somewhat like this?

[code]

My image [/code][/quote]

All I needed was a regular img element and some CSS.

#16

Yes there is, there are several advantages to using different frameworks depending on application size and functionality.

As to the PHP comment, it’s good to understand it and be able to read it but don’t actually get into the habit of using it too much IF you do look to move into actual website development and not just design.

As you’ve requested information on how to start with the design aspects of a website, people have already mentioned the core three which were HTML, CSS and JS, remember not to use un-official documentation sites as they’ll often point you in the way of deprecated code. Once you lock down the basics, looking at proper use of HTML 5 & CSS 3 would be your next point in my opinion, this will allow you a lot more freedom to play with a more modern design.

One of my biggest tips is to ALWAYS stay up to date with best practices. I wrote this guide: https://www.moparisthebest.com/smf/index.php/topic,617112.0.html over 3 years ago now. Some of the tutorials I also wrote and linked at the bottom of it are out-dated now so generally stay away from those but most of the content in that topic still applies today (I’d focus a bit more on responsive design and mobile support but that’s about it). That shows the value of keeping up to date with latest aspects of website development, what most people are using as the “norm” now I was using 3 years ago.

If you need anything else, my inbox is generally checked every couple days.

#17

[quote=“Ruby, post:16, topic:555041”][quote author=my-swagger link=topic=673963.msg4506141#msg4506141 date=1458943529]
There isn’t really a right or wrong when it comes to choosing between well established frameworks, so do whatever you fancy.
[/quote]

Yes there is, there are several advantages to using different frameworks depending on application size and functionality.

As to the PHP comment, it’s good to understand it and be able to read it but don’t actually get into the habit of using it too much IF you do look to move into actual website development and not just design.[/quote]
I don’t really agree. With all the frameworks listed on this thread, there’s nothing you can do in rails that you can’t do in node or angular. The only difference is the approach you take to creating your application. Frameworks only give you additional resources. I also don’t agree with comparing frameworks written in different languages. I’m sure a using a certain programming language will make doing a certain task a little easier then another might. I would really just go for whatever you feel most comfortable with.

In regards to php I’m sure you’ve all heard of laravel.

#18

[quote=“my-swagger, post:17, topic:555041”][quote author=Ruby link=topic=673963.msg4506318#msg4506318 date=1459156326]

Yes there is, there are several advantages to using different frameworks depending on application size and functionality.

As to the PHP comment, it’s good to understand it and be able to read it but don’t actually get into the habit of using it too much IF you do look to move into actual website development and not just design.
[/quote]
I don’t really agree. With all the frameworks listed on this thread, there’s nothing you can do in rails that you can’t do in node or angular. The only difference is the approach you take to creating your application. Frameworks only give you additional resources. I also don’t agree with comparing frameworks written in different languages. I’m sure a using a certain programming language will make doing a certain task a little easier then another might. I would really just go for whatever you feel most comfortable with.

In regards to php I’m sure you’ve all heard of laravel.[/quote]

Rails and Sinatra are the two most popular ruby web frameworks, Rails is generally used for any large scale project whereas Sinatra is used for the smaller scale projects, something like the general vote/donation systems RSPS’s use should be written using Sinatra than Rails.

Different frameworks have different abilities to scale and should never be tarred with the same brush under “There isn’t a right one to choose between well established frameworks”, because there certainly is a right tool for the job. Anyone who’s just starting writing their own code should never be lured into the “one size fits all” mentality because that’s not how any good programmer works.

#19

Considering Angular is a strictly front end framework, yes, there are lots of things you can do in Rails that you can’t do in Angular.

#20

Ruby is a framework targeted for most users though.

I’d recommend the Spring framework if that’s the case.