# Creating a Website **URL:** \ **Category:** General\ **Created:** [November 8, 2016, 1:22pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223 "2016-11-08T13:22:20Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Justinhed](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/justinhed/32/97419_2.png) [@Justinhed](https://forum.freecodecamp.org/u/Justinhed)\ **Post date:** [November 8, 2016, 1:22pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/1 "2016-11-08T13:22:20Z")
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 ---
**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\ **Post date:** [November 8, 2016, 1:30pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/2 "2016-11-08T13:30:55Z")
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. ---
**Author:** ![bhat01](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bhat01/32/24285_2.png) [@bhat01](https://forum.freecodecamp.org/u/bhat01)\ **Post date:** [November 8, 2016, 2:16pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/3 "2016-11-08T14:16:44Z")
Hi there, If you are really interested in creating the website, [Free code camp](http://www.freecodecamp.com) 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. ---
**Author:** ![MARKJ78](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/markj78/32/160083_2.png) [@MARKJ78](https://forum.freecodecamp.org/u/MARKJ78)\ **Post date:** [November 8, 2016, 2:39pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/4 "2016-11-08T14:39:42Z")
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](http://www.htmlandcssbook.com/) - you will be able to build a website from scratch - then worry about [making them responsive](https://www.packtpub.com/web-development/responsive-web-design-html5-and-css3-second-edition). 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 😃 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. ---
**Author:** ![Justinhed](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/justinhed/32/97419_2.png) [@Justinhed](https://forum.freecodecamp.org/u/Justinhed)\ **Post date:** [November 8, 2016, 2:55pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/5 "2016-11-08T14:55:30Z")
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? ---
**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\ **Post date:** [November 8, 2016, 2:58pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/6 "2016-11-08T14:58:59Z")
Hi, Have a look at [this topic](http://forum.freecodecamp.com/t/what-text-editor-do-you-use/30361). 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](http://www.codepen.io) is a good option. ---
**Author:** ![MARKJ78](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/markj78/32/160083_2.png) [@MARKJ78](https://forum.freecodecamp.org/u/MARKJ78)\ **Post date:** [November 8, 2016, 2:59pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/7 "2016-11-08T14:59:26Z")
you can use any text aditor. No special tools required. notepad would work. I use [Atom.io](https://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](http://code.visualstudio.com/B?utm_expid=101350005-31.YsqwCVJESWmc4UCMDLsNRw.1) 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. ---
**Author:** ![Justinhed](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/justinhed/32/97419_2.png) [@Justinhed](https://forum.freecodecamp.org/u/Justinhed)\ **Post date:** [November 8, 2016, 3:01pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/8 "2016-11-08T15:01:50Z")
Okay great. Let me take it one step at a time and carry on with going though FCC. ---
**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\ **Post date:** [November 8, 2016, 6:39pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/9 "2016-11-08T18:39:03Z")
> [@Justinhed](#): > > What tool would one then use to write and create your websites? 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. ---
**Author:** ![MARKJ78](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/markj78/32/160083_2.png) [@MARKJ78](https://forum.freecodecamp.org/u/MARKJ78)\ **Post date:** [November 8, 2016, 6:46pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/10 "2016-11-08T18:46:16Z")
^ 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. ---
**Author:** ![Justinhed](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/justinhed/32/97419_2.png) [@Justinhed](https://forum.freecodecamp.org/u/Justinhed)\ **Post date:** [November 8, 2016, 7:14pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/11 "2016-11-08T19:14:00Z")
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. ---
**Author:** ![jamesperrin](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jamesperrin/32/158725_2.png) [@jamesperrin](https://forum.freecodecamp.org/u/jamesperrin)\ **Post date:** [November 8, 2016, 7:53pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/12 "2016-11-08T19:53:52Z")
@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](https://www.gimp.org/) (OpenSource version of Photoshop) - [The Pencil Project](http://pencil.evolus.vn/) - PowerPoint StoryBoard. - Old fashioned Pencil and paper 10 Free Wireframe Tools for Shoestring Budget Entrepreneurs > **[10 Free Wireframe Tools for Shoestring Buget Entrepreneurs](http://www.designforfounders.com/free-wireframe-tools/)** > > Bootstrapping entrepreneurs can't always shell out for monthly fees. We collected the top 10 free wireframe tools in 2015 you can use to plan your product. The 18 best wireframe tools > **[The 18 best wireframe tools](https://www.creativebloq.com/wireframes/top-wireframing-tools-11121302)** > > With more wireframe tools to choose from than ever, we select the pick of the bunch. 10 Free Wireframing Tools for Designers > **[10 Free Wireframing Tools for Designers](https://mashable.com/2010/07/15/wireframing-tools/)** > > This series is supported by Ben & Jerry's Joe, Ben & Jerry's new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here. Wireframing is a crucial step in ... ---
**Author:** ![zaclem01](https://avatars.discourse-cdn.com/v4/letter/z/e47774/32.png) [@zaclem01](https://forum.freecodecamp.org/u/zaclem01)\ **Post date:** [November 8, 2016, 9:32pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/13 "2016-11-08T21:32:00Z")
Google Draw also works well. ---
**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\ **Post date:** [November 8, 2016, 9:45pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/14 "2016-11-08T21:45:48Z")
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. ---
**Author:** ![jamesperrin](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jamesperrin/32/158725_2.png) [@jamesperrin](https://forum.freecodecamp.org/u/jamesperrin)\ **Post date:** [November 8, 2016, 10:06pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/15 "2016-11-08T22:06:13Z")
@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. ---
**Author:** ![mid0ri](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@mid0ri](https://forum.freecodecamp.org/u/mid0ri)\ **Post date:** [November 11, 2016, 4:56am UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/16 "2016-11-11T04:56:56Z")
Text Editor: atom, sublime, brackets; ([atom.io](http://atom.io), [sublimetext.com](http://sublimetext.com), [brackets.io](http://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 ---
**Author:** ![jamesperrin](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jamesperrin/32/158725_2.png) [@jamesperrin](https://forum.freecodecamp.org/u/jamesperrin)\ **Post date:** [November 11, 2016, 9:51am UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/17 "2016-11-11T09:51:55Z")
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](https://www.microsoft.com/en-us/download/details.aspx?id=36179) KompoZer [http://kompozer.net/](http://kompozer.net/) SeaMonkey Composer (Mozilla Composer) [http://www.mozilla.org/projects/seamonkey/](http://www.mozilla.org/projects/seamonkey/) openElement [http://www.openelement.com/](http://www.openelement.com/) ---
**Author:** ![displacednaija](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/displacednaija/32/26808_2.png) [@displacednaija](https://forum.freecodecamp.org/u/displacednaija)\ **Post date:** [November 11, 2016, 12:36pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/18 "2016-11-11T12:36:48Z")
Thanks MARKJ78. I’ve now got the book and it is very user friendly for a newbie user. ---
**Author:** ![MARKJ78](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/markj78/32/160083_2.png) [@MARKJ78](https://forum.freecodecamp.org/u/MARKJ78)\ **Post date:** [November 11, 2016, 12:43pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/19 "2016-11-11T12:43:51Z")
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](http://javascriptbook.com/) book in this series that has the same approach. ---
**Author:** ![displacednaija](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/displacednaija/32/26808_2.png) [@displacednaija](https://forum.freecodecamp.org/u/displacednaija)\ **Post date:** [November 25, 2016, 12:07pm UTC](https://forum.freecodecamp.org/t/creating-a-website/53223/20 "2016-11-25T12:07:27Z")
Thanks again MarkJ78. You are a 🙂 [Next page](https://forum.freecodecamp.org/t/creating-a-website/53223.md?page=2)