1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

New to HTML and CSS...need suggestions and help

Discussion in 'HTML & Website Design' started by amyev, Jun 14, 2016.

  1. #1
    Hello guys,

    I am quite new to this section and will continue in future as i have started to learn website development. So developers can you please help me to choose the platforms to develop the website? Right now using Dreamweaver and Photoshop at my Friends place because don't have my desktop configuration to load it in my system. Some one suggested me to use sublime Tex3, will it be ok?
     
    Solved! View solution.
    amyev, Jun 14, 2016 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #2
    No to dreamweaver

    When @deathshadow turns up he'll explain why it's "no" to photoshop and what you should be using. I've played with pinegrow but as it's bootstrap oriented he's not going to approve of that either ;)

    I use sublime text and it's great. I have netbeans as a backup but sublime does the job.

    I suspect, though, that you are still at the stage of learning about the concepts, how to structure a page, what goes where and how much you can influence with css and how much needs to be the html.

    Looking at existing designs for CMS systems like WordPress can be useful. The output is, generally, bloated but it's important to understand why that's actually a good thing and it takes time to see things from the different perspectives. It's also really important to know that it doesn't have to be and to know how to code it cleanly.

    10 years ago you could be a website designer and focus on html and css but times have changed and you really need to be comfortable with PHP and javascript too. Most of the time you can get away with a cut and paste approach - but, again, if you want to avoid bloat you have to be smarter than that.
     
    sarahk, Jun 14, 2016 IP
  3. amyev

    amyev Well-Known Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    hey sarahk

    first of thanks for your reply you know I was just staring to my post who will reply and that's your first reply I really thankful for you. yes your are right that 10 years ago I could be a website designer and focus on html and css but I was a faculty at time for 3 years and was taking classes for programming c, c++, Java, Java Script, HTML and JQ and as you said times have changed and I really need to be comfortable with PHP and javascript too for coding.

    But I dropped because of some domestic reason and had joined to SEO. Now its the time I could spend time to learn and be a designer. So came to this section.
     
    amyev, Jun 14, 2016 IP
  4. Puntocom81

    Puntocom81 Banned

    Messages:
    80
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    35
    #4
    Puntocom81, Jun 14, 2016 IP
  5. amyev

    amyev Well-Known Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    yes photoshop is for graphics but it need to design also as if i want to convert from PSD to HTML
     
    amyev, Jun 14, 2016 IP
  6. Puntocom81

    Puntocom81 Banned

    Messages:
    80
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    35
    #6
    HTML is not only for graphical user agents so trying to convert PSD to HTML is a no-go. Fixed pixel metrics are good for graphics, the web is more much than that with so many different readers and screen sizes.

    If you post the look of the website you want to create I can try to help you, although I'm a beginner in proper HTML/CSS (specially CSS).
     
    Puntocom81, Jun 14, 2016 IP
  7. amyev

    amyev Well-Known Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #7
    its nice but right now i don't have any PSD. Once I have done a simple one with the help of Dreamweaver and Photoshop Cut down the images and fixed them with CSS and HTML. But now if I want to create another one and I am at home I don't have any simple PAD with me :(
     
    amyev, Jun 14, 2016 IP
  8. Puntocom81

    Puntocom81 Banned

    Messages:
    80
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    35
    #8
    Puntocom81, Jun 14, 2016 IP
  9. HostWinds_Jesse

    HostWinds_Jesse Member

    Messages:
    82
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    45
    #9
    I've always used Gimp for my photo editor and notepadd++ for my text editor. Cheap and just as effective. Another thing to help you along is codeacademy. They have a lot of great tutorials and a good support system for when you get stuck on something.
     
    HostWinds_Jesse, Jun 14, 2016 IP
  10. amyev

    amyev Well-Known Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #10
    codeacademy is good but its an online source
     
    amyev, Jun 14, 2016 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    I have the sense that you aren't listening to most of the good advice you've been given.

    Do not use Dreamweaver or any other wysiwyg so-called editor. Use a text editor; there are a potload of good, free text editors out there for the taking. Sit down and figure out what features you need or want in your editor, then find a few that meet your requirements. Use the one that feels best to you.

    Forget about using Photoshop and like applications for development. They have a single purpose, manipulating images. You do not use them to create layouts. Layouts are derived from the content and relative importances within the page and the size of the viewport. Graphic design is about integrating color schemes, fonts, &c. from the company's stationery, signage, advertising and the company's general branding. It is laid on top of the page.
     
    kk5st, Jun 14, 2016 IP
  12. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #12
    Hello Amyev,

    My name is Chris and I'm also on a Web Development Journey.

    There are a few good books out there that I can recommend:
    HTML5 and CSS3 for dummies
    Build your website with HTML5 and CSS

    If you want an WYSIWYG editor/website builder then there are online websites like wordpress and wix that help to visually created website, but they produce very poor quality code as I'm told.

    If you want to start learning code from scratch, then start buying books and read online resources such as W3Cschools ect...

    I am starting to become familiar with HTML5, but still a bit to go. Everyone learns at their own pace.

    Regards,
    Chris
     
    Web_Dev_Chris, Jun 14, 2016 IP
  13. meet_dilip

    meet_dilip Member

    Messages:
    47
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    48
    #13
    If you want a short cut to web development, I would suggest Twitter Bootstrap framework. According to your requirements, you could manage with just copy-paste skills and yet build an awesome responsive website.
     
    meet_dilip, Jun 14, 2016 IP
  14. amyev

    amyev Well-Known Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #14
    Hey @Web_Dev_Chris

    Ofcourse that's the one I am learning through but I need an offline source where I can practice with codes
     
    amyev, Jun 15, 2016 IP
  15. Puntocom81

    Puntocom81 Banned

    Messages:
    80
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    35
    #15
    Bootcrap promotes bad coding practices, such as mixing content with presentation. It is pure bloat and it misses the point of HTML: device neutral delivery of content.

    http://cutcodedown.com/article/HTML_CSS_and_JS_frameworks
     
    Puntocom81, Jun 15, 2016 IP
  16. meet_dilip

    meet_dilip Member

    Messages:
    47
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    48
    #16
    You have to make a choice. Learn HTML or build a website ? If latter, Bootstrap helps a lot.
     
    meet_dilip, Jun 15, 2016 IP
  17. #17
    If you're a mouth-breathing halfwit who has no ****ing business making websites in the first damned place -- failing to care at ALL about semantics, separation of presentation from content, graceful degradation, accessibility, handshakes or bandwidth...

    There's a reason it's called bootcrap, go find a stick to scrape it off with before you go tracking it all over the Internet's carpets!

    --------------------------------------

    Hey @sarahk, you rang?

    --------------------------------------

    @amyev, a view I've always maintained is that dicking around drawing goofy pictures in a paint program like Photoshop is NOT design! How are you accounting for dynamic font scaling? Elastic or semi-fluid layout? That the height of elements may not be fixed? Simply put, the majority of sleazeball scam artists who run around calling themselves "web designers' when all they do is spank it on a tablet using Photoshop simply don't know enough about HTML, CSS, emissive colourspace, graceful degradation, or accessibility to be designing but two things; and Jack left town!

    Screwing around worrying about appearance first is putting the cart before the horse; an utterly and completely back-assward approach to web development that has NEVER resulted in any site that wasn't a bloated, slow, inaccessible mess that was anything more than a giant middle finger to accessibility and usability. They typically flat out even fail miserably at the entire reason a website should exist in the first place -- delivering content to users! ANYONE telling you to use that approach knows so little about what website are and/or are for, that they need a quadruple helping of sierra tango foxtrot uniform!

    Hence why 99.999999% of all off the shelf templates from the sleazy scam artist whorehouses like ThemeForest and TemplateMonster are little more than snake oil being peddled to nubes and rubes who don't know any better. Mind you, there's good money to be made putting the saddle on people with artsy fartsy bullshit and taking them for a ride, doesn't make it ethical or a means for success in actually building a website!

    While meant for intermediate users who have a rudimentary understanding of HTML grammar and how to apply CSS using selectors, you may find my article on progressive enhancement useful as it is the sane and rational approach to "design" if you care in the slightest about the resulting page ACTUALLY being useful to visitors:

    http://www.cutcodedown.com/article/progressive_enhancement

    Simply put:
    1) Take your content or a reasonable facsimile of future content and put it into a flat text editor in a logical order as if HTML didn't even exist.

    2) Apply your semantic markup to that content to say what things ARE. This is the heading of the entire site (h1), this is a heading indicating the start of a major subsection (h2), this is a heading indicating the start of a minor subsection of the H2 preceding it (h3), this is a grammatical paragraph (p) and not just some random text, this is a list of choices (ul), this is tabular data where the rows and columns have a semantic relationship (table/thead/tbody/caption/tr/th/td), etc, etc, etc... Since this is the semantic step you do NOT apply your semantically neutral containers like DIV and SPAN, and since headings (and horizontal rule) indicate the start of subsections and document import, there's no reason for any of the crap HTML 5 slapped into there for no good reason like the harebrained NAV, SECTION, ARTICLE, HEADER, FOOTER, etc, etc as they serve ZERO legitimate purpose in any current UA. (nor do I expect any future UA to actually leverage them for anything if the history of HTML 4 adoption is any indicator).

    3) Make your first of many layoutS for desktop screen media. THIS is when you add DIV, SPAN, ID's and classes -- but only WHEN needed to group multiple semantic tags to use less classes or once you've expended what you can do with the semantic tags. Your classes and ID's at this point should also say what things are, NOT what they look like -- hence why imbecilic trash like bootcrap's class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0" completely misses the entire reason HTML and CSS exist, much less what they are for. This is also the LAYOUT stage, not the "dick around with colours and presentational images" stage... and the layout at this point should be semi-fluid (having a min and max-width, not a fixed width) and elastic (measurements in EM to scale to user font size preference) -- two things you can't accomplish screwing around in some dumbass paint program!

    4) THEN you make that layout responsive by adding media queries to strip off columns, add columns, and otherwise adjust the content to fit the available screen space. This should be done to the needs of the content as needed by trial and error, and NOT by some predetermined "grid" type asshattery -- since predetermined grids means you're stuck designing content to the layout instead of having a layout that adapts to the content. That's why if someone says "use grids" you kick them in the groin!

    5) Finally do your paintover of desired colours, gradients, shadow effects, and MINIMAL presentational images. Don't go pissing all over the place with bloated slow loading presentational images that add nothing of value and detract from what's important -- the ACTUAL CONTENT.

    ... and while images can be content -- and those that are belong in IMG tags -- remember the first class citizen of the web is TEXT, everything else might as well have leprosy.... and if an image is NOT part of the content, it has ZERO malfing business in your markup.

    ONLY once you have a fully working page, is it then suitable to CONSIDER enhancing it with JavaScript -- keeping in mind the unwritten rule of JS: "IF you can't make a fully working page without JavaScript FIRST, you likely have zero damned business adding scripting to it!"

    At least in terms of delivering your base content. Enhancements like social media not being your own content get the by on that rule.

    In the same way that dicking around in photoshop is utter and complete schmutz, Likewise, 99.99% of tools that even INCLUDE a WYSIWYG are rubbish -- the current king of chazerei being promoted as good practice being the steaming pile of manure known as Dreamweaver. Whilst it's theoretically possible to make a decent website with Dreamweaver if you fully understand HTML and CSS and stick JUST to the code editor, I've never actually seen it done... and ANYTHING it automates for you is ineptly coded rubbish... from the mind-numbingly bird-brained mm_ javascripts, to their rubbish template system that introduces rendering errors from commenting things that shouldn't need comments, to the rubbish in-built FTP that encourages the sloppy practice of 'live editing" it is all drek hocked using chutzpah to nubes and rubes by putz who really have zero business even flapping their gums on the topic...

    Go get a flat text editor -- there are dozens if not hundreds of choices -- sublime is fine if you can live with it's accessibility failings and behaving as if it were some cheap web crapplet (I can't, I prefer flo's notepad+ or editplus). You want to see what your code renders like, that's what a ***ing BROWSER is for -- and you should test in ACTUAL browsers, at LEAST three of the five major engines (webkit, blink, gecko, trident, edge) AS YOU GO, instead of painting yourself into a corner with techniques that only work in one browser, then when complete finding out it doesn't work in others sending you diving for the hacks.

    ... and a BIG advantage of using just a flat text/programmers editor? Once you learn to do it that way you can use ANY tool like a master on ANY platform, instead of being stuck only knowing fat bloated overpriced '48 Ford Super De Luxe fillers like Dreamweaver.
     
    Last edited: Jul 16, 2016
    deathshadow, Jul 16, 2016 IP
    Puntocom81 and sarahk like this.
  18. amyev

    amyev Well-Known Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #18
    @deathshadow... thanks thats what the help i was needed I asked to all those who are in my contact but never discuss and never described like this to me
    the one point which I like most is the advantage of using a flat text programmer editor.
     
    amyev, Jul 16, 2016 IP
  19. Rick Flair

    Rick Flair Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #19
    You need to learn HTML, CSS and JavaScript. Perhaps you can start with some online tutorials and try them out with WYSIWYG editors. That, along with a creative vision, is about it for basic web design. Next, comes the web development part.
    I believe that PHP is not the perfect web development platform. It's true that about 80% of the websites on the internet are built using PHP, but that was almost a decade ago when PHP had no real competition. Although it is slow and inconsistent, unavailability of a better language made it the obvious choice for developers.
    Then came Node.js, a JavaScript-based framework. It requires knowledge of JavaScript only, and is much faster than PHP and reliable. And with a large number of IT giants opting for Node.js over PHP, I guess it's time to switch.
     
    Rick Flair, Jul 20, 2016 IP
  20. MITCH JOSE

    MITCH JOSE Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #20
    html is very easy to learn, most head scratching thing is css and javascript. I always recommend dreamweaver tool for any website beginners. Later on you can slowly start using php, jsp and servlets.
     
    MITCH JOSE, Jul 20, 2016 IP