New to Web Development, Embarking on a Project

Get Started
1

[FONT=Trebuchet MS]How’s it going? First post here so a brief introduction seems appropriate. I’m a 19 year old civil/structural engineering student. My main focus is bridge design, but I am currently studying other related fields. At the current time, I intern at a local engineering firm, attend college, work here and there at the family owned hardware store, and run a custom simulation PC business www.simrigs.com (the site isn’t up yet; right now I am working off word of mouth). In my spare time I enjoy drumming (15 years), RC helicopters, and simulation racing.

As of recent, I have had many website ideas, and just a general need to be able to create my own site. My only website experience was a high school course that taught no more than basic HTML (like 5 years ago now…), and slightly modifying WordPress themes. As of the other day, I decided I would use any spare hours I had each day to learn web languages. This is pretty much where I am at now.

I was recommended to the tutorials and book at http://htmldog.com/, in which I went though in about 10 minutes. I have read through a good chunk of the book in the last day, but a lot of it is just regurgitation or a long done out explanation of what the tutorials explained in a much simpler fashion. It covered the basics, but then kind of just stopped and left me hanging.

Here comes barrage of questions # 1. (Direct questions I will BOLD so that they are easy to find and read.)

-1: What guides do you guys recommend for learning HTML, CSS, JavaScript, and PHP? (May I request the most up to date you have? I would really hate to spend a lot of time learning old obsolete material).

-2: Should I bother with packages such as http://www.99lime.com that are supposed to streamline site creation? I know there are others out there, I haven’t looked into them all that much though.

[B]-3: I read a few articles that suggest leaving Photoshop, or a like piece of software, out of the design process. Is this true? Is it good practice? What these articles recommended was getting the basic HTML content into a page. From there using strictly CSS to style it as far as it can go without Photoshop. From there, if necessary, use Photoshop.

I ask this because I am fairly fluent at Photoshop, and when I have a good idea, I can usually throw a mockup together pretty quickly. [/B]

-4: Right now, I am doing all of my coding/learning with just a text editor. I use Notepad++ on my desktop, and Gedit on my old laptop running a Crunchbox Linux. Should I stick with this style of coding, or are there alternative editors to make my coding more efficient?[/FONT]

[HR][/HR]

[FONT=Trebuchet MS]
Now onto my project that I want to begin on; both for learning purposes, and to become a functional, useful Web site. The site is going to be for league organization for the simulation racing I do. The current options out there are lacking. The few places that are semi organized and up to date charge outrageous amounts per month and provide lackluster service. The sim racing community is a tight community. Because of this, I will be hosting these leagues free of charge to everyone. I have quietly mentioned the general idea here and there and the feedback is great. I have had a couple thousand hits on the domain I put up as a temporary place holder in just a few weeks.

Everything is in place, except for the website. I have sponsors lined up to cover server costs and prizes, servers with all of the content ready to go, and interested community members. Because everything is all ready to go, I want to get to work on this site as quickly as possible, and get it to a usable state as quickly as possible.

-Details-

User friendliness is my #1 key aspect here. I want all of the necessary information in one easy to find spot. I will try to best describe what I have in mind for the initial page users visit.

PAGE 1

When a user goes to the site, they are greeted with a login screen. They will need to fill out:

First & Last Name (Sim racers use real names online)
Address (For prizes and country display. Sim racing is an international recreation)
Email
Where they were referred from.
Any associated forum handles.

For the above, I assume I would need a PHP form and a database setup to store this info?

PAGE 2

Once that data is submitted, they are brought to a single page. No scrolling up, down, left, or right. (Unless under a certain resolution I guess) Here will be where all of the active racing series are listed. I am envisioning a sort of grid layout. There are multiple racing sim titles out, so each title would have its own column of series. To keep it contained to a small non-scrolling area, I thought each series could be listed as just the title on a “horizontal” bar. When this “bar” is hovered over or clicked on, it expands down to show a picture of the car/cars that will be used for that series, plus dates and time of the event.

The “horizontal bars” idea is my thought of a way for it to be modular. Hopefully more new racing series will be added on a regular basis. If that were to happen, the bars would need to scale appropriately to fit the amount of series. I have read a little on the “960 grid” format. Not knowing much of anything yet, I feel that system would actually work in this situation. To start off, I will only be using a single racing sim title. This means I can center it. As we expand though, I would need options to have 2,3,4,5 column layout if need be.

