Skip to main content

Web Developement - Level 1

The Start Off: 

Course Duration: Mastering web languages (HTML, CSS, and JavaScript) usually takes a year. 

Difficulty: Web development is like maths, it requires lots of practice and focus. If you are taking Computer science or Software, then this course is your option. Since you would be able to earn before you are in your 2nd or 3rd semester. 

If you plan to pursue a different field, then this course isn't for you. Because it can divert your focus, and you wouldn't be able to practice daily, which it requires. 

Importance of Practice: Since practice is crucial while learning web languages, various tests and assignments would be assigned. 

Personal Approach: 

My approach is different than others in the sense that:

1. I would explain the literal or linguistic meaning of the terms or code used in the programming languages. 

2. Building a proper foundation, so you can understand the significance of writing each code.  

Importance of learning the etymologies of the terms: 

Etymologies refer to the history of words used in our language, how they changed over time, and the literal meaning of the words. 

For example, the word "nice" comes from a Latin word that means "nescience", which means "not knowledge".  It was used to call someone ignorant, but nowadays, it is used to call someone a good person.

1. It would make remembering the terms or code easier. 

2. It makes it easier to understand the concepts. 

Study Topics: 

1. Breakdown of the HTML Term (HyperText Markup Language)

a. HyperText: 

Hyper (prefix): Something above its normal state (abnormal).

HyperText refers to clickable (abnormal) Text, which links you to another website, or somewhere inside a webpage. 

Practical Example: This is a HyperText. 

b. Markup: 

It refers to the marking of the Text Document. Similar to how we may add various markings while reading a book or writing notes. 


c. Language: 

Language is essentially defined as a "Tool for Communication." 

We learn and use programming languages to communicate with a computer so that it can perform tasks for us. 

Anatomy of a Programming Language:

Syntax, Structure, and Semantics are the three components of a programming language. 

1. Syntax refers to the rules of a language. 

2. Structure refers to the appearance of the code. (general example: Arabic vs English script)

3. Semantics refers to the meanings of the words used in our languages. 

Rules (Syntax) for HTML Language: 

1. The code or sentences should be enclosed with opening and closing tags. (similar to starting an English sentence with a capital letter, and ending it with a full stop)

2. Extra spaces or new lines would be considered "1 space".

2. Anatomy of an HTML Tag: 

Tags are formed by choosing specific texts or symbols and then systematically adding attributes (Sifaat) based on a predetermined set of rules. 

Types of Attributes: 

Attributes can be categorized into 2 types.

1. Internal Sifaat: 

The Sifaat (attributes) which are pre-defined for an HTML Tag. 

Example: Center tag vs Aside tag

Note: Internal Styling attributes can be changed using the CSS Code. 

2. External Sifaat (Singular: Sifat):

The Sifaat which are added externally to HTML tags to improve their functionality. 

Note: The external attributes are simply called "Attributes" in HTML. 


3. Essential Tags: 



4. HTML Standards: 

HTML Specifications is another word for HTML Standards. HTML Standards are the official documents that define HTML's syntax, structure, and semantics. The latest HTML Standard is HTML5.


5. BoilerPlate:

It refers to a "Reusable Text".



Etymology of the BoilerPlate: 

A boiler is a cylindrical shaped metal, in which we boil water. And the word plate here referred to metal, on which, "Reusable Text" was written, for the mass production of the same or similar news article. 

Breakdown of the BoilerPlate Code: 

a. Reasons for writing <!Doctype HTML>:

The only reason why we write <!DOCTYPE HTML> is so, that the browser knows which HTML DOCUMENT TYPE or Standard my HTML file is following since there are many types of HTML document now. 

It is as important to define the document type as it is to pick up an essay type (e.g., descriptive, narrative, or argumentative essay) before writing an essay. 

b. Reasons for using the HTML Tag:

1. For following the standard.

2. For Styling. 

6. HTML Validators

An HTML validator is a tool that checks the validity of the HTML code. In other words, it checks whether the HTML code is consistent with the HTML Standard or not. 

Link: https://validator.w3.org/



7. Outdated HTML Tags: 

If you use older HTML standards now, and if one or many browsers don't support it, then your line of code won't work or be displayed. For Example: the center tag. 



8. Reason for using index.html:

As the name suggests, the browser selects the index.html first. 

9. How to create a simple website?

Describing the type of file (.html) is necessary for the (HTML-Based) website to be displayed. 


Assignment: 

1. Download the VS code. 

2. Inspect and view the source of your favorite websites (especially mine).

3. Make a website (using the essential tags). 

- Heading Tags.

- Paragraph Tags.

- Use ordered or unordered list.

- Anchor tag (link tag).

- Image tag. 










Comments

Post a Comment

Popular posts from this blog

Soft skills and the Seerah

Soft Skills: Soft skills refer to personal traits and abilities (Insaani Sifaat) that enable us to communicate, interact, and collaborate effectively.  You can think of soft skills as the qualities a person shows during interactions with others (Muamalat). Soft Skills in Action: A practical example of soft skills can be seen in a team project, whether at work or in a classroom setting.  Consider a group of students collaborating on a science project. Each student brings a unique ability to the table: one is skillful at research, another at organization, another at presenting, and so on. However, beyond these technical skills , it’s their soft skills—such as communication , empathy , adaptability , and teamwork —that drive the project’s success.  Here’s how: Communication : Each student listens attentively to others' ideas and expresses their own thoughts clearly. This helps prevent misunderstandings and ensures everyone is on the same page. Empathy : They provide support ...
Post a Comment
Read more