How websites work
Every time you visit a website or app, what is shown on your screen is the result of something quite intelligent. In the background, browsers render code so that all these lines of text become a visual design.
If you want to see how the design is actually built, there’s an easy way to do so. For any website, you can right-click on the page and choose Inspect from the pop-up menu (works for most browsers). This will bring you to the source code.
The source code reveals the answer to “whoa, how did they do this?” but also lets you temporarily change things to test the relationship between code and rendered content. These changes only apply locally to your browser and will be gone as soon as you refresh the page.
HTML and CSS
HTML tells the browser exactly what elements are on each page. It shows where things like headings, text blocks and images are placed.
If you want to change the font size of a header, you would find that line of HTML code and make changes directly within the line. Easy, right?
But what if you have ten headings you need to change into that same font size? There must be a better way!
Yep, your gut feeling was right. The better way is called CSS (Cascading Style Sheet).
CSS is a separate style document that contains all your styling information, from typography and sizes to borders and colors.
To connect the right style settings to the right pieces of HTML code, classes are used. Meaning, you can give all your headings the same class name, hop into your CSS, find the class and update all headings with one edit.
Coding with Ycode
The information above about HTML and CSS? Yeah, you can forget about that again.
It’s good to know the concept of coding, but to become a great no-coder you don’t have to remember all this information.
In Ycode, every added block is automatically paired with a new line of HTML and we'll also take care of updating the CSS when you make style changes.
Wow, it almost sounds too good to be true? — we know, we know.