Html Css - Blog Posts

April O’Neil Webpage💚💛

Hey all! So I’ve been taking Web Development in college, and my final project for this course was to code a kinda resume webpage for a character so I chose Rise April! I was quite happy with how it’s looking so far so decided to share it.

Let me know what you think :)

I'm gonna start posting about my under construction site to motivate myself

It's been a long time coming...

I've been gone for a really long time because I had a lot of studying to do for tests (because I'm not trying to fail) and through all that stress I might have maybe forgoten about Tumblr. But I'm back! So please help me choose a code.

lots of luv <3,

Swiftie codes

This was a code request from @hollyjollycodes so that's evermore from my Taylor Swift album series. Hope you like it!!

PLEASE KEEP THE CREDITS

link

Edit: the code looks like crap on codepen but trust me it looks so much better when you put it on WoX <3

LOVER LESSON CODE

so this was a code request from @effiemyrtle so yeah um... so that's lover from my Taylor Swift Codes series.

Keep the credits (or I'll hunt you down ⚆_⚆)

Link one (with scroll)

Link two (without scroll)

Overview code 1989

Hello, lovelies!!

I hope ya'll are great! So I am doing this thing where I'm making code inspired by Taylor Swift albums, the last time I did TTPD and this time I'm doing 1989! I hope you like this code!

don't remove credits <3

Link

TTPD BS, PT and Book code <3

Straight from the tortured poets department

Link <3

Y2K book code

Hello Lovlies!!

It's been a reeeeeeally long time since I posted a code (5 months to be exact). I mostly been posting swiftie stuff, but that is now separated from my codes! Anyways, this code has lost of space for images and it's really easy to edit. This code can also be used as a backstory or a profile text if you try hard enough! You can change the way you include the "by swiftieing 101 codes" part, but it must still be visibal because I work really hard to make this codes and I would like credit for it.

Thank you for reading

P.S. If you do use my code, send me a picture! I would love to see what you made!

Link

demo

Slay w/ me - backstory

Hello lovelies!

This is the matching backstory for Slay w/ me because it would be a crime if I didn't! If you have ever made a backstory/profile text without a matching backstory/profile text then you must be very ashamed of yourself! Go fix that mistake now! Anyways, enjoy the code <3 (book code coming out soon!)

Link

PLEASE KEEP THE CREDITS

~Basic Codes

Slay w/ me - Profile Text

Hello Lovelies!

This is my new favourite code ever!!! This code also took a really loooooong time to make, because I lost the code then I had to remake it and then hurt my arm so had to code the updated code with one hand which is always fun xD Okay anyway, the BS is coming out soon! Enjoy!

Link

PLEASE KEEP THE CREDITS!

~Basic Codes

TALK TO ME!

Hello Lovelies,

It has been a long time since I posted a code! I know! That's because I have been feeling so uninspired to code something, and I have also been running out of ideas! So for the 5 people that use my codes, PLEASE GIVE ME SOME IDEAS OF CODES! I am also working on editing my Tumblr site so a lot of new changes! anyway, enjoy the code <3

EDIT: This could also be used for an incorrect quote wall post but I'm not sure it actually works

EDIT #2: It does not work on wall posts but I will edit it to make sure it does!

Link-Link 2 (link 2 works on wall posts)

PLEASE KEEP THE CREDITS!

~Basic Codes <3

A really old newspaper

Hello Lovelies!

The second code is crashing in! this code is an old article code, but you can also use it for things like a lesson or a wall post! I worked really hard to make it so I hope you like it! Enjoy!

PLEASE KEEP THE CREDITS!

Link

Side Note: In code pen, the code looks kind of weird because it is stretched out but it looks much better when you post it!

~Basic Codes

Lovely lesson code <3

Hello everyone!

I hope all of you are doing great! This is the very first wox code that I ever made! I have always dreamed of making wox codes and letting everyone enjoy them! Anyways more about the code, it is lesson code but I think you can also use it as an article. I don't really know what else to write so just enjoy the code!

link

Please keep the credits!

~Basic Codes

Hey hello!!!

Do you book recommendations for html or Java??

Hope you're ok

Hey there!

Well, I don't really know any books for HTML. But I do know some other resources for it that might be helpful. [I don't know any for Java. Right now, I'm only focusing on frontend development for now.]

W3Schools: This is the only website I suggest for learning any coding language.

Dave Gray [YouTube] HTML 4 hour crash course

Dave Gray [Youtube] CSS 11 hour crash course

Dave Gray [YouTube] JavaScript 8 hour crash course

SuperSimpleDev [Youtube] 6 hour crash course (HTML + CSS)

SuperSimpleDev [YouTube] 22 hour crash course (JavaScript)

Right now, I'm only doing these [trying to] It's going well till now, so I think it would be helpful for you.

Have a great day ! :D

Day 5 [Lists In HTML]

This is a super simple guide for lists.

Line By Line Explanation:

: Used for unordered list

: Used for each item in the list

: Used for ordered list.

Unordered lists will display the list items in bulleted or any other symbol that you specify

Ordered lists will display the list items in numerical order or any other order you specify.

______________________________

Hope it helps :)

Day 4 [Link Tag In HTML ]

Introduction To HTML

Day 2 [Multimedia Elements In HTML]

Day 3 [Table in HTML]

Line By Line Explanation:

: Anchor tag (used for links)

href = It stands for Hyper Text Reference. You paste the URL of the link here

Text between the tags : What the user clinks

The first link will open google in the same tab. If you want the link to open in a new tab, then you use the target attribute.

Target="_blank" : Opens the link in a new tab

Final Output

____________________

Hope it helps :)

Day 3 [Table In HTML]

Day 1 [Introduction To HTML]

Day 2 [Multimedia Elements In HTML]

Line by line explanation:

Defines a table,

border : This attribute adds a simple border to the table.

style : Used to add some styling to the webpage. Can be used with any tag.

Border spacing: Adds space between table cells.

Text-align : Aligns the text in the table.

Contains the header section of the table.

Represents a table row

Represents a table column

Holds the body of the table → main data (menu items).

Used for individual data cells in the table.

<table> <thead> <tr> <th> Column Head 1 </th> <th> Column Head 2 </th> </tr> </thead> <tbody> <tr> <td> Row 1 Data = Column 1 </td> <td> Row 1 Data = Column 2 </td> </tr> </tbody> </table>

Final Output

------------------------------

Hope it helps :)

Day 2 [Multimedia Elements In HTML]

Welcome to day 2 :D

Day 1 [Introduction To HTML]

Line By Line Explanation:

(An attribute is extra info added to an HTML tag. So, is a tag. Src, alt, width and height are the attributes)

Tag : Used to add images to webpages

src : Used to give the URL of the image or the name of the image file

alt : specifies what will appear on the browser in case the image doesn't appear.

Width and height : Specifies the width and height.

Tag : Used to add audio

controls: shows a play/pause bar.

: your audio file (paste your file link there).

Type: Tells the browser what file you're showing it

Tag: Used to add videos

controls : lets users play/pause the video.

width and height: size of the video frame.

: your video file (paste your file link there).

Here's The Output →

Additional Tip : Download these two extensions because they're really helpful.

Live Preview helps you to look your output without having to save it every time you make a change in VS code

Live Server is similar, it just shows you the output on the webpage.

You can search for these two in the extensions icon on the side.

_____________________

Hope it helps. Tomorrow, we'll cover links and lists xD

Introduction To HTML

[Note: You need a text editor to do this. You can use Notepad or Text Edit. But it's so much better to download VS Code / Visual Studio Code. Save it with an extension of .html]

HTML stands for Hyper Text Markup Language

It is used to create webpages/websites.

It has a bunch of tags within angular brackets <....>

There are opening and closing tags for every element.

Opening tags look like this <......>

Closing tags look like this

The HTML code is within HTML tags. ( // code)

Here's the basic HTML code:

<!DOCTYPE html> <html> <head> <title> My First Webpage </title> </head> <body> <h1> Hello World </h1> <p> Sometimes even I have no idea <br> what in the world I am doing </p> </body> </html>

Line By Line Explanation :

<!DOCTYPE html> : Tells the browser it's an HTML document.

<html> </html> : All code resides inside these brackets.

<head> </head> : The tags within these don't appear on the webpage. It provides the information about the webpage.

<title> </title> : The title of webpage (It's not seen on the webpage. It will be seen on the address bar)

<body> </body> : Everything that appears on the webpage lies within these tags.

<h1> </h1> : It's basically a heading tag. It's the biggest heading.

Heading Tags are from <h1> to <h6>. H1 are the biggest. H6 are the smallest.

<p> </p> : This is the paragraph tag and everything that you want to write goes between this.

<br> : This is used for line breaks. There is no closing tag for this.

-------

Now, we'll cover some <Meta> tags.

Meta tags = Notes to the browser and search engines.

They don’t appear on the page.

They reside within the head tag

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Website Description"> <meta name="Author" content="Your Name"> <meta name="keywords" content="Websites Keywords"> </head>

Line By Line Explanation:

<meta charset="UTF-8"> : Makes sure all letters, symbols, and emojis show correctly.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> : Makes your site look good on phones and tablets.

<meta name="description" content="Website Description"> : Describes your page to Google and helps people find it.

<meta name="author" content="Your Name"> : Says who created the page.

<meta name="keywords" content="Website's Keywords"> : Adds a few words to help search engines understand your topic.

_____

This is my first post in this topic. I'll be focusing on the practical side more than the actual theory, really. You will just have some short bullet points for most of these posts. The first 10 posts would be fully HTML. I'll continue with CSS later. And by 20th post, we'll build the first website. So, I hope it will be helpful :)

If I keep a coding post spree for like 2 weeks, would anyone be interested? o-o

my experience of making a neocities website