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?
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.
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.
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
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.
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.
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.
@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)
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.
@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.
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
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.
