Where can I learn the very basic of how to exactly let javascript work with html,css and how to manipulate the data?

It seems that FCC hasn’t focused much on how things exactly work together in the curriculum.For example,FCC mentioned the way of writing css rules in an external style sheet then reference that file in the HTML document but didn’t explain how,while this is quite a slight issue,the solution(Open another file with its file name ends with .css and specify a link tag in the html file with its source attribute set to the css file’s name.) can be easily found on the web.But when it comes to javascript,things seem to get way more complicated.FCC similarly didn’t explain much about how to let javascript exactly work with html,css,data, and so on.Well,they kind of did it in the Front End Libraries Certification challenges but here’s the problem.This section introduces frameworks and libraries which are based on some fundamental syntax to my knowledge,plus the manipulation of data and database is still barely explained.Speaking of data and database,I don’t even know what they exactly are!I initially thought data was something stored in a database which is itself stored in a server,however, data is usually simply rendered as some objects in a javascript file or something like that whenever FCC mentions it.I know that may just be some simplified form to explain other concepts,but this makes me more confused as the fact that I’m already not sure about what data is.As for the concept of databases,it’s even more unclear to me,let alone the relationship between data,databases and servers.

I’m new to programming and have been extremely curious about how I’m supposed to bond javascript,html and css to build a website.Also,I’m planning to be a freelance front end web developer but have almost no idea how much we do,I mean,I’m not sure what’s for front end developers and what’s for back end developers.For example,Do we make signup,signin forms or signout buttons?Do we actually make the users possible to send a survey form they’ve filled out to the company’s database or something?Do we build a restaurant reserving or hotel room booking website?Do we make the users able to search things within a specific range of data that match the text they type in the search bar?Do we build a forum for people to post,reply,like,dislike etc. with the time of these actions shown?..If we do,how am I gonna achieve those tasks(i.e. the data things)?Just ask the clients to give me the particular existing databases or servers’ names or something?Are they supposed to own ones?But what are those exactly?How can I access those things and manipulate the data inside them?Does it have anything to do with the privacy stuff or something else?Should I sign any paper or pay to access those things?There are so many questions and I just wanna know!I initially expected FCC to solve my confusions in later challenges but when I encountered the Front End Libraries Certification challenges and glanced through the contents,I found FCC sort of assumes that we(I don’t know is it just me or everyone has the same issues,though) have already known all that and start introducing something more concise for our programming convenience based right on the foundation I missed.

Therefore,I went for some research but all I could find on the web was either some scattered,unexplained syntax without actual and clear examples or an overall description.So, are there any recommended detailed,step-by-step learning materials just like FCC that cover how to exactly let javascript work with html and css(i.e. how can I use javascript to actually change the appearance of a website I built with html and css,let the users to effect data status or retrieve a specific part of data etc.), how to manipulate the data etc. with more real-situation-liked exercises for me to engage?Or any direct instructions to my questions will do,too.

And really thanks a lot for your patient reading BTW😂!Just wanted to get my problems more clear.

Hello,
these are a loooot of questions. I’m not even sure I can actually go through all of them.
First of all, the most important concept:
There is a separation between front-end and back-end development.
In the front-end development, you would deal with the problems on the user side of the connection, basically what you see in the browser. Here you have the HTML, CSS, JS scripts, webpage design, etc…
In the back-end development, you would deal with the programming on the server side. So you’ll instruct the server on how to deal with specific requests. It’s the backend (and not the front-end) that deals with database connections and provides an API to the front-end to use its services.
On big, more structured companies, there are also employees that specialize in databases (table management, normalisation, indexes management, queries, and many more tasks. Also there are more type of DB than just the relational ones).

In the Front end specialization in FCC you won’t be dealing with databases because it’s not part of the purpose of the front end.
I do believe that in other modules there is something related to databases.
I think that since they introduce you to Node.js (server-side JavaScript) the DB used will be MongoDB.
If the information here is not enough (and it will not be in many cases since the real life complexity is much greater) I do encourage you to look for the official doc in internet, like you are already doing.
The skill of being able to Google the correct questions and find the correct answers is a must for developers.

