Creating a Website

Creating a Website
0.0 0

#1

Hi all,

Hope you don’t find this a silly question, But like i have said before in my last posts I am new to coding and creating Websites.
So i am watching a YouTube video on how to create websites and what this guy used for the design of his web page was Photoshop. Then from there he would use that to write the HTML and so on. Do you need photo shop to create your web page? What else can you use or just plain HTML?
What i am watching is called: How to build a Responsive Website form start to finish. Should i just carry on with FCC (which I am) and will it fall into place and the puzzles start fitting together and i will get a clear picture?

Thanks all


#2

Hi,

You use HTML to create all the parts (header,div, img etc) and CSS to style those. Bootstrap makes it very easy to build a responsive website.

I haven’t watched the video, but I guess he uses Photoshop for the design. So he designs something in Photoshop and then (tries to) build that with HTML and CSS. It is always useful to have an idea how your site is going to look. Photoshop is absolutely not necessary, a simple sketch will do.


#3

Hi there,
If you are really interested in creating the website, Free code camp is the best place to learn.
Here they teach basics of HTML (since you are beginner) and its better for you to learn the remaining HTML/CSS tags from W3schools Reference pages (for both HTML & CSS)
As you go on master these you can continue learning jQuery and other stuffs.
According to me Photoshop is not necessary.
Its better if you go with Bootstrap for responsive websites or you can even choose @media(css) tag.


#4

yep as @BenGitter said, you can do a sketch of your desired layout then build the structure using html. This is where you’d add all your content. You then make it pretty with css.

My inexperienced view is that photoshop more of a tool that a pro/pure web designer would use - before passing the finished file, which is nothing more than a detailed layered picture, to a front end developer to translate it into an actual; working website. I’ve never touched photoshop personally so I have no idea of the learning curve. Learning photoshop won’t do you any harm but it isn’t necessary at this stage unless you intend to or end up doing that kind of work. A PSD slicer is semi derogatory term I have seen banded about the internet to describe such developers.

FCC’s curriculum only touches on html/css and bootstrap, just enough so you can present your “programming” in a web page. My advice is to carry on with FCC and also try to find some resources on HTML and CSS (as it seems you have already been doing) to supplement FCC’s primarily JavaScript curriculum.

I guarantee if you read this book - you will be able to build a website from scratch - then worry about making them responsive.

No such thing as a silly question on this forum. Ask away… it makes those a few steps further down the road to feel smart if they can answer :smiley:

HTH

Mark

ps, someone correct me if i’m wrong, but I have read once or twice that designing websites in photoshop is a dying method.


#5

Hi all,

Thanks very much for the responses as always very helpful.
@MARKJ78 thank you for the link. I will look into it.

What tool would one then use to write and create your websites? Visual Studio?


#6

Hi, Have a look at this topic. I personally use Visual Studio Code, but you can use anything you want. For quick testing or if you are totally new to coding, codepen is a good option.


#7

you can use any text aditor. No special tools required.

notepad would work.

I use Atom.io at the moment - but in all honesty it can be a little slow sometimes and that is annoying because otherwise its ace.

Visual Studio Code is supposed to be great and I am planning on trying it for my next project.

Editors are one of those things everyone has an opinion on so just try some and choose your fave.


#8

Okay great. Let me take it one step at a time and carry on with going though FCC.


#9

As you’re just beginning, I would suggest using CodePen. The main benefit here is that when you run into trouble, you can post a link here on the forums for help. Allowing people to read and play with your code greatly increases the chance that you’ll get fast and accurate help.


#10

^ that would be simple answer! agreed.

Its REALLY handy as a beginner to see changes happen before your eyes too ala codepen. Especially when it comes to CSS.


#11

Fantastic i will use codepen… I am on that challenge now to create a tribute page. I will crack on with that and ask for feedback when I am done.


#12

@Justinhed What the video was first demonstrating was prototyping or wireframing. The purpose of wireframing is to develop a basic to advance design of the look and feel of a website. Once a wireframe is approved, then you can progress to creating a full website.

There are several tools you can use for wireframing.

  • Photoshop or GIMP (OpenSource version of Photoshop)
  • The Pencil Project
  • PowerPoint StoryBoard.
  • Old fashioned Pencil and paper

10 Free Wireframe Tools for Shoestring Budget Entrepreneurs

The 18 best wireframe tools

10 Free Wireframing Tools for Designers


Got my first client!
Problems whilst developing first website for client, looking for advice
#13

Google Draw also works well.


#14

Regarding using Photoshop / GIMP or any of the many wireframing tools, in my own experience actually learning how to mock up a webpage using software was a pretty big time suck for me, and didn’t really deliver any useful pay off.

Personally, if I need to mock up the visuals of my web page to get a sense of layout, I use pen and paper. No learning curve and lightning fast!

If you want to learn web development, learn HTML, CSS, JS. If you want to learn web design, learn Photoshop and enough code to not design things that can’t be implemented by your dev team.


#15

@JacksonBates The purpose of wireframing is to present to someone else. At work, we have to wireframe the look and feel of any project before we start coding. It’s one of our requirements and a deliverable to the Project Manager.


#16

Text Editor: atom, sublime, brackets; (atom.io, sublimetext.com, brackets.io) or even notepad just save it as.html. Not recommended though because it doesn’t “highlight” and hard to keep format.
Any browser can run html files. (chrome, Firefox, IE, safari) Highly recommend chrome since you can debug much easier and it has a lot of plugins/extensions for this.
Bootstrap is good, so is foundation, pure.
Frameworks: angularjs, vue (for advance website)
Testing: jasmine* (personal favorite for testing javascript)
Codepen is good so is jsfiddle, jsbin, plnkr


#17

You can also use a basic WYSIWYG web editor to create prototypes and wireframes. The only down side is some may make it look nice, but the produced code is crappy.

Microsoft Expression Web 4
https://www.microsoft.com/en-us/download/details.aspx?id=36179

KompoZer
http://kompozer.net/

SeaMonkey Composer (Mozilla Composer)
http://www.mozilla.org/projects/seamonkey/

openElement
http://www.openelement.com/


Got my first client!
Problems whilst developing first website for client, looking for advice
#18

Thanks MARKJ78.

I’ve now got the book and it is very user friendly for a newbie user.


#19

Maybe you could do a review once read, seeing as we now have a new review section with stars and everything!

There’s also a JS & jQuery book in this series that has the same approach.


#20

Thanks again MarkJ78. You are a :slight_smile: