#complete css tutorial
Explore tagged Tumblr posts
Text
Everybody Loves You Now @AO3
International pop sensation Simme has announced on Instagram that he will be celebrating the end of his sold out world tour with five consecutive shows in Stockholm starting TONIGHT and running through the week. This will be his first extended stay in Sweden in four years, since he graduated from high school and flew to L.A. to sign a record deal.
And what is Wilhelm supposed to do with that.
Young Royals, Simon/Wilhelm, 74k words
This has been a wild adventure, thank you all for coming on the ride and fingers crossed there's more to come! <S <3
#young royals#young royals fic#everybody loves you now#elyn#elyn fic#lc2l#COMPLETE#No one has written a tutorial for instagram css so this took A LONG TIME to code
79 notes
·
View notes
Text
felt like i was going crazy yesterday trying to set up a login system for this website 😭 it was like i was back in college again!
#im using supabase for auth and i was like someone pls...show me how to do this...with just vanilla js#every tutorial is with like react or next#im trying to do this site with just html css and js (and php)#so i can learn#and later if i wanna move things to a framework i wont be completely lost if something breaks!#but yea i pretty much settled on like using react for part of the website so i can get this login set up#i found some videos and articles so im pretty sure its possible#other options is to use the archived js example i finally found for supabase auth but#it scares me that its archived#fingers crossed next time i code this works#i think this has to be the hardest part of the coding#i wish i could do my own auth thing but thats super dangerous as a beginner#anyways if i get stuck again ill just try the archived js example#and if im still stuck...#idk find another auth thing to use ig#BF RALLY WILL HAPPEN IT WILL#if it doesnt it means i died or someshit lol#but yea im mainly just like ugh about react cause i seriously dont need all those libraries added rn#this sites not supposed to be that complicated imo like yea its dynamic but its like a neopets like thing#the partial react thing doesnt rely on installing a bunch of stuff (i think)#so maybe we r good#????#web development#webdev#coding#codebreakers#if someone has the magic video to hand hold me through these pls send lol
2 notes
·
View notes
Text
HTML tutorial in Hindi | HTML Tools | HTML Document Structure
HTML Tools HTML tutorial in Hindi – HTML में Code लिखने और Run करने के लिये कुछ Basic Tools की जरूरत होती है जो लगभग सारे Computers में पहले से ही Installed होते हैं। इसके लिये mainly दो प्रकार के Tools की जरूरत पडती है: Text Editor (जैसे Notepad, Notepad++, Dreamweaver, Coffee Cup, Visual Studio Code आदि) Web Browser (जैसे Internet Explorer, Google Chrome, Firefox, Safari, Opera आदि) Text…
View On WordPress
#complete html tutorial in hindi#css html tutorial in hindi#html#html course in hindi#html css tutorial for beginners in hindi#html css tutorial in hindi#html full course in hindi#html hindi tutorial#html in hindi#html in one video#html in one video in hindi#html tutorial#html tutorial for beginners#html tutorial for beginners in hindi#html tutorial in hindi#html tutorials in hindi#learn html#learn html in hindi#what is html in hindi
0 notes
Text
YOU MUST MAKE A WEBSITE
Oh wow, look at that! YET ANOTHER post urging you to make a webbed site! What a completely new thing that people haven't made a thousand masterposts for already!!
• Making a website might look scary. It is Not.
At first, I too thought making a website was too much work. It really isn't! It turns out that all you need is
an HTML file,
a web hosting service and
w3schools tutorials,
and that's about it!
This post will point you towards these resources, and others I found useful while figuring out how to make a website.
• VERY QUICK EXPLANATIONS:
What's HTML and CSS?
HTML is the content of your webpage, the skeleton of it. What shows up in a webpage is what's written in the HTML file!
CSS is the way the HTML is styled; the colour of the background and the letters, the size of elements, the font, all that!
Do I absolutely NEED JavaScript for a website?
Not at all! You don't need to worry about learning it before getting started.
• What do I make a website for? What do I put in there?
ANYTHING AND ALMOST EVERYTHING. Here's some ideas for pages from a post of mine were I was very normal about websites:
You can make a page that's only pictures of your pets.
You can make an interactive adventure.
You can make your own academic blog full of your own essays or articles.
You can just post a ton of art or make a full music page.
You can make a blog and infodump eternally, give book reccs and reviews. You can host a thousand virtual pets and nothing else.
Upload entire books in a single html file. Make a wikipedia for your ocs. Make a fake site for a random fictional place (restaurant, hotel, whatever). You can make a thousand fanpages/shrines about your favorite media. You can upload your own webcomic and make it all like a fancy website and shit.
I could keep going but, for the sake of "brevity", I won't.
• WEBSITE EXAMPLES!
If I started listing the websites I know, this post would be bottomless. Here's only seven:
https://publictransit.neocities.org/ - A webbed site, for sure
https://ribo.zone/ - A personal site
https://leusyth.neocities.org/ - An art archive
https://solaria.neocities.org/ - Personal website with A Lot of stuff (it'll come up in a bit, because it offers web making resources)
https://hog.neocities.org/ - The Hogsite
https://thegardenofmadeline.neocities.org/ - Another personal site! It also has a web resources page and has made another masterpost like this one (but better)
https://spiders.neocities.org/ - My own website, which must be weird to see in mobile . sorry
• You've convinced me. I want a webbed site. Where do I start?
https://neocities.org/
FIRST OF ALL: Neocities. It is a free web hosting service, and it's the one I and the sites I linked use!
When I first started, my website was a black page with red letters and a drawing, and nothing else! It was like that for a month, till i started picking up on how to do things.
Here's what helped me get an idea of how to make things work:
https://sadgrl.online/learn/articles/beginners-guide-neocities
An absolute beginners guide to neocities -- while when you make an account there you get a tutorial page from the site, this one's extra support for that.
https://www.w3schools.com/
Learn HTML, CSS, JavaScript and MANY other coding things for free. All the tutorial/reference pages have live testing windows for you to mess with!! helped me a LOT while figuring this stuff out!
https://htmlcheatsheet.com/
https://htmlcheatsheet.com/css/
Cheatsheets for HTML and CSS, respectively. It includes a JavaScript one too!
https://sadgrl.online/webmastery/
Sadgrl's webmastery resources! Also includes the next resource listed here:
https://sadgrl.online/projects/layout-builder/
Sadgrl's layout builder; not a lot of customization at a first glance, but I've seen wildly different websites all using it as a base, plus it works using CSS Flexbox, so it generates a responsive layout!
(basically, a responsive layout is one that translates well in different sized screens)
https://www.tumblr.com/fysa/728086939730919424/wikitable-code?source=share
Tumblr user fysa made this layout imitating a wiki page!
https://brackets.io/
At some point, you might want to do things outside the Neocities code editor and get one outside the site. I recommend Brackets, because my old as fuck computer can run that and absolutely nothing else apparently, and it works wonderfully! Though I recommend either turning off the code autocomplete or using it after a good while of already using the Neocities code editor, so you get used to coding on your own.
http://www.unit-conversion.info/texttools/text-to-html/
Turn your text into HTML code! i use this kind of pages for my lengthy blog entries that I don't feel like formatting myself.
https://imagecompressor.com/
COMPRESS YOUR IMAGES.
The heavier an image is, the more your site weighs and the more time your page will spend loading. You don't want that, specially if your site is heavy on graphics. This might help!
https://solaria.neocities.org/guides
Some CSS, JavaScript and Accessibility guides! Worth checking out!
https://eloquentjavascript.net/
This is a free, interactive book for learning JavaScript! NOTE: It is very intuitive, but JavaScript is HARD!! I still haven't learned much of it, and my website does fine without so don't worry if you end up not doing much with it. It's still useful + the exercises are fun.
And now, accessories!
• Silly stuff for your page :]
https://gifypet.neocities.org/
Make a virtual pet, copy the code and paste it in your HTML file! You'll get a little guy in your webbed site :]
https://www.wikplayer.com/
Music player for your website!
http://www.mf2fm.com/rv/
JavaScript silly effects for your site :]
https://blinkies.neocities.org/geoblinkies
Blinkie search engine!
https://www.cbox.ws/
Add a chatbox to your site!!
https://momg.neocities.org/
Infinite gallery of gifs. i've spent hours in there looking at moving pictures and out of them all, the ONLY gif i actually ended up using on my site was a rotating tomato slice. it is still there. trapped.
https://wrender.neocities.org/tarotinstructions
A widget that gives you a random tarot card!
https://www.websudoku.com/widget.php
Sudoku widget!
That's about it for now! I don't know how to end this!!! Remember to have fun and google everything you don't know :]
440 notes
·
View notes
Note
how did you make your own website? & how long did it take you to make it? i am interested in web dev,,, do you have any tips or any helpful sites for beginners/ intermediate? (sorry for asking so many questions!)
hey no problem, asking is a great way to learn always!!
i started on my portfolio site i think around september 2022, forgot about it because of work, then went back to it and deployed it around march 2023! i learned a lot at work, so i just applied what i learned from working in web dev to my own personal site
regarding how to start, if you're a complete beginner, i'd suggest playing around with HTML/CSS first since it's kind of the basic building blocks for doing frontend stuff -- for the first few projects you could try copying simple sites like Google's home page :) there are little interactive tutorials you can find online too like flexbox froggy that can help teach diff concepts in a fun way!
after feeling comfortable with it, i'd suggest playing around with ReactJS when starting out with web dev; it's easy to get into because of its extensive documentation and its large community! there are step-by-step guides into setting it up and several tutorials (both video/article)
if you decide to get into actually deploying your stuff and connecting it to APIs, you can start looking into other frameworks like NextJS/GatsbyJS etc.
getting yourself into a web dev project, like maybe making a small notes/checklist web app or your own portfolio site is a fun way to experiment!! the hardest part is always finding the motivation to start them imo :) wishing u the best on ur web dev journey!!!!! 💗
182 notes
·
View notes
Text
EMPIRE - MULTIMUSE MUSE PAGE !!!
This page is completely free. Please support me and my work by liking or reblogging this post.
[ INFORMATION ]
THIS CODE IS 100% JAVASCRIPT FREE!!!
This code comes with tabs which allows you to give each muse a separate page. Therefore, you can add as many muses as you want.
The theme is very responsive and doesn’t need much editing!
All colors and effects are easy editable. Not many colors are needed.
The gradient effect over the picture can be removed, it can be turned into one picture, it can be turned into a gray filter or any filter can be entirely removed
The pictures are 250 x 280 in size but they resize automatically if your chosen picture is too small or too big.
The size of the muse picture is also editable and changeable.
The picture can also be removed completely without any editing in the CSS part.
The code offers 2 main links (Home and Ask) but also three free individual links. As well as space for hidden information of your choice.
The main box with detailed information can be edited and designed to your liking. Possible options and variations can be found in the code.
[ GUIDELINES ]
Do not claim as your own.
Do not remove the credit!
Do not use as a base code or take parts of this code for your theme.
Feel free to edit as much as you want!
Editing help and tutorials on how to edit the tabs can be found in the code. A tutorial page is linked there.
Click the SOURCE LINK to be redirected to the preview and the code!
#indie theme#free theme#multimuse page theme#muse page#muse page theme#rph#indie rp#rpc#indie rph#rp theme#page theme
528 notes
·
View notes
Note
Hi so sorry to bother you but I want to learn how to make IFs, so I've been using twine and trying to learn how to use sugarcube but like how 😭😭😭
Babes I am so embarassed I'm literally studying computer science oh my god. Like in theory I know that programming languages are different but this is the first time java vs javascript is really hitting,,,,
Do you have links to any resources you used to learn? Like how you randomized variables (for the 'i'm into both men and women' option's gender setting) and how to do the pronoun thing properly, and stuff like the codex, plus if you can how you customized that sidebar
Thank you and I'm sorry to bother you!!
No worries at all!! Here's a masterlist of Twine resources you can use for the things you mentioned and more. It includes tutorials for beginners, including multiple different ways on how to code pronouns, CSS customization and templates for your game, etc.
For the randomization of variables, the line of code you want is <<set $variable to either("option1", "option2", "option3", ...)>>
But for my purposes specifically, to maintain an even 2 male/2 female LI split, I had to use the code in a little more convoluted way since randomizing all the genders with that code could end up with an "uneven" balance (like 3 out of 4 LIs being randomized as female, or all LIs ending up as male).
If you want to do something similar with having a 2 male/2 female LI randomization, here's how I went about it, though I'm sure there's a much quicker way to do it. Mind you I was a total beginner when I wrote this haha:
Basically what this does is randomize R's gender and randomize X's gender first to either male or female with the first two lines. If R and X are both set as male or female, then A and D will both be set as the opposite. If R and X are set as different genders, however, then A's gender will be randomized next. Then, based on whether A is male or female, D's gender will be selected to complete the 2/2 split.
Hope this helps!!
127 notes
·
View notes
Text
ever since i made THIS POST a lot of people have been asking for a tutorial, even though in pretty much all of the screenshots i included the specific part of inspect element showing exactly what i edited.
so buckle the fuck up I guess because the tumblr userbase want to find out how to make html pages unusable and who am I to deny you.
get ready for Baby's First HTML and CSS tutorial lmao
ok so first things first we need to go over BASIC HTML
html is made up of these things called "tags" which specify certain parts of the web page, such as
HEADERS (<h1> through <h6> in terms of importance)
PARAGRAPHS (<p>paragraph here</p>)
LINKS (<a href="linkhere"></a>)
BOLDED SECTIONS OF TEXT(<b>bold here</b>)
and a bunch of other stuff,
by default however, specifying all of this just gives us a plain white page with plain black text of varying sizes
that's of course, no fucking good, and sucks shit, so the arbiters of html decided to let us STYLE certain elements, by adding a STYLE parameter to the tag
this can change any number of elements about how things are formatted.
text colour, page colour, font, size, spacing between elements, text alignment, you name it? you can change it!
you might've noticed that, certain elements are nested in other elements
and that any changes that apply to one element, apply to everything included under that element!
how convenient!
anyway this method of styling things by adding a style=" " to their tags is called "in-line style"
i think because the "style" goes "in" the "line"
it's generally ALSO a pain in the ass to style an entire website like this and should be exclusively reserved for small changes that you only want to apply to specific parts of the page.
for any real change in style you want to create a <style> section in your page's header!
this can be used to make changes to how all elements of a type in your page are displayed
or even add new elements with whatever wacky styling you want that can be used with the <div> tag!
wow! isn't css just dandy!
and hell you can even use External CSS™ if you're making multiple pages and want them all to have a consistent theme, by pointing to a .CSS file (which is basically just a <style> header without the <style> tags lmao
ok this is all well and good and very interesting if, say, you're making your own website
*cough*neocities*cough*itsreallycoolandfree*cough*
but you came here because you want to FUCK UP A WEBSITE and make it look STUPID!!
so this is where the transform css property comes in~
you can read up on it HERE if you want the details but basically it allows you to apply mathematical transformations to any html element you want,
all of these fun bastards,
they can be really useful if you're doing some complicated stupid bullshit like me
OR for having fun >:)
if you'll remember, earlier i said that css properties apply to literally everything nested in an element,
and you MIGHT notice, that literally everything in pretty much all html files, is nested in an <html> tag
you can use style=" " or regular css on pretty much ANY html tag,
INCLUDING HTML!
ok ok that was a lot of buildup for something that i could've explained in one or two lines, but i gave you all this fundamental knowledge for a reason,
well, two reasons, go make a neocities
CHAPTER 2: THIS POST HAS CHAPTERS NOW
CSS KEY FRAMES BABYYYY
THESE FUCKERS DON'T WORK AS INLINE STYLING
I HAD TO TEACH YOU HOW CSS WORKED, TO GIVE YOU THE KNOWLEDGE YOU NEED, TO ANIMATE PAGES. TO MAKE THE FUCKERY COMPLETE!!!!
OKAY SO AGAIN READ UP ON THIS IF YOU WANT THE FULLEST POSSIBLE UNDERSTANDING
BUT WHAT KEYFRAMES ALLOW YOU TO DO, IS ANIMATE CSS PROPERTIES
and then make a class, which calls that animation...
and then assign that class. to your html tag.
and then vomit forever
we can do it in 3d too,
the only limit is your imagination... (and how many parameters you want to look up on w3schools and mozilla mdn web docs)
CHAPTER 3: APPLYING IN PRACTICE
ok now the fun thing about all of this, is you can apply it to your blog theme, literally right now
like literally RIGHT now
like step one, make sure you have a custom blog theme enabled in your settings, because that's turned off by default for some reason
step 2: edit theme
step 3: edit html:
step 4: apply knowledge in practice >:)
431 notes
·
View notes
Note
Hii ! I’m in a bit of a problem rn and I’m wondering if you could help ( sorry for bothering you )
So school just finished and I’m on vacation for like 3 months so I really want to learn how to code ( I mainly want to make cool websites and stuff ). So I started to learn html and css but it just seems so overwhelming especially seeing all the ressources and tutorials online, could you please help me know what to learn first ? 💖
Hiya! 💗
Yeah, I can help! It can be overwhelming at first, but it's best to break it down into chunks and tackle them bit by bit.
For now, as a complete beginner, use these 3 resources:
HTML and CSS course video - LINK
W3School (for extra help) - HTML LINK | CSS LINK
MDN (for even extra help) - HTML LINK | CSS LINK
After that, work on projects to test your knowledge:
List of 11 projects to tackle - LINK
Here is the list of things you want to cover in HTML:
Basic structure
Tags and elements
Attributes
Forms
Semantic markup
Tables
The same but for CSS:
Selectors
Box model (margin, padding, border)
Typography (fonts, text properties)
Colours and backgrounds
Layout and positioning (floats, flexbox, grid)
Responsive design (media queries)
Transitions and animations
Now that you have a list of what you need to cover, tackle them one by one, making sure you understand the topic before you head over to the next. The video tutorial covers all of this and more. If you don't understand a bit in the video, stop and look on W3School and MDN for further understanding and then continue on with the video. Also, tackle the video slowing. Don't rush, don't do it, it'll just make the learning process even longer if you getting not understand things.
The resources I listed are my complete go-to. After that, as you've noticed, there are hundreds more. Go through the ones you need for the specific project you're working on or the topic you're studying only.
Hope this helps and good luck! 💻💗
#reources#coding#codeblr#programming#progblr#studying#studyblr#comp sci#tech#html#css#html css#coding resources
100 notes
·
View notes
Note
Hellu))
I looked at your neocities thingy, and I just wondered how you did that with the text boxes and the background and stuff. If you are willing to share, if you aren't, then sorry for wasting ur time)
I'm very new to coding (I suck) and "Penelope the cat" doesn't really help much T-T
Hi! Don't worry about asking, I'm always happy to help and give info on anything I know to the best I can! (Though to be completely honest, I too don't know much of HTML so... lol)
I used a <table> tag and the other tags that come with it. I also used boarder, boarder style, and background color, which would be in the CSS part of the code. Makes the boarder that's around it, The style that boarder will be in, and the background color of that table.Here's a website that explains it better then I can and also helps me out A LOT.
I heavily recommend this site, it's a life saver and will explain everything.
Also here is some CSS to help with the boarder and background!
Some other extra tips I'll throw in here:
I recommend using "Visual Studios". It's a free program and you can get a plug-in that allows you to see how your website looks without having to edit, go to the website, refresh, over and over. It also helps with coding as well, overall I'm loving it!
Now, by no means am I saying you should copy somebody else code and steal it. That's wrong. However, if you see something you like and want to know how it works, inspect the page and look at the code! I've learned a lot from doing this and it's help me figure out how things work too. Once again, do not straight up steal lines of somebody else's code. By that point you're not coding, you're copying, pasting, and stealing.
I also think you should learn the basics of HTML, and if you really want to make things then I say take the time to learn HTML. Personally for me, I love the look of broken ugly websites. Just some basic CSS will do for me! But if you're not like me, then yes, I think you should learn more then just the basics.
I'm sure there's some HTML nerds that can explain this way better then what I can so like I always say when it comes to learning stuff, look it up! The internet has unlimited free information, somebody 12 years ago on reddit probably asked the same question you did and the answer will be in the comments of that post. Always search for things!
8 notes
·
View notes
Note
Hello there! I happened to find your website and I was wondering if you wouldn't mind sharing how you made it? It looks really neat and I wanted to learn how it was coded and hosted.
hi, thank you so much!! i've been making websites uh. pretty much since i learned how to use the internet, whether for fun or employment or both. i make my "for fun" websites from scratch with HTML, CSS, and JavaScript without any libraries or frameworks. unfortunately, i can't give a great recommendation for web hosting on the cheap if you're just starting out as i've hosted my stuff with the same company since my freelancing days and could definitely get a way better deal elsewhere lmao. the cost of being lazy...
i really, really like talking about web design/making websites/etc. so i don't want to give you an information overload, but if you're interested in learning how to make websites, there are a lot of excellent (and free!) tutorials and reference guides out there to get you started! here are a few:
MDN Web Docs - THE resource for anyone doing web design and development, from complete beginners to advanced devs. their documentation is thorough to the point where it can be intimidating for beginners due to how technical it is, but it's very, very good and their tutorials are fantastic.
W3Schools - similar to MDN, but i find it's much less jargon-heavy and beginner-friendly. it also contains great resources, examples, reference guides, as well as extensive tutorials.
Codecademy - there are a lot of free web and programming courses out there, but i really like the ones codecademy offers. in my experience, the projects are fun, the courses are well-structured, and the community is very helpful. they regularly have great sales for the pro version, too.
if you want to make your own website site from scratch without having to navigate the more complex aspects of hosting, domains, etc., check out Neocities! it's got loads of resources, a great community, and it's free!! it's also near and dear to my heart as a lover of "old web" design sensibilities.
by far the easiest way to start is to download a text editor (i'm partial to Sublime Text, but everyone has their favorite), paste in an HTML boilerplate like this one, save it to your device as a .HTML file and then open it in your web browser. it will only be accessible on your local device and not over the internet, but you can play around and build things out without it being public and it’s an easy way to get a feeling for how things work.
my final recommendation is not so much about the specifics of making a website, but how to think about making a website. when i was a young stergeon at my first big web design job, my mentor gave me the book Don't Make Me Think! by steve krug and it was Huge for me. some of the technology-specific material is outdated nowadays as it was last updated in 2014, but the book is still a fantastic introduction to design thinking, visual language, and user experience principles.
hope this helps!!!! happy to chat more if you have questions <3
#sterge.eml#hope this makes sense lol. i got a lil excited even though i tried Very Hard not to.#i love internet :0) :0) i love website :0) :0) :0)#i was a web designer professionally for years and will almost certainly be one again whenever i stop being Extremely Unemployed#BOY was it a relief when i finally stopped giving a shit about making all my personal websites look Good and Perfect#and just started having fun doing goofy stuff with css#i like leaning into web 1.0 design features and the charmingly-crude 'early internet' vibe of things#and as it turns out websites load really fast when they're not bloated with a bunch of big JS libraries and things. interesting huh.#just don't look too closely at any of my javascript lol i am not a good programmer#i live for the brute force approach. if it works it works#my dream is for everyone to make a website#it’s fun and the world is more beautiful for it
7 notes
·
View notes
Text
Genuine question: is anyone else a "Trial by fire" learner?
Quick explanation: I don't like sitting down to watch a video, read a book/article, etc, before attempting to do what I'm trying to accomplish with what I'm trying to learn. I want to learn as I go, with the intention that I'm going to actually use the final result for something significant. I want the thing I create to be able to be used for something else-- a project, a portfolio, whatever. I don't like having "test" results that I can't use again. Additionally, I can watch all the tutorials I want, but if I'm not actively doing something with it in the moment that I'm absorbing it, it's very likely I'll never do anything with it.
An example: I just brute-force learned basic CSS to customize my irl Itch.io page for portfolio showcase purposes. Another example: I made a Vtuber model step by step alongside several other tutorials (to maybe make a debut appearance soon?). I learned as I went, and the results were immediately something I could point to in a professional context, or use for videos/streaming in the case of the Vtuber (nevermind the fact I haven't used it yet).
#probably optimistic to give this poll a one week lifetime lol#poll#polls#tumblr polls#random polls#random poll
11 notes
·
View notes
Note
Ur website so cool!! ❤️❤️ Do you have by any chances coding tips? Been trying to make my own website for a while but adhd won't let me concentrate a second when it comes to learning coding
Thank you! And 100% It is deceptively approachable but also time consuming, I'm familiar enough with html from a highschool class where we did need to write code out by hand, and then soft practice with coding toyhou.se profiles and futzing around with free code snippets. Largely though I don't think you need to know everything or to write everything by hand, you just need to frankenstein code pieces together (As long as they're free ofc).
I used this first, it's fucking insanely handy and lets you make a simple layout with sidebars, navigation, header, footer and a body base ect, and then just generate and copy the code. The html itself also has greyed out little notes about what parts do what!
I'll be real the rest of it after that is just me googling what I want to do or googling html snippets bc I forgot them. So like html image link with size attributes ect ect, how to make a html image gallery. I don't use one site exclusively but w3schools.com has a bunch of common ones and also has a little live code editor in its tutorials.
Like I still get greatly stumped for hours bc code's kinda sensitive and one or two characters out of place will break sections of it especially when ur just frankensteining. Trying out little segments in live code editors is really helpful because you can kinda break it apart and diagnose the issue before putting it into your site html.
Also if it helps this is kind of how I break it down in my brain as another ADHD-er. so fuckign sorry for how this looks im doing it in snipping tool. But code bits love to live in cages even if it all looks the same, iit would also help if you clean your code up mine is pretty horrid but you just want to familiarize yourself with the little "Sections" ig that's where doing things by hand would help because you would 100% know what each chunk is for but yk yk.
CSS is a different beast I barely understand. The parts of code where it starts stacking on top instead of being horizontal is css and it's basically how you do fancier things to your code, it's linked to stuff you already have down. So like changing the background in the body text box or something, you can only do so much in there. Css targetting the body text box is where you can level it up. Again the sadgrl layout builder has notes so you're not completely blind in there. There's also 100% so many resources to explain what all these words mean, my mmethod is incredibly avoidant I don't know what flex is I haven't needed to fight her yet ect ect.
Sorry if this is confusing this is just my hack and slash understanding atm. Be humbled by code I've spent too long trying to fix up hysterical margin issues just because I had a random apostrophe somewhere or because I tried to spell it colour and not color ect.
33 notes
·
View notes
Text
◢◣Welcome!◢◣
Greetings from me, Tap!! I’m a self-taught multifandom artist, amateur webmaster, and abstract character designer. I (plan to) post things like complete pieces, digital paintings, wips, design processes, ramblings, headcanons, maybe even trinkets I collect! We’ve got it all!!!!
Fun fact: I don’t have a pc, everything I do is on iPad.
I’ve decided expand my presence to tumblr for multiple reasons.
The Instagram algorithm is absolute ass, and trying to please it is quite impossible.
I wanted to share more things that don’t fall under the “finished pieces” umbrella that I couldn’t really post before. I mean I DO post stuff like that on my spam account, but only 2 people and a rock see it.
When it comes to my more obscure interests, it’s easier to find folk with said interests on here than probably anywhere else.
I am now cringe i am now free
Fandoms (my taste is all over the place):
Current fixations:
LuLuYam, Cult of the Lamb, Chonny Jash, Good Omens, ENA
Other notable fixations/fandoms:
Camp Here & There
Cuphead
Deltarune
Ghosts (BBC)
OMORI
Ooblets
Our Flag Means Death
Re-Animator
Slime Rancher
Splatoon
Yume Nikki
Music I find quite enjoyable:
Cojum Dip
DEVO
Food House
Lemon Demon
Logan Whitehurst
Miracle Musical
Oingo Boingo
Pink Floyd
Ride the Cyclone
Talking Heads
Tally Hall
The Caretaker
Will Wood
Yuno Miles [mostly /j]
Tags
#taps art - (more complete) Art. Pretty self explanatory.
#taps merch updates - Updates on new or restocked stuff I sell.
#taptorials - Art tutorials about my process.
#design lore - My thought process when making my blorbos.
#abstracities - My silly oc universe with the same name. Most of the cast is based off various music fixations I’ve had over the past few years!
#overlayposting - Anything (mostly doodles) of my sona, Overlay.
#mjs trinkets - For sharing trinkets I find/own (this tradition originated from my insta spam account).
#taps asks - Asks. Yea.
CWs
My art can sometimes contain subjects such as eyestrain, body horror and gore. Posts with these won’t be too frequent and will be CW’d, so don’t worry too much! But I just wanted to give a heads up.
Things to Note:
What I draw is heavily based on what my autism fixates on. I wouldn’t recommend following for just one fandom since what I draw can very heavily fluctuate.
I have like. 8742578 different art styles. It fluctuates a lot and I’m always trying new shit out.
Feel free to draw fanart of any of my blorbos !!! Just don’t be weird. No NSFW or anything like that.
As of right now I’m new to Tumblr. Being autistic makes it kinda hard to learn UI/website etiquettes, so please be patient with me !!!
If there’s any problems with the custom theme, pls let me know!! I know there’s not too many drastic CSS changes but still. Plus I’m pretty sure the theme doesn’t even show up on mobile so fuck it we ball
If I ever wake up one day and think “damn this intro sucks ass”, i will update it.
Thanks for reading, enjoy your stay !!
20 notes
·
View notes
Text
Mastering Web Development: A Comprehensive Guide for Beginners
In the vast landscape of technology, web development stands as a crucial cornerstone. It encompasses the art and science of building websites, ranging from simple static pages to complex web applications. Whether you're aiming to pursue a career in software development or seeking to enhance your digital presence, understanding web development is essential.
In this comprehensive guide, we'll take you through the fundamental concepts and practical skills needed to master web development from scratch. Let's dive in!
1. Understanding HTML (Hypertext Markup Language)
HTML serves as the backbone of every web page, providing the structure and content. It uses tags to define different elements such as headings, paragraphs, images, and links. By mastering HTML, you'll be able to create well-structured and semantically meaningful web documents.
2. Exploring CSS (Cascading Style Sheets)
CSS is the language used to style HTML elements, enhancing their appearance and layout. With CSS, you can customize colors, fonts, spacing, and more, giving your website a polished and professional look. Understanding CSS selectors and properties is essential for effective styling.
3. Introduction to JavaScript
JavaScript is a versatile programming language that adds interactivity and dynamic behavior to web pages. From simple animations to complex web applications, JavaScript powers a wide range of functionalities. Learning JavaScript fundamentals such as variables, functions, and events is crucial for web development.
4. Building Responsive Websites
In today's mobile-centric world, it's essential to create websites that adapt seamlessly to various screen sizes and devices. Responsive web design achieves this by using fluid grids, flexible images, and media queries. Mastering responsive design principles ensures that your websites look great on desktops, tablets, and smartphones.
5. Introduction to Version Control with Git
Git is a powerful tool for tracking changes in your codebase and collaborating with other developers. By learning Git basics such as branching, merging, and committing, you can streamline your development workflow and effectively manage project versions.
6. Introduction to Front-End Frameworks
Front-end frameworks like Bootstrap, Foundation, and Materialise provide pre-designed components and stylesheets to expedite web development. By leveraging these frameworks, you can create responsive and visually appealing websites with less effort and code.
7. Introduction to Back-End Development
While front-end development focuses on the user interface, back-end development deals with server-side logic and database management. Learning back-end languages such as Node.js, Python, or PHP enables you to build dynamic web applications and handle user interactions efficiently.
8. Deploying Your Website
Once you've developed your website, it's time to make it accessible to the world. Deploying a website involves selecting a web hosting provider, uploading your files, and configuring domain settings. Understanding the deployment process ensures that your website goes live smoothly.
9. Conclusion and Next Steps
Congratulations on completing this comprehensive guide to mastering web development! By now, you've gained a solid understanding of HTML, CSS, JavaScript, version control, frameworks, and deployment. As you continue your journey in web development, remember to stay curious, practice regularly, and explore advanced topics to further refine your skills.
Resources for Further Learning:
Online tutorials and documentation
Interactive coding platforms
Community forums and discussion groups
Next Steps:
Explore advanced topics such as web performance optimization, server-side rendering, and progressive web apps.
Build real-world projects to apply your skills and showcase your portfolio.
Stay updated with the latest trends and technologies in web development through blogs, podcasts, and conferences.
With dedication and perseverance, you'll continue to evolve as a proficient web developer, creating innovative solutions and contributing to the ever-changing digital landscape . Happy coding!
4 notes
·
View notes
Text
youtube
Mastering CSS: Complete Guide to Styling Web Pages | Learn CSS for Web Development
In this comprehensive CSS tutorial, we delve into the world of Cascading Style Sheets, covering styling techniques, selectors, declarations, properties, and values in CSS. Whether you're a beginner or a seasoned professional, this video is designed to equip you with a thorough understanding of CSS. We explore advanced CSS concepts such as descendant combinators, pseudo-classes, pseudo-elements, @rules, shorthands, functions, and more. By the end of this video, you'll have the skills to style your HTML documents with precision and finesse. Watch now and take your web development skills to the next level!
#CSS#WebDevelopment#LearnCSS#FrontEndDevelopment#CSSStyling#CSSTutorial#CSSGuide#Coding#WebDesign#HTML#JavaScript#Youtube
3 notes
·
View notes