note: this is not a tutorial on helping you with your friendrewind or other such indieweb pages - it is simply a very basic introduction to html and css as a whole. however, this (along with upcoming tuts) can be used as transferable knowledge to help expand your skill set with making profile layouts on here - stay tuned! xoxo
if you're relatively new to using html/css to build snazzy pages, don't worry - it's really not as daunting as you may first imagine. once you've gotten the basics down, you're pretty much set and all that's left is the limits of your imagination and creativity :3
okay, what you'll need:
- a desktop/laptop computer
- a plain text editor (i use gedit but notepad'll do)
- a nice cup of tea or smthn
first, open your text editor and create a new file, then save it as test.html
we'll dip in and out of this on the regular okay
now we're going to copy/paste all of this stuff here
<!DOCTYPE html>
<html lang="en">
<head>
<title>my test page</title>
</head>
<body>
<h1>HI THIS IS MY TEST PAGE HEADER TEXT</h1>
<p>this is a paragraph tag for paragraph text</p><br>
</body>
</html>
save the file, then open it in ur browser and bam - its a very basic as heck web page lol. dw there will be many tuts following this, and things will improve substantially for you, i promise. also jsyk, all the stuff that can be tweaked with css? that stuff comes after the html/body tags
right now, we only have paragraph text on our test page, so let's just go ahead and tweak the p tag stuff a bit yeah? immediately after the body tag, we're gonna open a brand new style tag and that's where all the css stuff we're gonna add in will go
<style>
p {
color:red;
font-size:24px; }
</style>also, any css you create to alter what is on your page must fall within the style tags. remember also to close the tag when you're done (as shown in the example above)
once you're done, save your test.html page then refresh it in your browser - the paragraphy tag text should now be red and 24 pixels in size. feel free to alter these values, like make the text smaller, change the color, whatever you want really but anyway, that is all for now
next tut will cover f12 (inspect mode), and more advanced css stuffs
ty for read ![]()
Comments
Displaying 0 of 0 comments ( View all | Add Comment )