How Do You Build Webpages?

methods of site creation

[keyplyr]

- Code by Hand -

When I first started, I coded by hand. I still hand code. I believe you learn by doing. I usually just open an empty file & start typing, sometimes cut'n pasting page structure (templates) from similar page layouts, then at some point save as an HTML file. I occasionally use a simple text editor like Notepad or Editpad, but avoid the tag features. I would have never learned what I now know if I had done it any other way.


- Use a WYSIWYG editor -

A What You See Is What You Get editor is site creation software, some free, some at a price. They typically offer tools to create various size fonts & other markup tags. I've never used any of them, but I've been influenced by sites that have been built with these programs. I'm constantly studying the markups of other sites to learn how *they* did it, then I usually look up the authority page for that language to verify correctness & to learn more. A few popular programs are: Dreamweaver, iWeb, Kompozer, Expression Web & Flux. The downside may be a dependency on the software instead of learning how to code yourself.


- Use a CMS -

Content Management Systems like WordPress, Joomla & Drupal have become very popular for both those new to web publishing & veteran webmasters that prefer a relatively simple way of site creation that can be easily managed with a unified look & feel. The downside may be a limitation or no ability to create functionality not envisioned in the CMS (e.g., layouts, web apps, etc.)

What did you use to build your first pages & how do you do it now, if different?

(Please, no product links)

- - -

[jmccormac]

Intially: Badly.
Currently: Less badly though others would disagree. :)

Initially, back in the 1990s it was using a combination of text editor and then NetObjects Fusion. Have also used FrontPage, CoffeeCup and Dreamweaver.

Most of the webpages I do are for a large website and counting bytes matters. The HTML tends to be very sparse with very little Javascript. There are very few text-heavy pages on the site apart from the blog pages. The site got hit by that moronic Panda kludge, I don't have a very high opinion of the moronic Panda or many of the other Google algorithm kludges as they have damaged the fabric of the web. It is a site with the the history of approximately 530 million domain names and statistical data on approximately 7 million hosters.

I was thinking of launching a few new sites but they will use Wordpress as they are text heavy. The templates make it a lot easier. It is possible to edit or create templates but there is a learning curve as with HTML.

Regards...jmcc

[tangor]

Any way that makes sense. After all, it is one page at a time.

Depends on the content and where it enters the process.

If from a word processor, I actually do search and replace for common line end, headers, etc. with appropriate html tags before it ever hits my web editor, which is a (since we can't name products) a rather commonly used text editor on steroids.

Most of my sites are static, thus the above works quite well and pretty much means I hand code.

Dynamic (database loaded) sites I manage work from templates. Again hand coded.

JS is eschewed. Period. I don't like it. Serverside PERL or PHP if required is OK, strong on PERL which, for me, is clean and lean. Has the side benefit that JS disabled or NoScript will not affect the site.

CMS has little to intrigue me, particularly those that keep it all in common files with copies and revisions and all that hand holding house-cleaning and file size limitations. A few of the popular CMS packages have been exposed with bias behind the scenes and that will keep me at arms length for the future as well, but that's a digression not necessary.

But in the end. One page at a time. :)

[ipco]

When I built my first site in the 90's I used Frontpage, which I think was the only option available at the time in the Multi-national for which I worked.

When I started my own site I used Notepad which I used till about five years ago when I moved to a nice free text editor that allows me to configure it the way I want. I am constantly reconfiguring as I learn new ideas/formats/procedures. Many of the larger editors / IDE's actually took away the ability to really learn the code, which is all I wanted to do.

My early sites were obviously flat files, some still are and need revitalizing badly.

New sites are dynamic using a small CMS system and my own templates and themes. NOT Wordpress, Joomla, Drupal or any of the larger CMS.

I am working towards completely hand-rolling my sites in PHP.

[NickMNS]

I initially started with wyswig builder, an old version of NetObject Fusion, but it was so bad and so obsolete, that it was embarrassing. So I purchased a new builder, that was more up to date but was equally bad. I would build a page and there would always be at least on thing that didn't work as planned. So I would need to try a to debug the horribly bloated code, and since I didn't really know what I was doing, the code bloat would become worse.

I eventually figure out what was wrong, but as I was figuring things out more and more I realized that I spent very little time actually using the stupid wyswig builder and more time in the html file. In fact it became utterly useless. Then I started with responsive designs, and figure out how to do that from scratch. The result was borderline okay. I eventually switched to using Bootstrap and never looked back.

I also created my own CMS from scratch. Initially it was simply an automated page generator, that created the html pages and stored them on the server to be served statically. But now I have created full fledged web-app that allows users to interact with pages and allows me to easily create new content automatically, moderate and generally manage the site.

I create all my pages with Bootstrap, jQuery, HTML5, CSS3. And the CMS/web-app is created with Python. Next step PWA.

So I have the "generate a website" part figured out, now I all I have to do is figure out the "generate traffic" part.

[lucy24]

Hand-rolled from scratch. I have learned about three words of PHP, so there are now shared headers and footers. But everything else is done in a text editor. This means, among other things, that I have to type in “curly quotes” manually (or do a slew of global replaces in OCR), because if I tell the text editor to automate them, I end up with a lot of <tag = “value”> and things don’t work.

In the specific case of ebooks I have a long list of global replaces that I run on the OCR to make it look approximately the way I want--and then an additional set of global replaces applied after proofreading, to change the whole thing from plain text to HTML. The Regular Expression is your very, very good friend.

[not2easy]

My first site was built on the WP of the 90s: GeoCities. That lasted about two months, while I learned html. I did not like the automation because I could not "fix" it, I wanted to understand what I was doing. I had looked at Frontpage about the same time, but never used it because I was learning html at the same time and what I saw in FP confused the heck out of me. I ended up using a text editor to hand code. Later I learned that there were significant differences in text editors. Every error teaches you something.

The only true html editor I used was called Arachnophilia and it made page building easier than manually typing each part of a page. It automated problem solving in that it would point out where I had messed up whether it was an open element tag without a closing tag or punctuation that was wrong. My pages were built on nested tables and percentage widths. It had some truly helpful functions. One thing I still appreciate is that it taught me to use a similar file structure on my desktop as I had on my domain so that it could check for missing resources and verify links. It functioned with html 4.

Today I use BBEdit primarily (OSX) and it does not compare to any other text editor I've used. It gives me such goodies as a GREP multi-file search/replace so I can edit databases without opening the file. That can be an important difference with near GB databases that all contain some extraneous fields. It incorporates css tools and minifies a copy. It has a html viewer that updates in real time as I type. It can run scripts to help me analyze log files. It stores text snippets, encoding in colors, formatting - just everything I could ask for. It is an elegant tool that just makes my life so much easier.

I was clueless about images, then found Irfanview. Many other image editors since then, but its batch processing was such a handy tool that made thumbnail creation simple and built html image slideshows. Very handy for those days. I moved on to PhotoShop but now have migrated to GIMP.

I started using php includes for repetitive elements around 2004. I have clunked together a few snippets of php for dynamic elements but even when they work right, I don't know why. I have taken up learning PHP in my free time (right.) Something I wish I had done years ago.

Today I use some of everything. I have some static html sites, a few WP sites, some integrated with static html sites. One of my sites is static html with a PERL script integrated, I would use more perl tools if they were easier to find. I enjoy the flexibility of perl. When I had a shopping cart it was also perl and worked flawlessly for my business. I have some sites that integrate php scripts for database pages using hand coded templates. A few sites use WP, static html and php/database in various combinations. I dislike the automation and limited user decisions of WP, dislike its reliance on 3rd party plugins to do things anyone should manage themselves. WP does have some plus sides and I help out on a few WP sites where it is 100% WP by their choice. The key to success with any CMS is understanding how it works and learning to make it work as your own system wherever possible.

[mack]

I started off using a WYSIWYG editor, but through time I learned that coding by hand made it easier to really understand just what was going on. Ever since them I have generally hand coded. Then when I began to use php as my scripting language of choice I was able to create a template, then everything before the content was header.php everything after the content was foooter.php. It was just a way that I found worked well for me. It streamlined the entire process. I could create my scripts knowing all i had to do was add my html/css via the header and footer files. It also made it extremely easy to make changes.

I suspect we all have out own way of doing things, and out own creative work-flow, but as long as it works for you, you are doing something right.

Mack.

[keyplyr]

If I was new to web development today, I would study how mobile responsive pages [webmasterworld.com] are built and make mobile my priority.

I would make all pages HTTPS [webmasterworld.com] and spend my time promoting and building a strong Social Media presence. I would not worry about having a Desktop version of my site.

Very soon, the SERP (Search Engine Results Pages) indexing & ranking will be solely on the merits of mobile friendly websites. The Mobile-First Index [webmasterworld.com] has been promised to launch at or near the end of 2017.

After determining the impact of that change in the index, I would decide whether to build a Desktop version of my site or not.

[ipco]

I'm with you on the Social Media presence. Definitely my weak point.

On the decision 'whether to build a Desktop version of my site or not', surely Mobile First responds outward to desktop viewports?

[lucy24]

<topic drift>

surely Mobile First responds outward to desktop viewports?

Responding isn't enough. On a phone or tablet it's appropriate to have text spanning the entire width of your viewport, or a picture taking up the whole screen. On a desktop--especially if the reader is in, blecch, full-screen mode--it makes your text unreadable and the pictures absurdly oversized. So you set a max-width ... and then you're stuck with all that extra horizontal real estate.

If you're thinking purely in SEO terms it may make no difference; if you're thinking of humans ...

:: vague mental association with “Think of the children!” ::
</td>

[ipco]

Hi Lucy, yes you're probably right.
They way I was looking at it was setting min-width and expanding with each media query as and when; adjusting fonts and images where necessary. Content layout re-adjusts horizontally if necessary (display:table; for instance) . Would you really be stuck with all that extra horizontal real estate?

[brotherhood of LAN]

I learnt using Frontpage and use Gedit nowadays. It colour codes stuff which is the main feature that makes things workable for me.

Occasionally I'll edit stuff directly in a browser or use the browser console to see how stuff works. Using bootstrap templates I can be 90% confident whatever HTML I write will render well, but I still need to get more trained to the idea of checking different browser resolutions for data-heavy pages, particularly ones with large tables of data.

I don't really see using a text editor as pure old school, the perk is that there aren't distractions and oodles of options you'd never use or need.

I've built things this way for 5+ years and I'm mindful of whether I'm being a curmudgeon and whether there's new or better ways to do stuff. I was going to recommend a 'LAMP' setup to someone the other day for testing websites, then remembered a lot of the cool kids now use NGINX. In some respects, the way we do things change quick.

For those of us who learnt how to code HTML/CSS/JS before mainstream CMS', it seems like life is a lot easier because you can jump in and tweak code easier. People who've built stuff through several layers of abstraction like WP and plugins must have a hard time applying simple tweaks.

[keyplyr]

@ipco - let's stay on topic, in this thread discussing What did you use to build your first pages & how do you do it now, if different?.

Discussions specific to mobile design should be done in the Mobile Web Design & Development forum. [webmasterworld.com]

[ipco]

@ keyplyr - my apologies

[tangor]

My first pages were a transition from BBS code (1980s) to html and those were all done in plain text editors because that's the way one did it.

Homesite 4, when it came out. automated quite a bit and I would still be using it if I had not had a crash that took out my last working version. (2013) Unfortunately, the product was terminated and there's nothing like it now ... and what is out there is either more than I want/need or not enough. (sigh)

Since then back to a text based editor that understands code syntax (color codes it), which is like Notepad (and free), but on steroids and will handle site wide search and replace (among other things).

Never missed a beat---though I do miss some of the functionality of Homesite like having snippets from a menu instead of having to use a folder of snippets as I use now.

How sites are built are entirely based on the content to be displayed. Where I play for content generation, oddly enough, only requires an ordinary word processor to develop the CONTENT and export to basic HTML which is then fine tuned in the code editor to produce the final result.

