Best way to design a web site?

[patseguin Global Moderator]

This may be a very general topic, but I have no experience with web design. I have Adobe CC 2015 with Dreamweaver so I can use that. I have messed with it and I am really not very good with it yet. Is there better software for beginners? I want to design a very simple web site for my business that just has basic information pages and a price sheet.

I am very versed in Illustrator. Is it feasible for me to create web page designs in Illustrator and then just extract the elements and place them in the web design software to recreate it?

[DevTech]

Azure kills you on database plans. They are really bad. 

Yeah that's Enterprise land.

Scott Hanselman has done a few articles on being frugal with Azure. Worth checking out.

[DevTech]

SO what exactly am I looking for on github again? Starting templates? I feel like a guy who has never touched a computer before, lol.

I haven't made that many posts to this thread. Cut and paste my posts into a text editor and you will have a lot of search terms.

GitHub has become... well the Hub for web design stuff. Make it part of your workflow to find stuff there.

Maybe even open your own free GitHub account and make a project to document your learning journey so others can benefit. That's the magic of GitHub. People give back.

If you still find it all too much, let me know and I will post some links for you of "stuff you must know about"

[DevTech]

ah well, here's some stuff. I will make up a boilerplate/bootstrap list later (the non-twitter meaning of bootstrap)

 

GitHub's own curation - many of them not really current:

https://github.com/explore

https://github.com/showcases/design-essentials

https://github.com/showcases/front-end-javascript-frameworks

https://github.com/showcases/css-preprocessors

https://github.com/showcases/icon-fonts

The "awesome" thingy:

https://github.com/search?o=desc&q=awesome&s=stars&type=Repositories&utf8=✓

https://github.com/sindresorhus/awesome

https://github.com/bayandin/awesome-awesomeness

https://github.com/enaqx/awesome-react

Some of the Big Players:

Bootstrap:

https://github.com/search?o=desc&q=bootstrap&ref=searchresults&s=stars&type=Repositories&utf8=✓

Twitter's own page:

https://github.com/twbs/bootstrap

http://getbootstrap.com/

React:

https://github.com/search?o=desc&q=react&s=stars&type=Repositories&utf8=✓

Facebook's own react page:

https://github.com/facebook/react

https://facebook.github.io/react/

Ionic:

https://github.com/search?o=desc&q=ionic&s=stars&type=Repositories&utf8=✓

Official Ionic page:

https://github.com/driftyco/ionic

http://ionicframework.com/

The Atom Editor

https://atom.io/

Codepen - really great learning kick the tires tool where you enter HTML, CSS, JS and see the result:

http://codepen.io/

 

Bonus off-topic but groovy material:

Microsoft's framework helps to turns your website into a Windows 10 App

https://github.com/winjs/winjs

http://try.buildwinjs.com/

Electron - make a webby thing into desktop for Windows Mac and Linux - used by Atom

https://github.com/search?o=desc&q=electron&s=stars&type=Repositories&utf8=✓

https://github.com/atom/electron

http://electron.atom.io/

 

[patseguin Global Moderator]

Thanks man. I think I am getting in way over my head. I downloaded the bootstrap thing and I literally have no idea what to do with it.

[adrynalyne]

Thanks man. I think I am getting in way over my head. I downloaded the bootstrap thing and I literally have no idea what to do with it.

That's the problem with relying on wysiwyg editors. You are lost when they aren't available. 

[DevTech]

Thanks man. I think I am getting in way over my head. I downloaded the bootstrap thing and I literally have no idea what to do with it.

Well at some point you have to RTFM.

That's why the Ancient Egyptians invented reading and writing. Sometimes I think the primary skill needed in the computer industry is the ability to read... ( and well do the Think thing after the reading thing)

 

[DevTech]

Try downloading the famous HTML5 Boilerplate and see if you can follow the instructions to make it jump through a hoop for you.

[DevTech]

That's the problem with relying on wysiwyg editors. You are lost when they aren't available. 

Yeah, the best way to take advantage with those things is AFTER you know what they are doing.

I have not come across one that could make a modern 2015 website. I wonder if there are any?

[Andre S. Veteran]

Thanks man. I think I am getting in way over my head. I downloaded the bootstrap thing and I literally have no idea what to do with it.

http://www.w3schools.com/bootstrap/default.asp

Depending on what you already know you might need to start with the HTML/Javascript/CSS tutorials first... that's the basics. Bootstrap is a library that solves some problems related to designing web sites using the aforementioned technologies, if you don't understand them well there's no point trying to understand Bootstrap or any other Javascript framework.

[DevTech]

Thanks man. I think I am getting in way over my head. I downloaded the bootstrap thing and I literally have no idea what to do with it.

