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

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?

 

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.

 

Photoshop is for graphics, not for web development.

Do yourself a favor and read this: http://cutcodedown.com/article/tools_of_the_trade

 

yes photoshop is for graphics but it need to design also as if i want to convert from PSD to HTML

 

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).

 

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

 

You should start writing the content, then adapting the layout to the content.

http://cutcodedown.com/article/progressive_enhancement

 

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.

 

codeacademy is good but its an online source

 

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.

 

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

 

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.

 

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

 

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

 

You have to make a choice. Learn HTML or build a website ? If latter, Bootstrap helps a lot.

 

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.

 

@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.

 

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.

 

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.