Speaking of databases, I do encourage you to take a course on SQL and relational databases, maybe in platforms like Coursera, where you can audit the course for free, as well as a course on algorithms and data structures.
Rlational databases (so SQL language) are used by the majority of the companies.
I did those courses in university and they are extremely useful.

For what a front end developer would do, that very much depends on the company for which you are working. Some companies have some needs that other won’t have (not everyone needs a forum).
Big companies tend to have their own design office who will create a mock-up design of the page (based also on UX studies) that the front-end will have to replicate in HTML/CSS/JS.
In small companies, generally, the front-end will end up doing the designing as well.

1 Like

Thanks simonebogni!These are pretty solid suggestions though I still got quite a few terms to clear out.I’m sure that’d be fine after some research.

Before that, I found a way to simplify my main problem:
If I were freelancing(that’s something I feel like doing actually),a front end freelancer.I should be able to build a website completely done in every aspect(whatever the layout or the functionality etc) all on my own, right?Regardless it’s a booking website,a signup form,a forum,a website with a search bar or anything else?If that’s the case and I didn’t get you wrong----we use the provided API’s services to somehow get the data matters done in addition to the layout and interactions already done with HTML, CSS, and JS scripts.Then here’s my problem----how?!How can I make a dead button become one that change the info the users filled in a survey form into data and store it to the target place(maybe a database of the company,I don’t know) when the users click on it?I mean,almost every website is related to data stuff.How can I as a front end one,complete a valid website without dealing with databases etc?Or front end freelancers actually don’t work alone at all?

I’ve tried my best to show what I don’t understand as a really fresh programming learner!Hopefully this is more clear.

If you want to be a freelancer that deals only with front end than you need someone else that will deal with the back end.
It will be that someone that will tell you how to pass the data to the backend through the API they’ll provide.
It could be that you might have to pass them as parameter to the POST request to the backend service or you could pass them a whole object.
Check RESTful app development for that.

I don’t want to scare you, but I think that first it would be better to work in the field as a junior developer in some company and than, when you have more knowledge, move to be a freelancer.
The freelancer’s life is not exactly easy, because on top of coding and development the product, you also have to think about getting clients (and also getting paid for what you do and not get scammed), marketing yourself and dealing with the administrative documents (for example, there is a good probability you’ll be the one that will have to do the invoices).
Also, don’t underestimate the need of very detailed contract.
I’ve heard stories of customers that would pay after months from the expected pay day.
Or those that keep changing the scope of the project like as if they were socks (I’ve had to deal personally with this and it’s very frustrating).

Edit: also take a look at Ajax. I think the JS or the jQuery section has something about it. A more advanced concept would be the fetch API but for that you need to look at Promises first.

Hello, you are a curious one with a lot of questions. :stuck_out_tongue:

First off, I agree that FCC throws you a lot of syntax without much explanation of why. This program is design to exposure you to the job and not so much about concept. What you are asking here is concept that pertains to computer science.

Let’s see if I can explain it in a way that is complete. Lol

First let’s look at the entirety of web development. You have front-end develoment which deals with client interaction with the website. Then you have back-end development which deals with server side response to client’s action.

The question now, how do they both work together.

When a client first enter a site for example, google. The client request from the google server for the homepage of the website.

The google server then construct (using back-end code) to generate a webpage for you to see, or if it is static, you get a normal index.html

Everytime you interact with this webpage, information(data) will be sent to the server and it will process your request and sends you the result by constructing a new webpage.

That is basically what happens when you search something on the web address. I left out a lot of technical stuff. Those pertains to how internet works.

Your second question. How does HTML/CSS/JS work together.

HTML is meant for presenting raw data. Data meaning, any information that is shareable. The term data holds a lot of meanings depending on context.

