Skip to content

Instantly share code, notes, and snippets.

@tech-chieftain
Last active August 8, 2023 08:30
Show Gist options
  • Save tech-chieftain/cb258f6a2f303d0573ca8ff459a191ad to your computer and use it in GitHub Desktop.
Save tech-chieftain/cb258f6a2f303d0573ca8ff459a191ad to your computer and use it in GitHub Desktop.

Questions: Frontend File Setup

Answer the following questions with your group:

  • How do you link a JavaScript file to an HTML document?
  • How do you link a CSS file to an HTML document?
  • What are the roles of HTML, CSS, and JavaScript on a webpage?
  • What is the DOM? How is it related to HTML, CSS, and JavaScript?
  • How does HTML get rendered into DOM?
  • What are elements?
  • What are attributes in HTML?
  • How can we interact with HTML?
@ramizapk
Copy link

  1. by using script tag. example : <script src="./src/index.js"></script>

  2. by using link tag. example :

  3. HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
    CSS is used to control presentation, formatting, and layout.
    JavaScript is used to control the behavior of different elements.

4.DOM is a W3C (World Wide Web Consortium) standard. It is a platform and language independent interface standard that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

When a web page loads, the browser builds the page’s DOM tree. In this way, we can change all HTML properties on the page, remove existing HTML elements and attributes, add new HTML elements and attributes, or change all CSS styles on the page with scripting languages ​​such as JavaScript.

5.HTML is rendered into the DOM by a web browser when a webpage is loaded. The browser parses the HTML code and creates a tree-like structure that represents the elements and attributes of the webpage.

  1. Elements are the basic building blocks of an HTML document and are represented by tags, such as

    ,

    , and

    .

  2. Attributes provide additional information about an HTML element and are used to define properties and behaviors of the element. They are added to the opening tag of an element and are in the form of name-value pairs. Example: .

  3. To interact with HTML, you can use JavaScript to manipulate the elements and attributes of the webpage using the DOM API. This includes methods such as getElementById, querySelector, and innerHTML. Additionally, you can also use JavaScript events to respond to user interactions, such as a button click.

@rrawann
Copy link

rrawann commented Jan 24, 2023

1 ===> <script src="myscripts.js"></script>
2 ===> rel="stylesheet" href="styles.css"
3 ===> Html >> structures , Css >> styles , Js >> for interactive
4 ===> The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.
5 ===> When a web page loads, the browser builds the page’s DOM tree. In this way, we can change all HTML properties on the page, remove existing HTML elements and attributes, add new HTML elements and attributes, or change all CSS styles on the page with scripting languages ​​such as JavaScript.
6 ===> Tags of html.
7 ===> Attributes usually come in name/value pairs like: name="value"
8 ===> Using JavaScript

@BkrTech101-InnovaMind
Copy link

BkrTech101-InnovaMind commented Jan 24, 2023

1- <script src=""></script>

2- <link href="">

3- HTML: Human body comprising bones (skeleton) and the flesh
CSS: Clothes, Shoes, Perfume, Shades, Lipstick, Mascara, Foundation and every other thing that makes you look extra good ;)
JavaScript: Everything involving your movement (how you eat, laugh, frown, run, walk, sit and all)

4- DOM is a logical model that can be implemented in any convenient manner.It is based on an object structure that closely resembles the structure of the documents it models.

5- Data is sent over the Internet as byte packets. The browser must convert these data bytes into a form it understands. Firstly, bytes are converted to HTML characters and then to Tokens. In the next step, Tokens are converted into nodes. Nodes are different objects with certain properties. After the nodes are created, the DOM tree is created.

6-A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all of these using CSS, or interact with them using JS.

7- HTML attributes are special words used inside the opening tag to control the element's behaviour.

8- 1. Encourage Social Sharing
2. Add Quizzes, Surveys, and Polls
3. Use Gamification
4. Suggest Relevant Links
5. Invite Conversations
6. Publish User-Generated Content
7. Run a Giveaway

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment