Haydencm Posted May 10, 2012 Share Posted May 10, 2012 Just recently I've been put in charge of making some changes to my company's website. My boss in the main coder, and I've been using wordpress to make some changes with the CSS. I came into it with virtually no applicable knowledge of html or css, but I took some programming classes in highschool and understand the basic principles of what does what. As a side project to help myself understand the backend coding a little more, I was wanting to write up my own simple website in html and css. I've looked at a couple tutorials and watched some videos but whenever I have questions about whats going on, I have nowhere to turn! Attached is a mockup in photoshop I made of an incredible simple blog site. I have three nav links (home, about, contact) and then a few links to previous blog posts. I can manage the CSS properties for the most part, as in, what I need to tweak to get the look I want. But the problem is that I don't know all the code that ties it back to the original HTML. So here's my request. Would anyone like to help me along with this process and kind of just show/explain how it would be done. I know it's a lot to ask, but I would greatly appreciate it. It would essentially be a ton of hand-holding throughout the whole process. Maybe we could communicate through gchat or here, whatever seems best. If anyone is interested just let me know! Thanks! Link to comment Share on other sites More sharing options...
niche Posted May 10, 2012 Share Posted May 10, 2012 (edited) IMO, there's lots of hand holding here, but only on specific questions. That means you need to display the code you're working on (the shorter the better) and tell us about the problem/error message(s). Ironically, the more informed you are, the faster you'll get an answer. Make your questions as specific and complete as possible. EDIT:If you don't have code to display with your question, you probably haven't done enough research unless you're asking about keywords and function names. Edited May 10, 2012 by niche Link to comment Share on other sites More sharing options...
Haydencm Posted May 10, 2012 Author Share Posted May 10, 2012 (edited) Well this was kind of the intention of my post. I was wondering if any member of this board would be willing to really just walk me through the process. To take me on as a project.. haha. I was following this tutorial, http://css-tricks.co...css-conversion/ and I got about 40 minutes into it before my code wasn't working the way his was. I could have continued to follow his tutorial and learned how to make what he was making, but it doesn't help me to know how to do things he isn't showing! He's using text mate and I was using web matrix. Is there a way to post my code in a separate little window so I don't take up three feet of web space? Edited May 10, 2012 by Haydencm Link to comment Share on other sites More sharing options...
niche Posted May 10, 2012 Share Posted May 10, 2012 I had to google web matrix. I just use a text editor (notepad++). I suppose that most use something similar if they want to code. Anyway, there's no substitute for just getting started. As much as I'd like to just use someone else's code (ummodified), I hardy ever get away with that. It's just easier to write it from scratch. Though that doesn't stop me from occassionly trying to use another's code like I did last night. I tried using google "free" code to map locations. It got six hours of my life until I discovered where it was headed and just wrote my own code to dynamically edit their iframe. My point is just start creating by putting your logo at the top of a page. Start that way, but don't forget the DOCTYPE. It's that easy to get started and we'll be there to to help you with your code. Link to comment Share on other sites More sharing options...
Haydencm Posted May 10, 2012 Author Share Posted May 10, 2012 (edited) Attached is a copy of the site as far as I got it. Here's the HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>[re]act</title> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="page-wrap"> <div id="main-content"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra..... /*abbreviated </p> </div> <div id="sidebar"> <ul id="main-nav"> <li><a href="#">05.03.12</a></li> /*I don't know how I would make these reference links to point to the latest blog posts <li><a href="#">04.30.12</a></li> <li><a href="#">04.16.12</a></li> <li><a href="#">03.23.12</a></li> <li><a href="#">02.28.12</a></li> </ul> </div> </div> </body></html> --- Here's the CSS: body { color: #333333; font: 14px Franklin Gothic Book; background: url("../images/background.jpg") repeat scroll 0 0 transparent; top: 0px; right: 0px; bottom: 0px; left: 0px; width:960px; height: 100%; margin: auto;} a { text-decoration:none;} a img { border: 0;} #page-wrap { width: 960px; margin: 175px 0 0 30px;} #main-content { float: left; background: #d6d6d6; padding: 20px; width: 600px;} #sidebar { float: right; width: 200px;} #main-nav { list-style: none;} #main-nav li { font: 12px Franklin Gothic Book;} #main-nav li a { color: #333333;} #main-nav li a:hover { color: white;} --- Obviously I've got a long way to go. I guess this is just gonna be a plain old html site.. as in, I'm not going to use wordpress? Is that bad? Should I ultimately use wordpress? Wordpress has kind of messed up my idea of how sites work. It does a lot of the coding work and I can't really see it to understand what's going on. For example, when it comes to the blog posts, every time I write a new blog I would just have to go into the HTML and add my new post. But if the site was on wordpress, then I could just add a new blog. But thats where I get confused. I know thats where php comes in, but I know even less about php. I would like to add an image for the header, but looking up how to do that, I found a million different answers that didn't make sense and no one was there to explain what the code actually does. Edited May 10, 2012 by Haydencm Link to comment Share on other sites More sharing options...
niche Posted May 10, 2012 Share Posted May 10, 2012 If I don't say this, someone else will. Please post in the html forum and put your code in a code tag (<>).. I'd prefer that you combine your code in a single script, but it's not required. One other suggestion, if your question is just about your anchors, limit your code to the part that's relevant to your question. Here again, not required, but I think your get more help, faster, by not making us wade through code that's not really connected to your question, IMO. Link to comment Share on other sites More sharing options...
Haydencm Posted May 10, 2012 Author Share Posted May 10, 2012 Yeah... I don't think you understood my original post. Okay. I'll try to find resources elsewhere and then come here for the particulars if necessary. If anyone would be willing to help, just send me a pm. Link to comment Share on other sites More sharing options...
thescientist Posted May 10, 2012 Share Posted May 10, 2012 (edited) typically a server side language and a database is used. A server side script would pull the blog posts from the database and use some sort of query string method in order be able to load specific blog posts, usually through some sort of identifier like an ID. it's not terribly complicated, only if you know basic programming and concepts regarding SQL. As Niche said, we generally help people answer their questions, not necessarily help them build their skills from the ground up. If you have questions we will help you obviously, but it sounds like you need to start doing some research and work on your own, and going through the relavant tutorials would definitely be a start. Edited May 10, 2012 by thescientist Link to comment Share on other sites More sharing options...
Guest LH91325 Posted May 11, 2012 Share Posted May 11, 2012 W3Schools is already the best HTML CSS site I've found. Read the tutorials. My best PHP site is PHP.net. My best MySQL tutor is reading GPL code available on the Internet and reverse engineering that. Nobody is going to take you on as a project. There's no upside to that from our point of view, other than taking on a non-paying job. Post your questions individually and it amuses some of us (me) to tackle a single problem and find a workable solution. Nobody is going to take on ALL of your problems. That's why you get paid the big bucks, to take it on yourself. Link to comment Share on other sites More sharing options...
divinedesigns1 Posted May 11, 2012 Share Posted May 11, 2012 W3Schools is already the best HTML CSS site I've found. Read the tutorials. My best PHP site is PHP.net. My best MySQL tutor is reading GPL code available on the Internet and reverse engineering that. Nobody is going to take you on as a project. There's no upside to that from our point of view, other than taking on a non-paying job. Post your questions individually and it amuses some of us (me) to tackle a single problem and find a workable solution. Nobody is going to take on ALL of your problems. That's why you get paid the big bucks, to take it on yourself.is there a link to the gpl code? Link to comment Share on other sites More sharing options...
divinedesigns1 Posted May 11, 2012 Share Posted May 11, 2012 nevermind i found it on the net, but which one would you recommand someone whos now learning php to read first? Link to comment Share on other sites More sharing options...
Guest LH91325 Posted May 11, 2012 Share Posted May 11, 2012 I was referring to any GPL code, not a specific one. I'm afraid I'm a bit too far beyond the novice stage to have any idea what a novice should look at. I was referring to PHP and MySQL code for projects such as WordPress or the SMF and phpBB forum softwares. I suspect they are all a bit too complex for novices. Maybe there are some simpler projects out there. Like on SourceForge or something. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now