First you need to focus on how the thing are working why I'm gonna write these things into the code, syntax and right way to write. Same to the CSS part as well.

What is HTML and element?
HTML stands for Hyper Text Markup Language. It is the standard language used to create and design websites on the internet. HTML uses a system of tags to structure the content of a web page, such as headings, paragraphs, images, links, and Explore More.

An element in HTML refers to a specific part of a web page defined by a set of tags. Each element has a specific purpose and helps organize the content on a webpage. Elements can be things like headings, paragraphs, lists, images, forms, and more. By using different elements, web developers can create well-structured and visually appealing websites.

What is attributes, and how to use them?
Attributes are characteristics or properties that can be assigned to different elements. In the context of programming or coding, attributes provide additional information about a specific element, such as text color, size, or alignment on a webpage.

To use attributes, you typically specify them within the opening tag of an HTML element by including the attribute name followed by an equals sign and the attribute value in quotation marks. For example, if you want to set the color of a paragraph to red, you would use the <style> attribute like this: <p style="color:red;">This is a red paragraph.</p> . This code sets the color attribute of the paragraph element to red.

By using attributes, you can customize the appearance or behavior of elements on a webpage to make them look and function the way you want.

How to create hyperlink in HTML?
In HTML, you can create a hyperlink by using the <a> tag. Inside the <a> tag, you specify the URL you want to link to using the href attribute, and you can also add the text that will be displayed as the link between the opening and closing <a> tags. This allows users to click on the text and be directed to the specified URL.

HTML Entities.
HTML Entities are special codes used in HTML to display characters that have a special meaning in code, like < and >. Instead of using these characters directly, you can use HTML entities to show them on a webpage without causing any issues with the code.

<!-- Result: <h1>hello world</h1>  -->
 &lt;h1 &gt; hello world &lt;/h1&gt;

What is HTML nesting?
HTML nesting refers to the practice of placing one HTML element inside another. This means that you can have elements like paragraphs, lists, or headings contained within other elements on a web page. Nesting helps organize content and structure on a webpage by creating a hierarchy of elements. It is important to properly close nested elements to ensure the webpage displays correctly.

<section>
    <nav>
        <ul>
            <li><a href="">nav links</a></li>
        </ul>
    </nav>
</section>

HTML semantics refers to the meaning and structure of the content within a web page. It involves using HTML elements to properly define the different parts of a webpage, such as headers, paragraphs, lists, and more. By using semantic HTML, you make it easier for search engines to understand your content and improve accessibility for people using assistive technologies like screen readers. The benefits of using HTML semantics include better search engine optimization (SEO), improved accessibility for all users, easier maintenance and updating of websites, and clearer code that is easier for other developers to understand and work with. Overall, HTML semantics help create a more organized, user-friendly, and efficient website.

• HTML Table, ul, ol, li
• What and how to use iframe, audio, video tags?
• HTML forms use <input> and <label> elements, various input types, and essential form and input attributes.

What is CSS and types?
CSS stands for Cascading Style Sheets. It is used to style and design web pages by controlling the layout, colors, fonts, and other visual aspects of a website.
There are three types of CSS:

Inline CSS: This type of CSS is applied directly within the HTML element using the style attribute. It affects only that specific element.

Internal CSS: Internal CSS is placed within the <style> tag in the head section of an HTML document. It applies styles to the entire page.

External CSS: External CSS is stored in a separate file with a .css extension. This file is linked to the HTML document using the <link> tag. External CSS allows you to apply styles across multiple pages on a website.

What is property:value; in CSS?
In CSS, property:value; is a way to style elements on a webpage. The property represents the aspect of the element you want to change, like its color or size, and the value is what you want to set that property to, such as red for color or 20px for size. By using this format in CSS, you can customize how elements look on a website.

Example:

 .className {
  color:red;
  font-size: 20px;
  background-color: yellow;
}

CSS specificity and priority order.
It likely discusses how CSS rules are applied to elements on a webpage based on their specificity and the order in which they are written in the CSS code. Specificity refers to how specific a CSS rule is to a particular element, and priority order determines which rule takes precedence when multiple rules conflict with each other.

What is box-model in CSS?
The box model in CSS is a way to understand how elements on a webpage are structured and spaced out. It consists of four main parts: content, padding, border, and margin. The content is the actual information or visuals inside the element, while padding is the space between the content and the border. The border outlines the element, and the margin is the space outside the border that separates the element from other elements on the page. Understanding the box model helps developers control the layout and spacing of elements on a webpage.

Basic properties usages related to:

• Text formatting
• Background modify
• List modify
• Creating Box and alignments etc.
• CSS units

What is CSS selectors and types? and how to use them?
CSS selectors are used in web development to target specific HTML elements and apply styling to them. There are different types of CSS selectors such as class selectors, ID selectors, element selectors, attribute selectors, and pseudo-class selectors. Each type of selector allows you to target elements in different ways. To use CSS selectors, you need to write the selector followed by curly braces { } where you specify the styling properties you want to apply to the selected elements.

Layout building with:

• Display Grid and Helping properties
• What is RWD (Responsive Web Design)?
• What is Breakpoints?
• What is media query and how to use them?
• How to use :root and variables in CSS?
• Local and Global root variables.
• Transforms, Transitions, and Animations

These topics are good to start front-end development's journey and you will able to build more then basic static to responsive layouts.

Always stick with the genuine document like MDN, for better and right knowledge. And my dear noobs, now you have to follow the reading process as well, it's ok if you don't read too much in your school time or you don't have fabulous marks to show. From the day one of the front-end development make a habit to reading documents or relative topics, yes you can go with "You Tube" source as well but document should be on the top and number one priority.