Web Design Advice For Complete Beginner

Hi,
I am new to SitePoint but I am loving what I see!

I have been in software development for about 30 years, Assembly language, C, C++, C#, SQL, but I have never ventured into any form of web design.
I want to create a fairly simple site but it must have the capability of being expanded at a later date to include a database. In the past I have looked at Dreamweaver and got totally confused! It seems to be massively over the top (not to mention the price) for anything I want to do. I also checked out Kompozer but didn’t get on with that either.
So now I have been looking for a WYSIWYG designer and although they can produce a beautiful site in a short space of time it appears they are a real nighmare to hand-code after creation (not even possible with some).
So I guess what I am looking for is some kind of editor which will allow me to move stuff around on the screen to get the layout right and which will generate reasonably good HTML which I can later hand-edit when required. I have got a Wordpress site up but can’t understand the purpose of the hundreds of files it has generated!
I am also faitry sure that I need to learn PHP to operate in conjunction with mySQL as these appear to be pretty standard. I’ll be OK with the SQL side of things but PHP will be new to me.
I am approaching retirement and my brain doesn’t take kindly to learning new stuff, so I’m looking for advice which will prevent me going in time-wasting directions.
I have Microsoft Expression Web v4 here (it was free) and I’m happy to use that if that will fit the bill, just not tested it yet.

Sorry for the long post and hoping you can point me in the right direction.
Cheers

The first thing you should know is that html has nothing to do with layout in this day and age. html is purely for content. Layout and styling is handled by css (something else to learn).

Hi @SamA74,

Thanks, yes I understand that and it is something else to learn!
I’m just looking for the best way to get started and what sort of editor would help me with layout. I would like to be able to design layout using something graphical instead of editing numbers in a CSS or HTML document and calculating pixels or whatever.

Unfortunately wysiwyg is more commonly called wysiwtf (:)) because in these days of responsive design layouts are no longer fixed width and immovable objects. Designs must be fluid and must adapt to their device so there is no one layout to build as such but a fluid adapting layout based on the available space.

Google “Responsive Design” for some good tutorials to get you started. Here’s one for starters.

You will need to get your hands dirty with css and media queries and then you can take control rather than trying to let a wysiwyg construct something that you don’t understand.

Even if you did use an wysiwyg editor (or framework) you would still need to understand how to use css in order to use them properly. There aren’t any short-cuts as such so just dive in and get started :smile:. You can always shout for help here and we will try to help with specific problems.

1 Like

Hi @PaulOB,

Thanks for the reply and that’s an excellent article. That’s pixel calculations out of the window then!
I don’t have a problem with learning CSS, I have done a very small quantity of hand-coded stuff in the past so I have an idea of what might be involved. I’m just looking for an editor to help, much as I don’t code C# using notepad but using VisualStudio. It could be done using notepad but that would add a ton of unnecessary work & checking.

If you are looking for an editor then check out Brackets or Atom. There is an old Sitepoint article here but Atom has been revised since then and is apparently much better now (although I haven’t tried it yet).

You mentioned you have DW and if you just use the ‘code editor view’ then it is a very good editor but the wysiwyg should be avoided at all costs.

Alternatives like Sublime Text and Notepad++ are also popular around here, but they are pure code editors; you’d need to view their output in one or more browsers.

This might be worth a watch too

1 Like

Thanks. I’ve opted for Brackets. I’ve not come across any of these before so that’s been very helpful.

Hi @chrisofarabia,
I do use Notepad++ already for plain text files and it has some nice features.
I also took a look at that video. I was interested that it said that java was a must to start with, any particular reason for this? I was thinking of just learning HTML, CSS, PHP and mySQL. What would java add to this?
Thanks for your help and please excuse my ignorance!

I’d need to check the video, but are you’re sure it didn’t say JavaScript? The Java and JavaScript languages are different, and they should not be confused as being one and the same, or even related - at first glance, it’s an easy trap to fall into.

Assuming we are actually talking about JavaScript though, it provides a lot of the front-end interactivity you might need on a page; image sliders, lightboxes, fly-out menus, input validation on forms, pop-up ads, the list goes on and on.

‘Some’ of these things CSS3 can now do, and this helps with those visitors who turn off, or for some other reason, do not end up with your JavaScript code being loaded - fly-out menus are a good example of this. HTML5 form elements can also help with input validation.

HTML, CSS and JavaScript are generally viewed as being the three legs of the front-end school, though you can go a long way with the first two alone, depending on what you need to achieve.

PHP and MySQL are better considered as back-end tech, as they run on the server, rather than in the browser. They’re very much the powerhouse of many dynamic data-driven sites, such as blogs, shopping sites, wikis, forums etc.

You are correct. :smile:
I probably don’t need javascript to start with as I guess that functionality can be added at a later date. So I could use a crash course on CSS and HTML, I have an understanding of both but only vaguely understand how to use CSS. Someone mentioned something called “Learning”?

“Learning” was the name for Sitepoint’s online training presence. It’s now called ‘Sitepoint Premium

^ It was called “Learnable”. :slight_smile:

CLUNK!

Maybe one of my junior colleagues was right yesterday, I am getting old… :blush:

Just taken a look, I think this could be worth signing up for, thanks for the information.

1 Like

Your’e probably younger than I am!

Don’t bank on it, I’m 53

Haha, I can easily top that! :smiley:

1 Like

A youngster then :smile:

1 Like

Yes, I passed 53 in 2006!