Related
I'm looking for a way to practice CSS and HTML without worrying about whether the backend works or not, or whether or not I have to make the content. I've played around with javascript and node.js a bit, and although I feel like I have a (very) rudimentary understanding of it, I feel as if I should be learning HTML and CSS correctly before messing more with the backend.
Is there a good place to just write CSS and HTML? How did you learn them?
Is there a code editor I should be using (specifically for HTML layouts and CSS layouts) besides Sublime Text?
Well, first of all, you do not worry about how backend works if what you want is to practice CSS and HTML.
Easy steps to play around with HTML and CSS:
create a new file, say index.html. Then, just double click on that file or open with.. your favorite browsers (Chrome, Safari, Opera, Mozilla, or IE).
If you want CSS, you can attach it to the index.html by using <link rel="stylesheet" href="file.css">.
Note : You would only need Node.js when you are dealing with AJAX method like using XMLHttpRequest or $.ajax() method due to CORS (Cross Domain Policy. Other than that, just play around with HTML and CSS with the browser.
My Personal Journey to the Front End Web Development
About me
I am currently working as a full time Front End Web Developer and I self-studied coding for 2 years now (I started this in June 2012) from almost zero knowledge about coding. When I started this, HTML5 and CSS3 were briefly introduced to the public so I learned HTML4 beforehand.
Web is fairly a big topic if we talk about the full stack integration (from the browser to the server to the database). If you are into the front end (HTML/CSS/Javascript), start off with some online tutorials (link below), then try to create your own web product (it could be a website or a web app). Try to improve a bit by a bit, and if you ever get stuck, you can always google search your problem and try to find the solution online (usually StackOverflow).
About Text Editor
I think the best way to learn is to get your hands dirty with minimal code help as possible. This will force you to remember most of the syntax and in turn increase your productivity. I was using Notepad++ but then switched to Sublime Text (Currently Sublime Text 3), and is my favorite text editor up until now. I know my co-worker is using emacs or vim that has a lot of keyboard shortcuts. Personally, Sublime Text is good enough to write HTML and CSS. Link: http://www.sublimetext.com/3
I started learning HTML and CSS from these links:
Paid
http://www.codeschool.com
Free
http://www.codeacademy.com
http://code.org
Hope it helps,
Yanuar Wibisono
Have you looked at w3schools html and CSS tutorials ?
They have a very handy "Try it yourself" button which allows you to try out your own code and see the results very quickly. The tutorials themselves are also well written with plenty of example code.
For HTML and CSS, I would recommend the text editor Microsoft WebMatrix, which is a standard program for Windows. For learning HTML and CSS, check out http://codeacademy.com. It's one of the best places to learn HTML, CSS and a bunch of other coding languages.
A prospective client has a site with pages done in Dreamweaver(tm). I don't have Dreamweaver(tm), never use it, and have in the past have seen some spaghetti (html) code on pages created with it. As a result, I'm wondering: if I create clean sections of semantic html, will Dreamweaver continue to be able to edit it when the client wishes to modify the code that I have created by hand (assuming that I create clean and validating code). This is more of an experience based question than a research based question. I'm sure that Dreamweaver(tm)'s documentation would tell me that it's compatible with clean, semantic html, but it's hard to take that advice from the horse's mouth.
So, based on your experience, is Dreamweaver happy with clean semantic html created externally, or does the visual mode display badly when it's dealing with manually, externally-created semantic html?
Short answer: it is compatible.
It depends on how your clients want to modify the code. Dreamweaver is a good editing tool, and it supports and "understands" semantic (x)html/css. However, if your clients still use html for styling (such as table-based layouts etc.), then proper clean css-styling can be frustrating for them to deal with later. But it is another problem and it has nothing to do with the editor.
Editing HTML in the “code” mode of Dreamweaver leaves it alone. Not sure about the visual mode though.
Well, I know a little HTML, and I'm just interested in playing around with it. I was wondering, though, do people usually write websites from scratch, or do they use templates, or do they use WYSIWYG editors?
To me, it seems like writing from scratch is unnecessary, nowadays, with the editors and templates we have, but maybe I'd be better off to try write something from scratch from learning purposes?
So, if I want to learn HTML better than I do, what is the best way to go about it (I have access to a free server) and how do professional website creators do it? Maybe this is an obvious answer but I'm quite new to it. Thanks!
If from scratch means hand-writing the markup, yes, that's the correct way to do it.
WYSIWYG, fully-bloated editors, are not good alternatives if you are serious about writing a web-site -- as most drag-and-drop-and-run systems out there. They might serve their purposes, but they are not general professional solution.
Hand-written markup (HTML, XHTML) and CSS will always provide better cross-browser compatibility, will be much more optimized and easier to maintain.
I really like Aptana Studio. It is an IDE that enables you to easily write the markup (HTML, XHTML), the formatting (CSS), the client-side code (ie, animations, etc, through JavaScript, and it is really well integrated with common JavaScript frameworks) as well as server-side code in a very professional way (PHP, Ruby, and many others). Oh, and it's free.
Aptana is better than, say, Notepad clones, because it is adapted to Web Development: all the time you have context menus popping up containing hints about compatibility, it displays errors on the markup, etc. It understands your code better than most notepad clones do.
I definitely recommend writing from scratch when you are learning. Using a wysiwyg editor can create a lot of extra code that you have no idea how to deal with when something strange happens and you have to edit the HTML itself. Using something like Notepad++ that supports code highlighting can help a lot.
the secret of html is: not writing it. means: keep it as tiny and semantically as possible and thats where all WYSIWYG editors fail. they let you create 403 nested dom elements whit 2 mouseclicks and if you are a beginner you don't even realize how wrong that is.
I agree with others that learning HTML makes sense. But at the same time, you can use WYSIWYG as a learning tool if necessary. I know that when I first started creating websites, margins and padding always seemed hard to properly format (due in part to inconsistencies across various browsers), and using a visual editor did help me figure out how changing certain values affected the view.
My favorite WYSIWYG editor is probably Nvu just because it is free and less bloated than software like Frontpage. But as others have noted, just practice with HTML. Check out w3schools for a nice intro and reference pieces.
Depends on the budget and software adquisition posibilities (yes, the budget).
Assuming you are talking about research, design, development, scripts, flash and everything you need the best option is Adobe Creative Suite for Web Designers.
There´s no powerfull editor in the world than Dreamweaver and that´s a fact.
You should use Notepad, Notepad++, jEdit and whatever you want but if you want to be productive a serious IDE is the best choice and Adobe win by far.
My opinion!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
For design websites is it better to do it your self by learning HTML/CSS or using web design programs? and why?
I've bounced back and forth between hand coding and Dreamweaver in my history as a web developer.
I originally started out hand coding HTML. This was back in the day when table layout was king, and editing nested tables became a real headache. Couple this with a lack of good tools for visualizing hidden elements and this quickly became a nightmare.
I started using Dreamweaver primarily to speed up my table design workflow. Soon, however, Dreamweaver's templating system became a godsent when I started producing static websites that had no server backend. Being able to update one template and have it propagate across the entire static site cut down my cross-page inconsistencies to nearly zero.
More recently, the whole web 2.0 push has got me, and almost everyone else, back into the hand coding game. I found Dreamweaver wasn't really suitable for the compliant designs, since it was heavily table-centric. I find that most of the HTML I write these days is so straightforward and simple there's little need for an editor. Additionally, all my development is now dynamic once again, so there's no need for a static html generating template system anymore.
Learn for yourself so you can figure out how to do things exactly how you want them to be done, and not have to rely on some sort of program to figure it out for you.
Like anything else in technology, learn the core concepts first, and then use a tool to automate the things you have mastered. By doing so, you will gain a better understanding of how everything works together, and you be able to easily tell when something goes wrong. In this way you will not be bound to any one design tool, and can use whatever works best because you understand the core concepts.
In the words of Richard Feynman,
"That which I cannot create, I do not
understand."
They really serve two purposes, and either one is "better" for it's purpose.
If you learn to do it by hand, you will:
Have more control over exactly what is happening
Have less extraneous code
Be able to maintain your code more easily
If you use a program, you will:
Be able to design visually
Possibly be able to design more quickly
Not have to learn to write CSS by hand
It really depends on what your goal is.
I prefer HTML/CSS by hand because you have the most control over the code. Most design programs will add additional markup that is not required. Even simple WYSIWYG JavaScript editors add extra markup. Although, not a huge difference in file size, the additional markup will add up over time. I would also argue that its easier to maintain code when you know what went into its creation.
Additionally, you'll learn a lot more by taking the time to do it by hand.
Personally, I always edit my HTML/CSS by hand using editors with auto-completion if I can, because that always makes life easier. You should definitely always learn a language as much as you can before you start relying on any program to generate code for you, because most of the time you end up fixing what they gave you.
I tend to do it all by hand.
Doesn't matter what IDE or
server-side language I'm using.
Mark up is markup. Being able to do
it rapidly by hand is valuable.
More often then not, you'll have to
edit some markup manually. By
writing it from scratch, you're
already very familiar with the structure of the markup.
You don't have to spend any time
orienting yourself to the
designer-generated markup.
Although not necessarily a rule,
those who live in the designer I've
found to be less sharp in their
markup and code craftsmanship.
I prefer the by hand approach. That way you know exactly what you're getting. Plus I haven't found an editor that produces HTML/CSS that doesn't need some tweaking especially if you are targeting multiple browsers.
Doing it by hand. Using design programs tends to insert a lot of extra markup you don't really need, which will just complicate your ability to learn.
If you do it by hand you at least know what was inserted where, and why. Plus there are a lot of good websites out there that can walk you through the basics.
IMO you will still learn using web design programs like Dreamweaver, since you have to look at the source and make it fit your exact desires,and its quicker. But doing it by hand will give you the more you write the more you learn type of thing that I agree with 100%
This is a bit vague.
I think that "better" (qualitatively) depends greatly on (1) the competency of the designer, and (2) the sophistication of the application.
Regarding "better" (as in "advisable"): using an application can be a crutch that may fail to save you in all cases. Knowing how to "raw code" html and css is valuable in understanding the limitations of the application and working around those limitations. For that reason alone I suggest knowing how to do it by hand and then keep a sharp eye on the output generated by the application, should you choose to use one.
The absolute best is when you understand what you are doing - you can only do this by coding by hand.
If you don't know HTML or CSS and you use a WYSIWYG editor then how can you be sure everything is right? You can't!
If you have a good understanding of HTML and CSS why would you use a WYSIWYG editor? They make things harder because you can't see the code and extra tags and rules get inserted without you knowing.
Coding by hand is always the best.
Why should you know about xhtml/css ?
Here is some reasons:
Respect semantics meaning
DOM compliant (you know the javascript mess)
Easier to maintain
Search Engine Optimization
You still think it takes a longer time to design/integrate a website ?
Think of use vi, eclipse, quanta, and probably some others...
By hand is the obvious answer, because your website/application will be, well, better. (And also because, if you use JavaScript, it's good to traverse through the DOM of a document you've written yourself, versus a generated one that you have to examine beforehand.) But that's mostly only because the visual tools that exist today really suck (I'm thinking of Dreamweaver). It's definitely possible to create a good visual editing (WYSIWYG) program that actually generates good HTML/CSS/JavaScript, but nothing even close has come up yet, so right now hand-coding is much, much better.
I'm not going to read the responses, so its quite possible someone has already said this, but oh well.
First and foremost, you should always write out your HTML / CSS by hand. The reason for this is that no matter how advanced an HTML editor is, it will never be as good as it could / should be. For "good" html / css, you will actually end up writing your page in a different order than what you see.
For example, a page that is displayed like:
________________
|logo |
|----menu------|
|..............|
|...content....|
|..............|
|....footer....|
----------------
"should" actually flow as follows:
<h1>title of site</h1>
<div id="content">.....</div>
<ul id="menu">....</ul>
<div id="footer">...</div>
which an HTML editor would simply throw a hissy fit if you did it through the nice pretty gui. What may be advantageous is to use Web Expression 2 or Visual Studio for its intellisense. It may help speed up (or maybe slow down) your learning curb.
I really recommend Transcending CSS Design if you are already familiar with HTML / CSS. Otherwise grab a CSS book first even over an HTML book. Styling through CSS will teach you proper semantic HTML (or should,anyway).
I like to code by hand because i can keep my code clean and tidy that way. HTML is not very hard anyway.
If you decide to code by hand you will need an editor that supports syntax highlight, and you will need to validate your code as often as possible to avoid errors (this is good practice anyway). This extension for Firefox will ease your work a lot: users.skynet.be/mgueury/mozilla/
I am building advanced HTML tables with lots of CSS in them, what are the best tools out there for building advanced HTML CSS tables that could include dynamic elements like AJAX driven features (jQuery). I use Dreamweaver and Eclipse but they just touch the surface of having a really great tool set to build with. If you use a great tool let me know about it:-)
Seriously, the closer to the metal you get, the better off you'll be. On the Mac, I use TextMate for doing the HTML and Javascript, and CSSEdit for editing the CSS.
Best tool ever, either Textpad or Notepad++.
Both support syntax highlighting for a variety of languages, tabbed interface, etc.
Stay away from frontpage / dreamweaver.
Also if I may ask, why as you making HTML tables, I am hoping not for a layout?
I'll second Notepad++. How about an Express edition of Visual Studio 200x? You get some great design tools, great syntax highlighting, and it's free.
If you want a good free Mac editor, I go with WordWrangler. But if you want something that will cover EVERYTHING for web design, go with Coda.
For PC, I use notepad++. Not as slick as the ones for Mac, but it does allow for editing straight from the server.
But as far as CSS for tables specifically, you are going to want to do as much of it on your own, as tables are the worst when it comes to accessibility and semantic mark up, and that can only be dealt with by hand. Things like scope, colgroups, etc are never going to be WYSIWYG, you have to fine tune it.
Here's a good starting point:
http://www.noupe.com/css/21-fresh-ajax-css-tables.html