Web Design Tutorial?

Discussion in 'Off Topic' started by Gr4phix, Sep 3, 2012.

  1. Gr4phix

    Gr4phix Ancient
    Senior Member

    Messages:
    1,453
    Likes Received:
    4
    Hey all, I'm taking Web Design for my Junior year, and for our first assignment we have to create an autobiography website.

    It has to have 5 pages, about me, and they have to be school appropriate.

    The coding elements that are required are:

    Create a site folder and name
    Use blank HTML
    Create a navigation bar that links to all the pages
    Create DIV tag containers to hold my elements
    (Should have a header, body, and a footer)
    A folder called "images" for my pictures
    Make sure each page has a title. There should be no "untitled" pages.
    Minimum of 10 photos of my choosing.
    (my own photos, or non-copyrighted ones)
    Minimum of 3 external links

    Required Aesthetics:

    Vivic colors and pictures on every page.
    Background color/image on each page.
    No more than 3 fonts.
    At least one graphic on each page.
    Banner on each page
    Extra Credits: 10% EC for embedding a video.

    Now, I'm not asking for someone to do this for me (hence the name) but a tutorial or two on this would be great!

    PS: The reason why I'm asking you guys is because I'm having surgery soon, and will be out of school for about a month. So, I'm not going to be in class to learn all this stuff. :(
     
  2. SargeantSarcasm

    SargeantSarcasm In Loving Memory
    Senior Member

    Messages:
    7,783
    Likes Received:
    1
    I may get chastised by the actual web designers that frequent this site, but almost everything you just listed can be learned in less than a couple of hours by just reading up on HTML on HTML Tutorial
     
  3. Gr4phix

    Gr4phix Ancient
    Senior Member

    Messages:
    1,453
    Likes Received:
    4
    Cool, thanks Sarge. :D
    I'll start reading up on it now.

    I'm hoping Miraj sees this, since I'm pretty sure he does this kind of stuff.
    Not sure about anyone else, he's just the first person that came to mind...
     
  4. Aschur

    Aschur Wubba lubba dub dub
    Forge Critic Senior Member

    Messages:
    2,833
    Likes Received:
    1,359
    Sounds like what we did in my web design class, unfortunately that was 3 years ago and I can't remember any of it.
     
  5. WWWilliam

    WWWilliam Forerunner

    Messages:
    1,291
    Likes Received:
    0
    I remember telling you about that site ages ago, Glad it actually got used.

    Here's a easy code for extra credit:
    <!DOCTYPE html>
    <html>
    <body>

    <embed
    width="420" height="345"
    src="http://www.youtube.com/v/XGSy3_Czz8k"
    type="application/x-shockwave-flash">
    </embed>

    </body>
    </html>

    I would just use facebook as a template inspiration because it obviously has elegant design so any resemblance is a good thing, Idk if it applies to you but personally think less is more for it me was easy to get carried away with codes trying to show off everything I knew but showing constraint and only using whats necessary makes the site better but also shows you have a better understanding and grip on the situation imo.
     
  6. Gr4phix

    Gr4phix Ancient
    Senior Member

    Messages:
    1,453
    Likes Received:
    4
    I actually used that embed code for another video, haha, thanks though. :p

    I'm actually getting carried away at the moment... I'm trying to create a drop-down nav bar that's honestly not working so well, as well as add some CSS Styling with it, but I'm trying to do so much at once it's not going too well, haha. xD
     
  7. Miraj

    Miraj Ancient
    Senior Member

    Messages:
    1,629
    Likes Received:
    3
    Why would you get chastised? That's an amazing reference.

    +1

    @Graphix:
    I would help you create this site, but I am extremely busy this semester. As far as tutorial goes, it's very hard for me to teach you HTML/CSS by just typing it, it's more of a trial/error thing; anything that requires coding would have to be your own effort, since debugging is the key to it all. You should practice troubleshooting and use your resources to solve any issues you run into.

    Here's a great start that teaches HTML/CSS to get you started:
    http://www.dontfeartheinternet.com/

    If you want to create drop-down navigation, you will also need to learn JavaScript or JQuery, which is a library of JavaScript.
    This is a cool place, kind of like a video game, to learn that:
    http://www.codecademy.com/

    I already knew JavaScript when this came out, so I have personally never used it, but I have heard great reviews about it. I did a few exercises in PHP, but that's about it.

    Use Sarge's link as your reference. I believe they also sell books. If you are looking into doing this long run, not just to pass your class, I recommend you invest in reference books.
     
    #7 Miraj, Sep 5, 2012
    Last edited: Sep 5, 2012
  8. Gr4phix

    Gr4phix Ancient
    Senior Member

    Messages:
    1,453
    Likes Received:
    4
    I actually have a couple starter HTML books that I totally forgot about! Thanks for the heads up ^^

    A couple people have suggested Codecademy, and it actually has HTML (now?) so I've been using that in class because my teacher takes forever to teach.

    I appreciate that you'd help, I totally wasn't expecting that, but I completely understand that you're busy. Thank you, even still, though!

    I saw a few tutorials online that didn't *seem like they* required Java for a drop-down nav menu, but I could be wrong...

    Either way! Thanks for the links everyone! :D
    It's coming along... slowly, but it's coming along! xD
     

Share This Page