I think I failed in my explanation for the word "bootstrap" and how it means different things within web design field.

1. Twitter Bootstrap is a CSS library used by Twitter that provides a starting point for the appearance of a website and has become almost universally popular with lots of free and paid template variations on it.

http://getbootstrap.com/

2. Bootstrap also refers to various bundles of web tools and templates that kind wonderful people put together to help you get started with a modern web site and they are plentiful with a wide variation in philosophy and selection of tools. It's a matter of looking at some and guessing which ones might fit with the type of workflow you imagine.

Here are some examples of that:

https://github.com/kriasoft/react-starter-kit

http://www.reactstarterkit.com/

https://github.com/iam4x/isomorphic-flux-boilerplate

https://github.com/johnthethird/react-starter-template

https://github.com/kriasoft/static-site-starter

https://github.com/Justin-Credible/Ionic-TypeScript-Starter

https://github.com/chriskdon/seed-burn

https://github.com/gpazo/react-flux-kit

https://github.com/lukead/react-sass-webpack-boilerplate

https://github.com/randylien/generator-react-gulp-browserify

https://github.com/janerikbr/react-webpack-bootstrap

https://github.com/mrphu3074/meteor-react-bootstrap

https://github.com/luiscarli/react-bootstrap

https://github.com/lcreid/jig

https://github.com/shahbhavir/react-boilerplate

https://github.com/maxmert/rocket-react

 

[patseguin Global Moderator]

So, DevTech do I download one of those and then open something in Dreamweaver and it gives me a starting template? For instance, I downloaded the React Starter Kit and have a folder. Do I open one of those files in Dreamweaver? If I am getting annoyingly stupid with my questions, just let me know.

[+Nik Louch Subscriber²]

and what do you mean nostalgic? Dies it look dated or something?

It has a certain turn-of-the-Millennium chic

[patseguin Global Moderator]

I am having trouble understanding what all of those boostrap files are for. I downloaded the React zip file and extracted it. There are various files in there as well as a "preprocessor" javascript file. Am I supposed to open one of these files in Dreamweaver and it gives me a starting template for a website?

[bluesman86]

This may be a very general topic, but I have no experience with web design. I have Adobe CC 2015 with Dreamweaver so I can use that. I have messed with it and I am really not very good with it yet. Is there better software for beginners? I want to design a very simple web site for my business that just has basic information pages and a price sheet.

I am very versed in Illustrator. Is it feasible for me to create web page designs in Illustrator and then just extract the elements and place them in the web design software to recreate it?

Check out Adobe Muse. You'll feel right at home, coming from Illustrator.

[bluesman86]

Check out http://themeforest.net/category/muse-templates for templates to get started

[Som]

I am having trouble understanding what all of those boostrap files are for. I downloaded the React zip file and extracted it. There are various files in there as well as a "preprocessor" javascript file. Am I supposed to open one of these files in Dreamweaver and it gives me a starting template for a website?

just out of curiosity, have you tried something like Artisteer and then a backend of Wordpress?

[adrynalyne]

I am having trouble understanding what all of those boostrap files are for. I downloaded the React zip file and extracted it. There are various files in there as well as a "preprocessor" javascript file. Am I supposed to open one of these files in Dreamweaver and it gives me a starting template for a website?

You are jumping ahead instead of starting at the beginning.

Go through some html/css/js tutorials, start from the beginning and go forward. You will be better for it, I promise.

[Seahorsepip Veteran]

Just drop the whole adobe nightmare tools already >.>

Instead learn actual html, css and js(In this order), w3schools is a good place to start.

A quick overview of all css selectors and properties: https://css-tricks.com/almanac/

[MikeChipshop Member]

Just drop the whole adobe nightmare tools already >.>

Instead learn actual html, css and js(In this order), w3schools is a good place to start.

A quick overview of all css selectors and properties: https://css-tricks.com/almanac/

^^^ This is your next logical step.
What DevTech has said is spot on, but i'd say a tad to advanced for where you are at now.

If you want to move on from visual editors (and i highly advise you too), then dabbling in HTML and CSS is your next move. Have a look at http://www.htmldog.com/ for some great tutorials. Start at the basics with notepad open, and you'll learn in no time.

When you're more familiar with these things, you can move on to using bootstrap, WordPress, Javascript, themes and all sorts of other stuff, but really nailing the basics first is the most important step.

[DevTech]

Just drop the whole adobe nightmare tools already >.>

Instead learn actual html, css and js(In this order), w3schools is a good place to start.

A quick overview of all css selectors and properties: https://css-tricks.com/almanac/

I am not sure there is a practically achievable objective but one can always hope.

