COURSE

HTML & CSS in Hindi| Learn & Create your own portfolio website in 20 hours in HINDI!

Unlock the world of web development with our in-depth HTML and CSS course, available as a free PDF download. From understanding headers & footers in HTML and CSS to mastering the art of linking styles, our 'HTML & CSS: Design and Build Portfolio Website' program covers it all. Learn how to create a website from scratch, enhance your skills with practical tasks, and access a free online HTML course. Start your journey with our comprehensive HTML and CSS online course – your gateway to web development expertise.

16 Blogs

18 Videos

14 Tasks

InstaLearn

Scan the QR to see details

Certificate of Achievement

is awarded to

John Doe


For Successfully completing

HTML & CSS in Hindi| Learn & Create your own portfolio website in 20 hours in HINDI! Course

Instalearn congrats you for completing the HTML & CSS in Hindi| Learn & Create your own portfolio website in 20 hours in HINDI!

Course Duration: undefineddays

No. of Submissions: undefined

Date of Issue: 21 Feb, 2024

You will learn to:

Skills:

    Prerequisites:

      Technologies:

      Introduction to HTML

      Video

      10 min

      Introduction to HTML

      Welcome to the first module of the 'HTML & CSS | Learn & Create your own portfolio website in 20 hours!' course. In this introductory section, we will dive into the world of HTML, the foundational language used to create web pages. Whether you are a complete beginner or looking to refresh your skills, this module is designed to equip you with the knowledge and tools to start building your online presence.

      What You Will Learn

      • The history and importance of HTML in web development.
      • Understanding the basic structure and syntax of HTML documents.
      • How to use various HTML tags to create content, including headings, paragraphs, lists, links, and images.
      • Best practices for writing clean, accessible, and SEO-friendly HTML code.
      • How to set up a simple HTML file and view it in a web browser.

      Course Structure

      This module includes a series of interactive lessons, video tutorials, and hands-on exercises that will guide you through the basics of HTML. By the end of this section, you will have created a simple web page and be ready to enhance it with styling and layout techniques in the upcoming CSS modules.

      Prerequisites

      No prior experience with HTML or web development is required. All you need is a computer, a text editor (we will recommend some free options), and an eagerness to learn. We will walk you through every step of the process.

      Let's Get Started!

      Embark on your journey to becoming a web developer with this essential HTML primer. By the end of this module, you'll have a solid understanding of HTML and be well on your way to creating your very own portfolio website. Let's begin!

      HTML Elements and Attributes

      Video

      20 min

      Buttons in HTML

      Video

      10 min

      Task : Introduction to tags and tags usage

      External

      20 min

      Recap the learnings

      Video

      10 min

      HTML Document Structure

      In this section of the 'HTML & CSS | Learn & Create your own portfolio website in 20 hours!' course, we will delve into the foundational elements that make up the structure of an HTML document. Understanding the HTML document structure is crucial for creating well-organized and accessible web pages.

      Key Concepts Covered:

      • DOCTYPE Declaration: Learn about the importance of the DOCTYPE declaration and how it informs the browser about the type of HTML used in the document.
      • HTML Tags: Discover the role of the <html> tag as the root element that wraps all the content on the web page.
      • Head Section: Explore the <head> section, which contains meta-information about the document, such as the title, character set, stylesheets, and scripts.
      • Body Section: Dive into the <body> section, where all the visible content of the web page, including text, images, and multimedia elements, is placed.
      • Structural Elements: Get to know the structural HTML elements like <header>, <footer>, <article>, and <section> that help organize the content and enhance accessibility.
      • Nesting and Hierarchy: Understand how elements are nested within each other to create a hierarchy that defines the structure and layout of the page.

      By the end of this module, you will have a solid grasp of the HTML document structure, enabling you to create the skeleton of your portfolio website. You will be equipped with the knowledge to use semantic HTML tags effectively, ensuring your website is well-structured and search engine friendly.

      Practical Application:

      Throughout this section, you will engage in hands-on exercises to apply what you've learned. You will start by creating a basic HTML document structure and progressively enhance it by adding various elements and attributes. By the end of this section, you will have a clear understanding of how to structure your HTML documents to build a strong foundation for your portfolio website.

      Task: Creating a Basic HTML Page

      External

      60 min

      CSS Basics

      Video

      10 min

      CSS Basics

      Welcome to the 'CSS Basics' module of our comprehensive course, 'HTML & CSS | Learn & Create your own portfolio website in 20 hours!' In this section, you will dive into the world of Cascading Style Sheets (CSS), the language used to style and layout web pages. Whether you are a complete beginner or looking to refresh your skills, this module is designed to equip you with a solid foundation in CSS.

      Throughout this module, you will learn about:

      • Selectors: Understand how to target HTML elements to apply styles effectively.
      • Properties and Values: Get to know the wide range of CSS properties you can use to control the look of your website.
      • Colors: Learn about color theory and how to apply colors to your website using different methods like HEX, RGB, and named colors.
      • Fonts and Text: Discover how to incorporate and style fonts for improved readability and aesthetic appeal.
      • Box Model: Master the box model concept to control margins, borders, padding, and content space.
      • Layout Techniques: Explore various layout techniques including Flexbox and Grid to create responsive designs.
      • Responsive Design: Learn how to make your website look great on devices of all sizes using media queries.
      • Best Practices: Gain knowledge of best practices in writing clean, efficient, and maintainable CSS code.

      By the end of this module, you will have hands-on experience with styling basic web components and layouts, setting you up for success as you progress through the course. You'll be one step closer to creating your own visually appealing portfolio website. Let's get started on this exciting journey into the world of CSS!

      CSS Box Model

      Video

      20 min

      CSS Recap

      Video

      30 min

      CSS Positions

      Video

      30 min

      CSS Box Model

      The CSS Box Model is a fundamental concept in web design and development, forming the building blocks of your portfolio website layout. It is a box that wraps around every HTML element, and it consists of four parts: the content, padding, border, and margin.

      • Content: This is the area where your text, images, and other media are displayed. It's the core part of the box model where the actual content resides.
      • Padding: Padding is the space between the content and the border. It can be used to give the content some breathing room inside the element's box. Padding is transparent and does not have a background color unless one is specified.
      • Border: Surrounding the padding (if any) and content is the border. The border wraps the content and padding with an outline that can be styled in various ways (solid, dotted, dashed, etc.), thicknesses, and colors.
      • Margin: Margin is the outermost layer and represents the space between the border of one box and the adjacent elements. Unlike padding, margins are not part of the element's box, and therefore the area is transparent.

      Understanding the CSS Box Model is crucial for arranging elements on your webpage with precision. It allows you to control the spacing and size of elements, and how they interact with each other. In this course, we will dive deep into each aspect of the Box Model, exploring how to manipulate margins, borders, padding, and content to achieve a well-structured and visually appealing portfolio website.

      By mastering the CSS Box Model, you'll be able to create complex layouts with ease, ensuring that your portfolio website looks great on any device. Get ready to harness the power of CSS to bring your web design ideas to life!

      Task: Position the Cubes

      External

      0 min

      Combining and chaining CSS Selectors

      Video

      10 min

      Introduction to CSS Layouts

      Welcome to the 'Introduction to CSS Layouts' section of our comprehensive course, 'HTML & CSS | Learn & Create your own portfolio website in 20 hours!'. In this module, we will delve into the foundational concepts that will empower you to structure and design the layout of your web pages with precision and creativity.

      Understanding CSS layouts is crucial for any aspiring web developer or designer. It is the skeleton that supports the visual components of your website, ensuring that content is organized and presented in a way that is both aesthetically pleasing and user-friendly. Throughout this section, we will explore different layout techniques, starting from the basics of the box model to more advanced concepts such as Flexbox and Grid.

      Key topics we will cover include:

      • The Box Model: Understanding how padding, borders, and margins work to structure your content.
      • Positioning: Learn how to control the position of elements using static, relative, absolute, and fixed positioning.
      • Display Properties: Dive into the display property and discover how inline, block, and inline-block affect the flow of your document.
      • Flexbox: Get hands-on experience with this powerful layout mode that makes it easy to design flexible responsive layout structures without using floats or positioning.
      • CSS Grid: Step into the world of two-dimensional layouts with CSS Grid, which allows for complex designs with minimal code.
      • Responsive Design: Understand how to create layouts that work on any device size using media queries.

      By the end of this module, you will have a solid understanding of how to use CSS to create layouts that are both functional and visually engaging. You will be equipped with the skills to tackle any web design project with confidence, and you'll be one step closer to creating your own stunning portfolio website.

      Join us as we embark on this journey through the world of CSS layouts, and take your first step towards mastering the art of web design.

      Basics of Grid

      Video

      30 min

      Learn how to add animations and transitions to your website using CSS.

      Expand Your Grid skills

      Video

      20 min

      CSS Transformations

      In this section of the 'HTML & CSS | Learn & Create your own portfolio website in 20 hours!' course, we delve into the powerful feature of CSS Transformations. Transformations allow you to modify the appearance of elements in a variety of ways without altering the actual content or layout flow of the document. This is crucial for creating dynamic, interactive, and visually appealing websites.

      Throughout this module, you will learn about different types of transformations such as:

      • Translate: Move an element from its current position on the x, y, or z axis.
      • Rotate: Rotate an element clockwise or counterclockwise around a given point.
      • Scale: Increase or decrease the size of an element.
      • Skew: Distort elements on the horizontal or vertical axes.
      • Matrix: Combine all transforms into one using a matrix function.

      We will also cover the syntax and properties associated with CSS transformations, such as transform-origin and transform-style. Practical exercises will help you understand how to implement these transformations to create engaging visual effects and improve user experience on your portfolio website.

      By the end of this module, you will have a solid understanding of how to use CSS transformations to enhance the interactivity and design of your web projects. You'll be equipped with the skills to create more sophisticated layouts and animations that will set your portfolio apart from the rest.

      Task: The Grid Problem

      External

      20 min

      CSS Transitions

      In this section of the 'HTML & CSS | Learn & Create your own portfolio website in 20 hours!' course, we delve into the captivating world of CSS Transitions. These are the magical touches that can bring your website to life with smooth and eye-catching effects. CSS Transitions allow you to change property values smoothly (over a given duration) when a specified event is triggered.

      Throughout this module, you will learn the fundamentals of CSS Transitions, starting with the syntax and the four transition-related properties: transition-property, transition-duration, transition-timing-function, and transition-delay. We will explore how to implement these properties to control the timing and speed of the transitions, ensuring they complement the overall design of your portfolio website.

      Practical exercises will guide you through the process of creating subtle hover effects, animating the layout of elements on your page, and enhancing the user experience with feedback on user interactions. By the end of this module, you will have the skills to add professional-looking transitions to your navigation menus, buttons, and other interactive components of your website.

      With the knowledge gained from this section, your portfolio website will not only showcase your work but also demonstrate your understanding of dynamic, responsive web design. Get ready to make your website not just a collection of pages, but a seamless and engaging journey for your visitors.

      Placeholder

      HTML & CSS in Hindi| Learn & Create your own portfolio website in 20 hours in HINDI!


      Lifetime Access
      Course Completion Certificate
      No Expiration Date

      16 Blogs

      18 Videos

      14 Tasks


      Purely online

      No setup

      24/7 assistance

      AI code review

      Github integration

      Live deployment

      Similar Courses Offered by Us