Report Blog Entry
I'm by no means a pro but during my time learning HTML and CSS I gathered some good resources, and someone asked me
to post them so here ๐. There's kind of two ways to go about it. Learning on your own, or learning with help
(some sort of course if you don't have a friend to teach you). But all the resources below are free or have a perfectly
good free option
What even is HTML/CSS? (+ basic CSS syntax)
These are the two languages you can use for
SpaceHey layouts. I won't go in depth with HTML because CSS is the main one you'll be using.
HTML is the bare bones of your layout, and of the webpage itself. If you made a website with
only HTML, imagine some plain text on a plain background. Without HTML, CSS is useless. You can easily identify
HTML code because it uses these brackets <>
CSS is the makeup that you apply to HTML, turning plain
pages to pretty ones. It's what organises all the sections and changes the colors, fonts, etc etc. You can
easily identify CSS because it uses these brackets {}
So here's an example chunk of code. The
<style> HTML element is what we use to tell the website 'this is going to be CSS, so you need to apply it', then
</style> is what tells the website 'end of CSS'.
This gives you a little look into CSS syntax.
The line of code above is the same as this:
But we separate it to make it a little more neat and easy to read. So what's going on here?
First,
you select where you're editing. In this case I'm just editing
'element'. Some selectors start with a period, some with a hashtag,
depending on their HTML type, but that doesn't matter.
Some example selectors, these are all used on this site:
body
.container
#comments
Look at the 'important tip' section for help getting these.
After you've selected where you're editing,
your lines of code will be wrapped in square brackets {}.
Then it just goes: property:value
A
semi-colon ; is used to separate multiple lines of code.
property:value;
property:value
or
background-color:red;
font-size:12px
There's
no more code within the brackets after the second line or piece of code, so a semi-colon
there isn't necessary, but it'll still work with one.How I learnt without a course and some tips
For CSS, I learnt first via modifying SpaceHey layouts. I feel CSS
can be quite easy to understand once you know the syntax. Text-align changes how the text is aligned,
background-color changes the background color. The part that makes it hard is memorising these properties and knowing the syntax: a fancy way to say how it's all put together. There's harder stuff but you don't need that for the average SpaceHey layout. As for HTML, learning that for SpaceHey is quite optional. HTML is used on here usually for adding new elements such as music players, galleries, etc. The resources at the bottom were essential for my learning. Besides that, make sure you are nonstop Googling. Don't know how to import a font? Google "CSS how to import a font". Don't know how tables work? Google "CSS tables". There is lots of great guides.Important tip
Browser dev tools are in my opinion essential while learning. On the average browser, you right click
and click 'inspect'. The reference below is on Chrome.
P.S on Firefox, the CSS is in the 'style editor' section
Not only can you view the HTML and CSS of the page, you can directly get CSS selectors. If you can't figure out how to modify a certain element, this makes it simple. Click the line of HTML with the element you're wanting the selector for (you can also hit the button on the left of the Elements-Console-Etc bar, the one with the little arrow, and click where the element is on the page), and right click. Depending on your browser the words might vary, but generally you hover over 'copy' and then click 'copy selector'.
Courses:
FreeCodeCamp
CodeCademy
The Odin Projectย - This one is much more indepth and I would avoid it if you aren't interested in coding beyond SpaceHey
MDN Web Docs
GeeksForGeeks
Comments
Displaying 7 of 7 comments ( View all | Add Comment )
โเญจเญงห๐๐๐๐๐๐หเญจเญงโ
Just here to claim my #1 Vogel fan spot ๐ I don't know how he does it guys he's so smort
maddiero
THANK YOOOUUUU
GOAT
>Browser dev tools are in my opinion essential while learning. On the average browser, you right click and click 'inspect'.
imo this is the best way to discover how stuff works in a hands on approach. plus the changes you make only affect stuff locally in the browser, and should disappear after refreshing the page :3
Vince
Damn this blew up. Thx dude :]
nick โหเฟ
yayy thank you vogel :D
๐ฌ . lana
omg wait i kinda needed that thank you
Amethyst >:3
We all say In unison: "Thank you Vogel, you are lovely"
Thank you Vogel, you are lovely!
by Tell Me Secrets; ; Report
Thank you Vogel, you are lovely!
by Tell Me Secrets; ; Report