Webdev - Blog Posts

Dev Community: Writing Clean Code ...

DEV Community

Writing Clean Code: Best Practices and Principles

Introduction Writing clean code is a fundamental skill for every software developer. Clean...

Post #82: Dev Community, Mark MFonido, Writing Clean Code: Best practices and principles, 2023.

2500 beğeni!

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