starting a new bi weekly... ish series where i find a topic to learn about myself because I'm interested in learning it for fun. I want to learn it at my own pace, and my own interest without the focus being just on grades. I'll make a post about it, perhaps share progress as an edit. I encourage other people to do this with me, but I'm mainly doing this for myself. I'll share resources as well because if anyone wants to join me we can use the same resources!!
✦•┈๑⋅⋯ ⋯⋅๑┈·✦
✦•┈๑⋅⋯ ⋯⋅๑┈·✦
the first topic of this perhaps monthly series will be HTML & CSS because... duh!! we need to learn how to use them to make cool, original layouts on this website! truthfully I learned the basics of just html codes, but I never really FULLY learned css!! and yk uhh that's sad. and it's also the reason why my profile looks bland even though it took me forever to come up with it!
for this post, I will use this blog as a way to showcase what I've learned. I will continuously make updates and basically use this as practice since the HTML is already laid out for me I just need to use css for it. I will not allow myself to use bits and pieces of someone else's blog layout nor am I allowing myself to cheat and use chatgpt for help. (granted I had deleted my account like last week, so I wont be able to unless I make a new account.) the only resources I will allow myself is obviously the lessons teaching me and using inspect to figure out containers.
alright, without further ado, here are all the resources I will be using to learn html and css!
frontend roadmap (click the yellow HTML/CSS buttons to get resources to learn both)
https://tommypanzram.neocities.org/ (css blog preview. for some reason it wont let me embed the link :c)
okay I thinks that's it!! If you want to keep up with this series, sub to my blog. and if you have any suggestions on what we should learn next, comment or im me, it's public!! okay bay bay xoxo
#learning;#fun;#css;#html;#coding;#neocities;#layouts;#roadmap;#cheatsheat;#htmlgroup;#guide
Comments
Displaying 6 of 6 comments ( View all | Add Comment )
kiko!
Guys lowkey idk what to do 3:
jP
this sounds so awesome! cant wait!
s0nd3r
looking forward to it since i love tech
iarlaithe !!
I love this omgosh :0
Vyonnie<3
I love this blog series’s title sm! Literally my life motto lol,, subscribed 🙌🏻🙌🏻
also as for what to learn next,, personally in the tech department I’ve been tinkering around with arduino (hardware + ide) and also learning python + backend dev generally and idk if that’s of interest to u but yeah just a suggestion!
by Vyonnie<3; ; Report
the same website I listed, roadmaps, has lessons on backend, python and such as well! https://roadmap.sh
by kiko!; ; Report
wooaa this site is literally so useful?? I just took it at face value when u set the link name to frontend roadmap lol thanks for the info!
by Vyonnie<3; ; Report
GOAT
>I will not allow myself to use bits and pieces of someone else's blog layout
i dont rly see a prob with doing that tbh. obvs flagrant plagiarism is very widely frowned upon, but taking the basic code for a particular aspect of something (i.e. a blog header) and then tweaking the color, border, font etc. to make it uniquely your own??
yea i dont see an issue with that but anyway yes
making smthn from scratch is always better :DDD
I think op meant like specifically for the sake of learning loll
by Vyonnie<3; ; Report
oh yeah i know but there are many ways to learn
imo the easiest way is to understand the basic syntax 1st
i.e.
.container {
width:1000px;
background-color: beige; }
which is basically saying
i'm targeting this section of the page referred to as "container"
&& adjusting the width and changing its color
obvs things can remain that simple, or get overly complicated (i.e. my own page on here lol)
but either way, the basic syntax stays exactly the same :3
by GOAT; ; Report
I did that method to make my profile and ended up forgetting how anything worked so I wouldn't be able to learn like that
by kiko!; ; Report
another way is to just target individual elements at a time
for example, this is yr blog title rn
.title, h1
there's currently no styling but
.title, h1 {
-webkit-text-stroke: 2px black;
letter-spacing: 5px;
color: yellow; }
now you got a yellow font, with letter spacing && a black border for the font :3
once you know all the basic aspects of any given page (inspect q helps with that)
put them in a text editor
e.g.
<style>
body {
}
.container {
}
h1 {
}
</style>
then just add the css between { & }
that'll work too!! :DDD
by GOAT; ; Report