What would you guys recommend for doing the “bars” with a slide out image and info? I have a feeling Javascript and JQuery might be necessary just from looking around. Are there ways of doing this all within HTML and CSS3?

PAGE/PAGES 3

This is where the user goes if they click on the image and info that comes down from under the “bar” system above. On this page there will be a lot of info condensed into a small space. I hopefully want to squeeze a signup button and active racer list for the chosen series (small list or table here?), a small series forum for pre-race chatter (I’m smelling Vanilla Forum here…), series results (another table or list with points and such, race results get exported as a spreadsheet), necessary files for the series (just download links), and maybe if there is room to spare some media.

And the last page that may or may not be made is a “user” page for every member. I am not sure on this one as it seems like it will take a lot more work than the rest of the pages. If I were to do this, I would include driver stats, a small PM system, and a system to show the driver their upcoming races.

Another thing that is going to be added is an email alert system. When a member signs up for a series, they will get an email saying that they signed up. This email will include series info with dates and times and links. And then an email will be sent the day of the race as a reminder.

[HR][/HR]

Information overload. Sorry for all of that. I didn’t even realize how much I was typing. I wrote a little here and there all morning. Anyway, if anyone could suggest where I go from here. I am ready to start but need to figure out where would be the best. If anyone would like to offer any help, that would be appreciated as well. I don’t want it done for me, but I wouldn’t mind some well commented out help. =]

Thanks in advance![/FONT]

2

Welcome to Sitepoint!
This is a great place to learn, sharpen your skills and commune with others who have the same interest in Web Development. You are guaranteed to gain something from your time spent here and are obliged to return something.

As someone who was 19 years old BEFORE the first Rocky movie; Let me say it is admirable that you are anxious to learn and have developed a well-written plea for some guidance. {a few of your links have been edited to comply with our rules}

I am confident you will get a lot of advice as a result of this post. To ensure your tenure here is healthy and happy don’t overlook the Rules for participation.

3

There is a lot available online, but I would recommend getting a good book on each,as that gives you a more solid springboard. SitePoint has some excellent books on all topics.

Should I bother with packages such as http://www.99lime.com that are supposed to streamline site creation? I know there are others out there, I haven’t looked into them all that much though.

It’s best to learn these technologies from the ground up.

I read a few articles that suggest leaving Photoshop, or a like piece of software, out of the design process. Is this true?

It’s a handy tool for creating / preparing images that you may need on your site, so the more you know about it, the better. But don’t think of it as a web design tool. Creating a layout in Ps is kind of misleading, because you are trying to represent a fluid meium in a static one, which is dangerous. And CSS can’t replicate everything in Ps, so it can lead to disappointment.

Right now, I am doing all of my coding/learning with just a text editor. I use Notepad++ on my desktop, and Gedit on my old laptop running a Crunchbox Linux. Should I stick with this style of coding, or are there alternative editors to make my coding more efficient?

Notepad++ is quite good, and that kind of editor is the best thing to stick with. Beware of WYSIWYG editors (where you do things visually instead of with code) as they produce disgusting code.

Try to keep your posts a little shorter and more concise. It’s too much to read! :slight_smile:

4

Intern at a local engineering firm, attend college, work at the hardware store, run a custom simulation PC business, play the drums, fly RC helicopters, simulation racing, …

And now you want to spend your “spare hours” learning a web language? I can only say I hope you manage to find some time for eating and sleeping once in a while.

Seriously though, welcome to the forum, and good luck with your web project.

I’ll let others answer your detailed questions. But to just to pick up on the question of which tools to use. I started out using a WYSIWYG HTML editor (Microsoft FrontPage). This was an adequate tool for creating a quick-and-dirty web page, but did nothing to help me understand what I was doing.

So I decided to try coding HTML by hand, using an ordinary text editor. It took me a while to get up to speed, but it turned out to be an excellent way of learning HTML and CSS, which are the core technologies you will need to master.

I then turned to an HTML-specific editor (Microsoft Visual Web Developer Express), which I still use. I still code by hand, but the editor has several features to speed up the process, such as automatically completing the code and flagging errors. I would recommend this approach.

You mentioned Photoshop. I would think that would be a good tool for a professional designer who needs to create an overall design for showing to a client. But for the likes of you and me, a pencil and a piece of paper would probably be easier. Either way, you wouldn’t want to actually create the site in Photoshop.

I’ll leave it at that, except to add that I admire your energy. I’m sure I wan’t like that at 19.

