Reputation: 20617

Writing HTML and CSS

Do all these big websites "like this one" write html and css manually or they use some automated tool to do it, as I am always struggling with it!

Thanks Vishal

Upvotes: 0

Answers (13)

Rafiq

Reputation: 11475

If we want to build good modern websites or web apps you must have to follow rules while writing code for your awesome website. They call them the three pillars of writing good HTML and CSS and it's absolutely crucial that you must know them before you start writing code.

The three pillars are:

Responsive design, 2.Writing maintainable cand scalable code, 3. Carrying about web performance.

First principle: Responsive design which simply means that you build one website that works beautifully across all screen sizes on all devices, and it is absolutely a standard tody, and so there is no way you're going to build a non-responsive website in this 20th century or even later. To make your website you must know about things like fluid layouts, media queries, and other modern responsive design stuff like responsive images, correct units, font sizes, element dimensions and it also includes either desktop-first or a mobile-first strategy.

Second principle: Writing maintainable and scalable code is actually more important for the developer, then for the final user of the website, if you want to build a good website it is still something you need to follow. So, writing maintainable and scalable code means to write code that is clean, easy to understand, that support future growth, above all, it is reusable for you as well as for other developers who might take on your project in the future. if you want to write maintainable and scalable code, you need to care and think about our CSS architecture, which is the way you organize your files, how you name your classes, and how you structure our mark up in HTML

If you are starter in web development don't worry if all these sound weird or complicated to you because you can learn them by yourself, there are many online video tutorial in youtube or blogs that you can read about them. What you need to understand as a beginner is that this stuff is really important if you want to step up your game and become a more professional CSS or front-end web developer in general. Writing maintainable code is something that all professional web developers care about a lot.

Now let's talk about web performance. Making a website or app more performant means to make it faster and to make it smaller in size, so that the user has to download fewer data. There are many things that affect performance and some factors don't have much to do with our code, but some of the things that we can do are to make as less HTTP request as possible, in our HTML document, write as less code as possible of course. Maybe the biggest impact you can have on performance is to actually reduce the use of images because images are usually what makes up by far the biggest part of the size of a website. So you use only images that are really necessary for your website or app, also you can compress them so that you use less bandwidth for the final user. Besides that, you can use a CSS preprocessor

Finally, while you building your project, you must ask yourself is the code you are writing is responsive? and is it maintainable and scalable?

Upvotes: -1

user5965902

Reputation:

Yes, most websites are typed manually. There are many reasons to do this:
1. You have complete control over the code
2. You get a massive workout for your fingers
3. You get more html, css, and javascript practice
4. There's no chance that you forget that the template's background-color is blue instead of red

Upvotes: -1

surender

Reputation: 7

Most of the sites write major part of the html and css manually, we can avoid junk css and we will have the clean html and css as our own. If you write more and more you will be strong enough of html and css coding.

Practice in sublime or notepad ++

Upvotes: -1

mk12

Reputation: 26394

If stack overflow kept static html files of every page, well that would be impossible. Server side languages like ASP.NET or PHP are used to generate the page, using the same template each time. To do that, they get the information from a database, e.g. MySQL, SQLite, XML files, etc. CMSs like Wordpress, Drupal or Joomla are widely used, which keep all the data organized and do all the work of generating the page for you.

Seperating data (e.g. the plain text of your question), the appearance/display (CSS) and the Controller, the in-between part (server-side code - PHP, ASP.NET, etc.), is called MVC, for M odel (data) V iew (display) C ontroller (in-between), and using the MVC architecture is good practice.

Upvotes: 4

Kris C

Reputation: 2848

A bit of both generally. You'll create your CSS manually initially and define rules for HTML generation in your code. But then you don't write the HTML on each new page manually - your engine (CMS or your MVC view or whatever) then generates the HTML automatically based on your rules.

Look at blogging with WordPress for instance. I create my own stylesheets for my own theme, and define the HTML to be used to structure a page. After that I don't touch the HTML / css again, and concentrate on the task in hand, which is blogging, not writing HTML.

Upvotes: 1

Kzqai

Reputation: 23072

I think that you may have been a little vague in your question, and were really asking the age old question of "what-you-see-is-what-you-get editor or hand editing?"

For that, look here:

WYSIWYG editor vs Hand Code

or here:

https://stackoverflow.com/questions/406052/do-most-web-programmers-not-designers-use-wysiwyg-editors-or-hand-code-their

My take: Use a wysiwyg editor to do fast prototyping of the pages, and then when you get something that seems like what you want, simplify the code yourself by hand, to the extent that you can. Then you get the best of both worlds. Alternatively, start with a good base page ( Blueprint css reset, for example, is recommended), and then hand code additions off of that base.

As far as server-side scripting, you're pretty much always going to want to make use of templates, so in the end, the best stuff usually comes down to hand-coding.

Upvotes: 2

Steve Wortham

Reputation: 22230

I can take one look at StackOverflow's HTML & CSS and see they take pride in it. It's very neat and well-structured. Common formatting rules are in an external CSS file to save bandwidth and improve the content/HTML ratio. They most assuredly wrote their template by hand. Of course behind the scenes they're using ASP.NET MVC with a SQL Server database but that's irrelevant. ASP.NET MVC allows full control of your markup and they obviously took full advantage of that.

I haven't created anything quite as big as StackOverflow. But I too will write my HTML & CSS from scratch. Of course, I'm an obsessive optimizer. When hand coding a site like this I push all formatting to my CSS file and keeping my HTML as clean as possible. As a result the HTML of my home page at regexhero.net is about 5.5 KB and I have a 35% content-to-html ratio which is good for SEO.

Now, some of the IDE's out there such as Microsoft Visual Studio or Expression Web do have some handy code hinting (aka Intellisense) to help you out. As you type, it's smart about showing you relevant tags in HTML and selectors in CSS. For those like myself who like to hand code everything, this feature is very nice to have.

But to sum up, hand coding may take a little longer for the developer but it does allow you to better optimize the site. And that can pay its dividends by reducing server bandwidth and improving the user experience.

Upvotes: 7

Rob

Reputation: 48369

The real answer is, it doesn't make a blind bit of difference, although the chances are, quite a lot of "web 2.0" sites do hand-code their HTML. The fact is, it makes no difference because that information doesn't help you. If you're starting out learning how to write them, then you should feel perfectly entitled to use whatever editor or IDE you like to make it easier. Over time, you will feel more confident when it comes to bashing out a bit of HTML.

Upvotes: 0

Alon Gubkin

Reputation: 57129

They're probably writing code manually, because of some reasons:

clean code
those "big websites" should be fast, to avoid a bandwidth waste, and the human's brain can do it better than any software.

Upvotes: 0

Kaleb Brasee

Reputation: 51955

The almost always write it manually. HTML + CSS is usually hard to get exactly right for all major browsers without some manual tweaking.

Upvotes: 0

Robert Greiner

Reputation: 29722

A certain amount of CSS and HTML can be auto-generated, but for the most part, these CSS/HTML for most sites is done manually.

CSS is all about presentation, and it takes a good amount of tweaking to get things looking right across different browsers.

Upvotes: 2

Rishav Rastogi

Reputation: 15492

People use CSS frameworks to make their job easier.

You can try BluePrint which is really nice. and there are WYSWYG editors available like Dreamweaver for you to build the HTML CSS as well.

Upvotes: -1

Stefan Kendall

Reputation: 67832

They write the HTML and CSS manually, although much of "these site" are preprocessed by a server-side language, like ASP.NET.

Upvotes: 0

Writing HTML and CSS

Answers (13)

Related Questions