So Iv learned HTML and CSS and Im starting to get into JS. What I previously thought is that you can just code a website from top to bottom using just notepad or notepad++, or something else like WebStorm that is the same thing but just has added features like a view of your directories and highlighted text for tags and such. From what I understand, browsers can read JS so you can just put your JS code embedded where it needs to be within your HTML code.
But after reading more and doing some research, Iv come across all these things like Bootstrap, Sass, PHP, Ruby, and Python. Now Bootstrap is just a framework for Html Css and JS, but why would you need that? Is it just for people that dont want to code things and just use precoded layouts or for using graphics built into Bootstrap so they dont have do make them themselves in Illustrator or whatever?
Whats confusing me about PHP/Ruby/Python is that iv read that theres nothing that those can do that JS cant do. So why go though the hassle of setting up servers and databases to run php or whatever that cant be run in the browser? Wouldnt it always make more sense to use JS so you can just code it right alongside your HTML and when you load it up, the browser can read it all localy and theres nothing to worry about server-side?
Obviously PHP/Ruby/Python and Bootstrap are very popular so Im just missing something
One last note, what do professionals generally use, just a notepad type of program, or is it way more common to have some sort of framework or workstation like Bootstrap? Im talking about things that dont require CMS, then I understand why you would need a database and all that, if your site has hundreds of pages and things like forums where users or website owners who arent devs need to make real time alterations.
Also just to mention, Im trying to get a job as a graphic designer, and my idea is to come up with my portfolio of art, then make a website for displaying it cleanly and artfully, hoping that having a nice portfolio as well as proving I know something about HTML, CSS, and JS will put me ahead of an average graphic designer and land me a job
Caveat: I am not a developer/designer, so this will necessarily be a very high level response.
For what youāre trying to achieve, you are right; you can do what you need for a portfolio site with just HTML, CSS and JS. If you were to go down the route of inline styles, it possible to do something entirely within the HTML, but Iād not do that personally.
All of the other tools you mention are aimed at something rather substantial than what you need right now, but depending what you then get involved in, an appreciation may be beneficial.
Frameworks (Bootstrap) are intended to speed up development and to assist in sitewide consistency - you can use it if you want, but you donāt necessarily need to.
Libraries (Jquery) are intended to speed up the creation of JavaScript functionality - again, it may help, but personally Iād rather learn some JavaScript first so that you can understand what something like Jquery is doing beneath the hood - for what you need, again, learning enough JavaScript to get you going may be enough.
Sass is a little like Jquery for CSS - it speeds things up, and isnāt essential for what you need.
PHP/Ruby/Python are server-side programming languages and (someone correct me here) are primarily concerned with accessing databases. They are much heavier weight tools designed to support websites MUCH larger than youāre expressing a need for.
As far as tools are concerned, thereās another thread running over here that is busy discussing tools - Iām using Notepad++ myself, but there are a number of other popular choices, of which Sublime seems to be the front runner.
Back to the āoverwhelmedā concern though, concentrate on HTML5 and CSS3; add JavaScript only if you absolutely need to, and you should be able to produce what you need.
A common computer paradigm is called Client Server. This is essentially what websites are. Your browser is the client and it talks to the server. The server then in turn talks to a database.
##Warning
long winded response ahead
In short, it speeds up development time by not having to reinvent the wheel for every little thing on your site. Why do you need to make a header, when thousands of people before you have already made it? Just use the one from bootstrap. Why should you work on building a Dialog Box from scratch? Why build a responsive grid system?
You get all of these things already in Bootstrap or Foundation or Semantic UI or any other frontend framework you use. Some are large monolithic beasts like the one above, others are barebone like PureCSS or Skeleton. The big disadvantage to using them is it adds a lot of extra bulk to your site. But you can configure most frameworks to include only what youāre using. They can also lead to everything looking the same, but you should be spending time customizing your site to be your site anyway. Customizing takes far less time than building it from scratch.
Itās not about being lazy, itās about not having the time because time is limited and expensive. Iām a full stack guy, I have a million other tiny little things to worry about, rather than getting my stupid header to work responsively.
Many reasons.
For one, data can be large. I meanā¦ LARGE. Think about coming to Sitepoint and having to download every-single-post ever made and every single userās statistics. Every single little piece of information ever on the site. Then after you do that, you have to download every single new thing posted and every single new user statistic. This would take a very long time and if you had to do this for every site, youād probably fill up your hard drive after visiting a small handful. So the servers takes it and stores it in a database for retrieval when itās needed.
Added to that, even if you could store the data on your machine, you would also need to store all the programs that do the backend searching and categorizing and optimization and all the millions of other little things. Your computer canāt handle this, but the server is good at it and handles it for everyone.
The server handles all this and only gives you the information you request. Like this post Iām making right now. Your computer asked for it, the server gave it to you. After I made it, it was stored in a logical place, categorized, and processed in a number of different ways added timestamps and all that. Which leads me to my next pointā¦
You canāt trust client information. Anything the client has is fully able to be manipulated and corrupted. Take the timestamp of this post. If this came from my computer, I could modify the JavaScript or the form variable or where ever it was sent from and change it to whatever I wanted. I could send it from 1984 if I wanted if the server trusted what I gave it. This needs to be done by the server and any information sent from the client needs to be sanitized by the server. Like say I wanted to embed a little piece of JavaScript that randomly changed the color of every element on your screen every 100ms into my post? Not only would that give a non-epileptic a seizure, but it would lag down even the best computers. Well if the server trusted me, then I could do that. Thankfully it doesnāt.
There are also hidden forums here that are only accessible to certain members. Iām a āMentorā so I have access to the Mentor forum that youāre unable to see. There are probably many others that I am unable to see that only Admins and Team members can see. Then take into account all the power they have of modifying posts, removing posts (spam), banning members, etc. You canāt give this to the client.
That said, you can use JavaScript on the server just like you can use Ruby, Python, Java, Scala, or PHP. This is something thatās fairly new, but itās being adopted fast since itās the only programming language on the client-side application.
Bootstrap is just a bunch of prebuilt pieces you can use on your site. You still need an editor for that. Editors fall into 2 major categories. Advanced Text Editors and IDEs (Integrated Development Environments).
Advanced Text Editors are things like Notepad++ or SublimeText or Atom.io. They are generally pretty light weight. If you need to run other things like Git or your command line tools, this is usually another program.
IDEās on the other hand are designed to run everything. Everything youāre doing when working on a site is done inside the IDE. This includes all your Command Line interaction, your code, your server, everything. (though usually not your database) Thereās usually no need to use any other tools when using an IDE. Sometimes you need to because the other tools can be better than what you get in an IDE, but thatās the idea anyway. The advantage of this is being able to have everything right there and run inside, which allows the IDE to tear apart your application and the code youāre writing to allow the developer to better debug and optimize their applications. As well as many other advantages.
Most of the time, I donāt have a need for an IDE and when Iām working on something at home I may work on something for 5minutes or 10hrs. If I have nothing planned for the day, I might not even know which one it is. For this reason I usually use SublimeText 3. But at work, where Iām at my desk for 5-6hrs a day coding for 5-6hrs a day working on the same project the whole time, I boot up my IDE because I wonāt ever bring it down and I can use all the tools it provides because I have everything configured and setup the way I want it because I do it every day.
##sass/LESS
Sass and LESS are called CSS processors. CSS and HTML are not really programming languages. They are mostly dumb, in the sense they only do what they are told and nothing more. HTML is like the framework and the walls and the rooms of a bank, CSS is the decorations and the paint, JavaScript and the server is all the computers, electronics, wiring, plumbing, and everything else that turns it from a decorated shell of a building with a big steel room, into a bank.
SASS and LESS add a big of programming to CSS. You write something in SASS or LESS and run it through a program that ācompilesā it to regular CSS. This is great because it keeps your from reusable pieces of CSS over and over, makes it easier to manage large bodies of CSS code, and it adds variables which are great for things like colors:
$primary: #FF0000; and then .something { color: $primary }, as well as a number of other features such as being able to manipulate colors without explicitly defining a new one. Such as .something { color: darken($primary, 15%) } instead of .something. { color: #b30000; } which is red but 15% darker. Now instead of 2 colors to manage, you have 1 named $primary.
Of course, they do other things. But this is the first and best step. Many frontend frameworks like Boostrap, Foundation, etc. are written in this because it makes customization MUCH easier by only having a few hundred things to change, instead of thousands.
Without wanting to stray too far off topic, Iām a project manager in a small IT services subsidiary of a UK blue-chip based in the Middle East. Iāve been working alongside a small (tiny) Dev team for the last 15 years, and may have absorbed a thing or two. I also tinker a bit for my own amusementā¦
lol