Mike

5

Thanks for the welcoming everyone. I wish more forums were this friendly… Sorry for the long initial post. I attempted to keep it as organized as possible. I personally hate when people come into a forum and make a bunch of posts that could have been more consolidated.

And now you want to spend your “spare hours” learning a web language? I can only say I hope you manage to find some time for eating and sleeping once in a while.

Haha. I get some time here and there in between classes and weekends. With summer quickly approaching I will have some more time.

There is a lot available online, but I would recommend getting a good book on each,as that gives you a more solid springboard. SitePoint has some excellent books on all topics.

I didn’t even realize that SitePoint had books. I was recommended to check out the forums and came straight here. Good to know. Right now I am looking at the “CSS3 Anthology” book and the “HTML5 & CSS3 for the Real World” book. Are the courses worth looking into as well?

EDIT: Do you guys know why I am not receiving email notifications for this thread? I am subscribed and it is set to “Instant, by Email”.

6

Do you guys know why I am not receiving email notifications for this thread? I am subscribed and it is set to "Instant, by Email

If you changed your default subscription mode after you posted you first message in the thread, then that choice doesn’t count. In other words, the setting you choose only applies to new threads. Apart from that, I can’t suggest anything, but no doubt someone else will help.

Mike

7

^ What Mikl said. But sometimes the system does seem to get locked up a bit, and emails take a while to arrive or don’t arrive at all. Not often, but it does happen. As a backup, you can always check your My SitePoint link to see if there have been replies.

8

Ok. I’m back again. I have been reading html, css, and javascript books and guides non-stop the past few days. I have a question on one specific aspect now. I believe I have seen a few different ways to accomplish this, but I am not sure which way is the easiest/ most correct. I made 3 pictures (in paint on my laptop mind you), to help describe what I’m trying to do.

On this page, I will have “sims”, and within the “sims” I will have “series”. Each sim has its own column. I am only starting out with a single sim, so I will only need a single column. As this grows though, I will need to be able to have up to 4 sims.

One sim

Two sims

Three sims

Now, I have seen quite a few ways of doing this, some which include Javascript arrays. Is there any way you guys would recommend? I just want to get this part correct as it is one of the major aspects of the entire site. Everything is built from this point on so screwing up here I would probably have to go back and redo most of it.

On a good note, I have been working on the small little systems that all go within the site. Things like the “login” page, and the “sliding” content for these columns. I will have something to show here in the next day or two hopefully.

9

Wow, it’s been almost a month now since I responded. I’ve hit a wall in my learning process, and that wall is time. Almost nothing has been accomplished since my last post because of this. I am still intent on learning, but I need to get this project done. Does anyone here know someone who can help me with this, or direct me to the correct place I can inquire? Preferably someone willing to work cheaply, this project is the same as above, which is completely non-profit. Just something for the community.

10

The reason why you have hit a brick wall is because your request is like asking a freshman in college to carry out a senior project. There are just so many prerequisites before you could even consider thinking about how to solve your brief. HTML and CSS are really the least of your worries. The most significant portion would be learning the proper server-side technologies to deliver the functionality your after. That alone could take years – ever heard of a computer science degree.

To top it all off your than talking about useability and deign which is a whole other part of a spectrum – ever heard of a graphic design degree. Not to be the bearer of bad news but what you want to achieve can’t be solved with a posts from strangers. There are just so many different facets that can not be covered without digging into several books.

A great idea is nothing without execution. That is probably why the services that exist which are similar to your idea can charge so much – corner the market. I would recommend finding someone who is as passionate as you are in regards to this niche who is a web developer. Perhaps see if they can help you.

Though once you tell them your “idea” your pretty much obsolete considering you have absolutely no skills worth using. Not to be harsh but what do you really offer anyone that they just can’t cut you out unless there is compensation. Especially someone who is already very familiar with the niche/hobby and also has the proper skills to execute the idea. I mean… if they thought it was a good idea they might as well just go build it by themselves without you because that is what they would be doing anyway…

Maybe you can try experimenting with some content management systems like wordpress, drupal or joomla to see if they might fir the bill with little programming and/or modification. Though I doubt it.

11

I agree. Not to say that you’re bad at coding, but it is quite a task to take on - all of the code you need, etc. take a bit of time to learn. Not impossible, but I’d definitely say challenging. If you need the project done, you can use various freelance sites such as eLance to outsource the work in order to finish it up.

~TehYoyo