HTML wasn’t meant to look pretty when it got started. But when too much data was introduce, there needs to be a way to present it in a clear structured way. That is where CSS comes in which handles the presentation of data.

CSS used to be inline. Meaning, you can write the style into the HTML elements. But this method became really cluttered, so the developers decided that data and presentation should be separated. Hence you get external CSS files.

As browsers becomes more powerful and more data to be share. Making static webpages is not enough. Interaction gave birth to many client-side script and softwares that allows developers to build web pages to be more stylized and responsive. JavaScript allows developers to control each HTML element directly called (DOM document object model) giving developers the ability to control style and add controls that HTML and CSS cannot do.

For example. This will make an HTML block disappear.

document.getElementById(‘hey’).style.display = “none”. Where document is the current webpage. getElementById is a method that grabs an ElementNode with a specific id. Style is a property associated with the ElementNode and finally display which is the css attribute.

This can also be done with any of the other css attributes. Width, height, scroll position, Etc.

That sums up the front end with HTML/CSS/JS

As time progresses, with even more information going around. People found out the power of the internet and start sharing information rapidly, but building static pages for each new piece of information was tedious and hard to maintain.

Hence, we use back-end to handle all the template work which gives web pages the consistent appearance. And store all the information(data/content) inside a database which people can have access to IF they are interested in. It makes the webpage look like it is dynamically created without creating anything more than a template. This is called Web2.0 where people are given the ability to share content without web development experience.

How does it work. Whenever you interact with a webpage for instance a form. You provide the information which gets attached to the http request called a query string that appears at the end of the web address. The http request is sent to the server which then by back-end code decipher the information you provided.

If you are giving information, the information will be stored in a database and will be retrieve at a later time. This can be username and password, blog post, comment, likes, etc.

If you are requesting for information, the server needs to open the database retrieve your data, package it in a web page template and send it all back to you (the client)

The rest of the technology stuff is all there to reinforce these ideas. Presenting and packaging raw data, and storing data.

1 Like

Thanks again!That’s a great dawn on me.I’ll go check out those sites.

Thanks for the simple explanation, Cowwy!I think I’ve gained more sense on these things now.

In fact,I do just want to know about the job instead of too much computer science for now.
And funny you mentioned the DOM!When I was working on the javascript challenges,I was always like “How can I apply this to HTML and CSS?”(especially when it’s about digits and numbers) because all I could is to see the output using console.log().After seeing stuff like document. … more often in the challenges and outside FCC later, I assumed them as some syntax in javascript to connect HTML, CSS(I can only assume because their concepts are so unclear to me in FCC.For example,when it comes to document.getElementById() ,the instructions are usually something like"there’s a ‘…’ id for you to use".So I never knew what id they’re talking about in this case.Is it the id attribute in an HTML element or something?) and thought I can finally try to let the three things work together by specifying links or something between the files.But after some research, all I can clearly talk about them is still “something related to the DOM”.

That’s why I’m here. I’m wondering if there’s a way to exactly learn through this sequence of DOM syntax. Or my assumption is not even true,maybe they have nothing to do with the connection between javascript, HTML and CSS?!Then what are they and what should do I to let javascript work with HTML and CSS(as in,when I do something in the javascript file and reload the page,things will change when I interact with the page or something)?

There is both the DOM and the CSSOM


DOM expresses the webpage like a tree, much like how hard drive stores files and folders. Read more here at wiki.

JavaScript is a means to interact with the DOM tree inside HTML.

For example…

<p id="element">I am learning javascript</p>

<script>
//This line will look for an element with an id "element".
//And assign the result into the **sample** variable.
var sample = document.getElementById( 'element' );

//On the developers panel.  The output for this is the element p block 
//and everything else inside.
//Press F12 -> console to see the output.
console.log( sample );

//If I want to change the text inside the element.
sample.innerHTML = "text have been changed"
</script>

On the browser, you won’t noticed anything changed because it happened so fast. On the console, you will see the difference.