The WP side has all kinds of macros for creating semantic HTML structure and the code editor has the other side.

The database sites (mostly ecom) are insert/delete records on a structure built once, skinned for looks and can be changed like underwear, and secured for point of sale, etc. Completely different approach. No creative joy, but the bank account kaching makes up for that. :)

[graeme_p]

My progression was:

1. Static HTML.
2. Static HTML with some JS
3. Custom scripts, culminating a an entire custom CMS written in TCL
4. Wordpress, and other PHP CMSs
5. Django (and other Python) frameworks, which are what I mostly use now.

I have also, as you can see, my focus moved from pure front end to mostly backend. What a website does matters more than what it looks like.

[glitterball]

I started by using Frontpage, but had moved to using Homesite by the late 90s.
My first pages were static HTML, but that became VBscript and ASP.

Later, I moved to Linux (both server and desktop), and developing in PHP (though I still have some Classic ASP sites).
Bluefish became my editor of choice.

Nowadays, I use Wordpress for new sites, though I am often disgusted at the shear size of the pages. In fact, it is a disgrace how big webpages have become - and the vast majority do no more than they did 15 years ago, when they used 10 times less bandwidth.

[graeme_p]

Nowadays, I use Wordpress for new sites, though I am often disgusted at the shear size of the pages. In fact, it is a disgrace how big webpages have become - and the vast majority do no more than they did 15 years ago, when they used 10 times less bandwidth.

That may be something people starting out may want to think about: small pages load faster (so provide a better user experience), and are cheaper for you (less bandwidth, lower server resources). There may be a competitive advantage in efficiency.

The problem is a result of using tools like Wordpress that layer themes and plugins on top of an already complex and heavy base. At the risk of repeating something I have said in a few other threads, use frameworks, not CMSs, and use modern template systems instead of Wordpress themes (you can even get WP plugins that will give you a decent template system).

My comment above failed to discuss tools and platforms: I have rarely used WYSIWIG editors. My first site was developed on Windows and deployed to a shared host who used who used a proprietary Unix. I switched to developing on Linux a long time ago (around 2001 I think) and switched to a shared host who used FreeBSD about the same time. Now most sites run on Linux VPSs (even if it is called cloud hosting) but some customers have dedicated servers.

[piatkow]

My first page was hand built because that was the only option that I had. Without a PC of my own I built the page at work on notepad for somebody else to upload to their hosting account.

I have stuck with hand coding although most JS and PHP has been canibalised from free downloads.

I used Composer for a while to build pages for my photo gallery but now use Juicebox to build a gallery quickly and then put in some tailoring using Notepad.

[EditorialGuy]

I still use Expression Web (now free from Microsoft) for our editorial site, mostly because I'm comfortable with the interface. Like its predecessor, FrontPage, EW lets me focus on content but fiddle with code when I need or want to.

If I were a newbie to the Web and were building a site from scratch, I'd probably use a CMS of some kind, but--in my experience--there are advantages to HTML "flat files" that offset the minor disadvantages if--like us--you're publishing a mom-and-pop information site with mostly evergreen content. Also, switching to a CMS at this late date would involve a lot of drudgery with no obvious payback.

[mhansen]

No formal college training for web building, but I had a managerial retail sales position that required too much travel and got myself a laptop back in the early 90's. It was there, through an AOL dial-up from anywhere account, that I started buying domains ($85/ea per year at the time) and learned to build my own site, before being approached by a local company to help them with their own.

I started with an early html editor, HotDog Pro. From there, I transitioned to Dreamweaver and never looked back until WordPress came along. During my DW days, I became very proficient with VBScript, .asp, etc and eventually php. Of course, Notepad/cPanel File Editor are still my best friends as well.

Nowadays, I work from WordPress for my own company and many client accounts. In fact, the only reason I step away from WordPress is if it just doesn't make sense, which is very rare. WP is a powerful CMS and once you learn how to speed it up, it's just a no-brainer for me.

[keyplyr]

We haven't mentioned AMP pages [ampproject.org] which are different from the standard HTML 5. and utilising the amp-boilerplate style.