He wants to make a modern website for his business and has not stated an objective to have a career in web design so the likely outcome will be some level of frustration which can be overcome by simple patience.

Whether that makes biz sense or not might be another story.

As SeaHorse says it is inconceivable to construct a first class website without some basic level understanding of the crazy mishmash underpinnings of web technology.

It's a really good idea not to expect the overall system to make any sense because as a working assumption you can just mentally file all the weirdness you encounter under "designed by idiot monkeys drinking too much beer" and just take everything as is. Turn off the "why did they do it this insane way" circuit in your brain.

You need a basic overview level understanding of the following and it wouldn't hurt to type in manually some HTML, CSS,and JS just to get a feel for it.

1. HTML

2. CSS

3. Javascript (JS)

4. Overview of common web tools. You will eagerly want to use SASS at some point. You might want to use Gulp, NPM, ES6 transpiler such as Babel, possibly general transpilers such TypeScript or Coffescript - Just a Wikipedia overview of what these things do is what I mean by overview.

5. Overview of how a lot of functionality in recent years has shifted from the web server into the web page code via Javascript

6. Overview of Mobile First Design

7. Review of basic design principles specifically as they are applied to web design

 

In Category Other:

Overview of Git and why you need source control. You will lose all of your work at some point if you don't get it versioned and backed up to a server somewhere. Happens to everyone at some point. And since the "learning site" is your only site, you can't afford to learn this the hard way.

 

 

[DevTech]

 

^^^ This is your next logical step.
What DevTech has said is spot on, but i'd say a tad to advanced for where you are at now.

If you want to move on from visual editors (and i highly advise you too), then dabbling in HTML and CSS is your next move. Have a look at http://www.htmldog.com/ for some great tutorials. Start at the basics with notepad open, and you'll learn in no time.

When you're more familiar with these things, you can move on to using bootstrap, WordPress, Javascript, themes and all sorts of other stuff, but really nailing the basics first is the most important step.

He wants to learn enough to craft a first rate site for his business. Unless he has eternal patience and can devote 100% of his time to this learning he has to somehow restrict his learning the just the exact essentials needed to graduate to an appropriate set of assistive tooling.

We would almost need to give him a curriculum so he knows where to stop in each area?

[DevTech]

So, DevTech do I download one of those and then open something in Dreamweaver and it gives me a starting template? For instance, I downloaded the React Starter Kit and have a folder. Do I open one of those files in Dreamweaver? If I am getting annoyingly stupid with my questions, just let me know.

You are not annoying because you have a great attitude.

You will need patience.

You will have to time budget lots of RTFM. That particular OSS project has lots of activity and also has documentation and once you have read all the docs you can also ask questions to those people directly. If they have any sense, they will realize that questions from a complete beginner are like gold in terms of improving the clarity of their documentation.

They do have a set of "getting started" docs - I'll take a look at it

I just spewed out a list of examples for how the word "bootstrap" had a different meaning in different contexts so there may be some bootstrap packaging oriented to beginners vs experts etc. But that one looks good enuff to get an idea of how the workflow goes so nothing wrong with kicking the tires on it even if you chose something else later on.

[DevTech]

I am having trouble understanding what all of those boostrap files are for. I downloaded the React zip file and extracted it. There are various files in there as well as a "preprocessor" javascript file. Am I supposed to open one of these files in Dreamweaver and it gives me a starting template for a website?

I will look at it specifically later today. I don't mind putting in a certain level of effort because I need to teach all of this stuff to someone in the next month or so, so I needed to locate an appropriate "bootstrap" anyways and we will start with the one you selected.

My own workflow is very very different to the typical Hipster method that has become standard in the webby webby world of crazyness. I use Visual Studio for everything because it handles everything well but it is not teachable in any short time frame and if the only thing you do is webby stuff then simpler tools will suffice.

You should also try firing up the Atom editor I linked to. It is text only but has a vibrant plug-in eco-system that should permit the creation of a good workflow.

There is also Adobe Brackets and Visual Studio Code that fit the same category.

Also I posted a link to Codepen - try to use that every day to type in snippets and to browse through the thousands of examples people have uploaded there. It can give you a great feel for how HTML, CSS, and JS interact.

 

[patseguin Global Moderator]

Here is kind of what I am wondering. Why in 2015 do I have to use a text editor and type in code to make a good website?

[adrynalyne]

Here is kind of what I am wondering. Why in 2015 do I have to use a text editor and type in code to make a good website?

Those that take the time to do things right get better results. Use shortcuts after you learn how to fix things when the shortcuts don't work.

Same with anything in life really.

You can use a WYSIWYG editor, but at the end of the day you will wish you hadn't.