Side note: Think in terms of object. If the term object is foreign to you. You will need to research that first.

When dealing with JavaScript, you will need some foundational understanding of programming.

Thanks a lot lasjorg!Those are really helpful!

But why would I change the text inside the p element by using javascript?
Can’t I just change the p element directly?

if you want to create an interactive webpage you need code that changes things in the page depending on what the user does

if for example you want to create a page in which the user can input their name and the page answer with “Hi, {name}!”` you need javascript to take the input and change the text on the page
you can’t go manually to change the text each time, can you?

if you want a static webpage then you don’t need to use javascript

Just to make sure you’re replying to the questions “But why would I change the text inside the p element by using javascript?
Can’t I just change the p element directly?”"
If you are----

When I use sample.innerHTML = “text have been changed” and reload the page, the text still just changes without any interaction.How can I use the syntax to achieve things like “Hi, {name}!”?

you need something a big more complex than that, like event listeners that listen when something happen and makes something happen in answer
logic operators, function calls etc

As someone who does dabble in front end and back end, I would suggest you find a application stack you like. Whether it be LAMP or Node.js/MongoDB and just create something from scratch watch videos and read. Learn to trouble shoot your bugs and write clean code with updated syntax.
Then start building some templates for basic application and a portfolio. Any employer looking to higher a frontend or backend programmer is going to want to see an actual project. This is more valuable than an education TBH (not devaluing an education, that is also important). These things can put you ahead of the herd.

What do you mean “application stack” ?

The picture is really cool btw!!

From the wiki

A solution stack or software stack is a set of software subsystems or components needed to create a complete platform such that no additional software is needed to support applications

Famous one are the LAMP/WAMP and the MEAN
In LAMP or WAMP:
L is for “Linux”/W is for Windows
A is for Apache HTTP server (the web server software)
M is for MySql (the relational database management system)
P is for PHP (the backend programming language)

In MEAN:
M is for MongoDB (a non relational database system)
E Is for Express.js (it’s a backend framework for Node.js)
A is for Angular (a front-end framework for JavaScript, like React)
N is for Node.js (a runtime environment that executes JavaScript outside of the browser. Typically on the server)

The MEAN stack gives you the advantage that the language for each of its components is JavaScript. So you don’t have to pass from one language to another.

Although I think that in the work environment, the LAMP/WAMP with PHP is still the most used.

I havn’t read the rest of the replies thoroughly, but JQuery is the section you’ll want to start exploring. JQuery is a library that allows you to do the things you are asking about (make a button respnond to a click and do some function). JQuery is considered an “easier alternative” to javascript which makes learning how to connect HTML / CSS / Javascript much easier.

Everything in Jquery can be done with “Plain Vanilla JS”, but the Jquery library is fun & easy to use adn introduces you to a lot of concepts.

Even if you don’t want to use jquery or feel like it’s the “wrong direction” right now, I promise you that if you do the jquery section, you will understand how to make websites do things that you want them to do. Adding in additional javascript becomes much much easier when you alre4ady have the basic ideas.

Think of jquery as a building block of JS incorporation

2 Likes

Personally, I would focus on MEAN (TBH I don’t use Angular, I still use bootstrap). It allows you to forgo server dependencies. I started with LAMP, but haven’t really messed with it in a while. Look at the industry trends. Obviously it is best to be able to understand and use all these tools with some proficiency, and everything I say is an opinion, not the rule.
But @simonebogni is correct.
Here’s a neat article on industry trends…https://www.freecodecamp.org/news/the-state-of-css-2019-survey-results-are-live/

Actually, @placidseven, thank you very much for posting that picture. I’m taking a look now at Tailwind and it does look great. Still deciding though if it’s worth adding it to the already long queue of things to learn :joy:

Though, an important thing to ask is, those statistics (especially the satisfaction) where done on Boostrap 3, Boostrap 4 (which changed a lot of things) or Bootstrap in general?