AMP gets your pages cached to the Google servers giving faster download time for the user. AMP has been popular for simple pages but can be challenging for larger, more complex pages. With the upcoming implementation of HTTP/2 [webmasterworld.com] making all sites much faster, the allure of AMP pages may diminish (my opinion.)

[Broadway]

I started in 2000 and my sites were all static html hand coded using Window's NotePad. I was using a program named "Search and Replace" to make universal, wide-spread changes to groups of pages. I only quit static websites about 5 years ago.

There's a lot to be said for static html (security, easy maintenance). That was an OK way to live.

Now I use Drupal CMS. I don't think I could have made the change to responsive, adding comment capability, as well as implementing some slideshow features and such, without the crutch of a CMS to use and the modules/addons created for it.

There was also a time when I used the CMS to mine the database to create dynamic features (indexes of current content and such). At this point, I've pretty much faded that kind of stuff out. In an era of page speed is everything, who needs the overhead.

I will say that when I create new pages or heavily edit existing ones (evergreen type content) I do that on my local-host production site (xampp). I utilize a scratch page (a "node" in Drupal) that using a php call pulls the page's html from a text file on my machine. What I'm trying to say is that by calling that file I'm really still just hacking out pages using a text editor (NotePad++). No WYSIWYG editors for me, never. Too slow, too encumbering. I do code better than software.

[tangor]

@Broadway

I like your style. :) "one page at a time"

As the thread title is "how do you..." I think all of us have listed a great number of VIABLE methods. And each have, I believe, acknowledged that some hand coding is required for the best results.

What all have revealed is tools and end result. And that, dear friends, is the key: The End Result.

Is there any one way which is Best? Easiest?

Serious question. (looking for a consensus).

I break the steps down to:

Content creation (various)
Massage for display (strict formatting)
Final presentation (the web)

[Mark_A]

I don't recall what I began with but I quickly got into SoftQuad HotMetalPro which was a wysiwyg editor I liked a lot. Later I started building websites using MS Access databases and combining content and templates offline before uploading completed pages via ftp.

I like working with databases so if I had the time I would probably like to get into php & mysql. At the moment I am responsible for a b2b website but I am not really the webmaster, I am more the marketeer.

[cre8pc]

I wish I could remember what I used at first. I came from a word processing career using WordPerfect and Spellbinder (and others), and in 1995 taught myself HTML in something (can't remember) until Hotdog came out and I used that for years. My mentors were MIVA programmers and hard core dudes who drilled into me to never use WYSIYG, so I didn't, even when I had access to software that would let me cheat. I hated Frontpage but for one employer had to use it and was constantly cleaning up the code. I've dipped into everything that's come along since because as a site auditor I feel I must know the back end. I was pleased to learn that one of my son's college friends is building his own website from scratch so he can know and understand HTML. I think that should be required.

[nomis5]

I started with Geocities then went the Microsoft Front Page / Expressions route because they are cheap.

Certainly with Microsoft Expressions there is no problem with editing the html or creating the whole page with handwritten html - just do it. Microsoft Expressions doesn't stop you and it doesn't touch your code if you set it up not to. Use as much or as little of the automated functions as you want.

Code bloat? None at at all, just the opposite when compared to the common CMS systems.

As for speed, it's as fast as notepad as far as I can see. Typing speed is not restricted but it does buy you that ability to see how the page looks at any time just by pressing the page view button. Half a second later you can see how your hand coded page looks. Press the html button and half a second later your back into html editing mode. Simple.

For image editing I still use Paint Shop Pro which I bought in the mid 90s. It does the job for all the things I want and it's so simple to use.

[henry0]

I did quit for a few years, but I am back in tweaking my own out of WP
I can do it thanks to WebmasterWorld, and php masters such as coopsters and jatar k.
WP is more than OK but one needs to know enough PHP and about MySQL to really release its potentials

[EditorialGuy]

Is there any one way which is Best? Easiest?

I think it's mostly a matter of personal style and preference. I don't enjoy writing or editing online with blogging tools, for example (but I do it when I have to). Other people adore WordPress and think plug-ins are more fun than sex.