HTML & CSS

Professional Certification Course to enter in IT Industry with Knowledge and Experience

banner

Complete Course Curriculum

Course Duration: 2-Months

Course Fees: 6000/-

HTML

  • Introduction to the Internet
  • Introduction to HTML Terminology
  • Introduction to HTML Terminology
  • Unicode Transformation Format (UTF)
  • HTML5 Resources
  • HTML5 Resources

  • What’s Different in HTML5?
  • <!DOCTYPE> in HTML5

  • Design Considerations and Planning
  • Basic Tags and Document Structure
  • HTML Tags
  • Head Tags
  • Title Tags
  • Body Tags
  • Metadata
  • Saving an HTML Page

  • Adding a New Paragraph
  • Adding a Line Break
  • Inserting Blank Space
  • Preformatted Text
  • Changing a Page’s Background Color
  • Div Element

  • Headings
  • Comments
  • Block Quotes
  • Horizontal Lines
  • Special Characters

  • Numbered (Ordered) Lists
  • Bulleted (Unordered) Lists
  • Nested Lists
  • Definition Lists

  • What are Links?
  • Text Links
  • Image Links
  • Opening a Page in a New Window or Tab
  • Setting all Links on a Page to Open in a New Window or Tab
  • Linking to an Area on the Same Page (Bookmarks)
  • Linking to an E-mail Address
  • Linking to Other Types of Files

  • Introduction to Images for Webpages
  • Adding Images to Webpages
  • Resizing an Image
  • Alternative (ALT) Text
  • Image Labels

  • Inserting a Table
  • Table Borders
  • Table Headers

  • What is an Iframe?
  • Inserting Iframes
  • Setting Height and Width
  • Using an Iframe for a link target

  • About Forms
  • Sending to E-mail
  • Text Boxes
  • Text Areas
  • Check Boxes
  • Menu Lists
  • Radio Buttons
  • The Submit Button
  • The Reset Button
  • Changing the Tab Order

  • About Video and Audio Files
  • Linking to Video and Audio Files
  • Adding Video
  • Adding Audio
  • Using YouTube to Display Video

  • Troubleshooting

CSS

  • What are Cascading Style Sheets?
  • CSS Syntax
  • Creating an External CSSLinking to a CSS
  • Adding Comments and Notes to a CSS
  • Creating an Internal Style Sheet
  • ID and Class
  • Inline Styling

  • Emphasizing Text (Bold and Italic)
  • Decoration
  • Indentation
  • Transformation
  • Text Alignment
  • Fonts
  • Font Sizes
  • Letter Spacing (Kerning)
  • Line Spacing (Leading)
  • Text Color
  • Margins
  • Padding
  • Borders
  • Styling Links
  • Number and Bullet Styles
  • Sizing Elements
  • Text Wrapping
  • Shadowing

  • Colors
  • Images
  • Fixed Images

  • Opacity
  • Floating Images
  • Image Galleries
  • Image Sprites

  • What is a box model?
  • Margin
  • Padding
  • Border
  • Outline

  • Display and Visibility
  • Grouping and Nesting
  • Dimensions of Elements
  • PositioninG
  • Floating
  • Pseudo-Classes/Pseudo-Elements

  • Vertical Navigation Bar
  • Horizontal Navigation Bar – Inline
  • Horizontal Navigation Bar – Floating

  • Borders
  • Collapsed Borders
  • Table Width and Cell Height
  • Table Color
  • Table Text Element
  • Table Padding

  • What are Transforms?
  • 2D Transforms
  • 3D Transforms

  • Transitions
  • Animations

  • Shorthand Properties

Course NameFees Duration
Complete C Programming Course3000/-45 Days
Complete C ++ Programming Course3000/-45 Days
Core Java Development Course6000/-2 Months
Basic Python Development6000/-2 Months
Basic Android Development6000/-2 Months
Web Designing6000/-2 Months
JavaScript6000/-2 Months
Graphic Designing6000/-2 Months
Digital Marketing6000/-2 Months
PHP & MySQL6000/-2 Months
Internet of Things (IOT)6000/-2 Months
Angular JS6000/-2 Months
Node JS6000/-2 Months
React JS6000/-2 Months
C #6000/-2 Months
Project Development

Have a look on Exciting Project ideas on C Programming

You can build a simple calculator with C using switch cases or if-else statements. This calculator takes two operands and an arithmetic operator (+, -, *, /) from the user, however, you can expand the program to accept more than two operands and one operator by adding logic. Then, based on the operator entered by the user, it conducts the computation on the two operands. The input, however, must be in the format “number1 operator1 number2” (i.e. 2+4).

Using C language, you can also create a student management system. To handle students’ records (like Student’s roll number, Name, Subject, etc.) it employs files as a database to conduct file handling activities such as add, search, change, and remove entries. It appears a simple project but can be handy for schools or colleges that have to store records of thousands of students.

If you have ever lost track of which day of the week is today or the number of days in that particular month, you should build a calendar yourself. The Calendar is written in the C programming language, and this Calendar assists you in determining the date and day you require. We can implement it using simple if-else logic and switch-case statements. The display() function is used to display the calendar and it can be modified accordingly. It also has some additional functions.

This Phone book Project generates an external file to permanently store the user’s data (Name and phone number). The phone book is a very simple C project that will help you understand the core concepts of capacity, record keeping, and data structure. This program will show you how to add, list, edit or alter, look at, and delete data from a record.

An online voting system is a software platform that enables organizations to conduct votes and elections securely. A high-quality online voting system strikes a balance between ballot security, convenience, and the overall needs of a voting event. By collecting the input of your group in a systematic and verifiable manner, online voting tools and online election voting systems assist you in making crucial decisions. These decisions are frequently taken on a yearly basis – either during an event (such as your organization’s AGM) or at a specific time of the year. Alternatively, you may conduct regular polls among your colleagues (e.g. anonymous employee feedback surveys).

With this voting system, users can enter their preferences and the total votes and leading candidate can be calculated. It’s a straightforward C project that’s simple to grasp. Small-scale election efforts can benefit from this.

Tic-tac-toe, also known as noughts and crosses or Xs and Os, is a two-person paper and pencil game in which each player alternates marking squares in a three-by-three grid with an X or an O. The winner is the player who successfully places three of their markers in a horizontal, vertical, or diagonal row. You can implement this fun game using 2D arrays in the C programming language. It is important to use arrays while creating a Tic Tac Toe game in the C programming language. The Xs and Os are stored in separate arrays and passed across various functions in the code to maintain track of the game’s progress. You can play the game against the computer by entering the code here and selecting either X or O. The source code for the project is given below.

Mathematical operations are an everyday part of our life. Every day, we will connect with many forms of calculations in our environment. Matrices are mathematical structures in which integers are arranged in columns and rows. In actual life, matrices are used in many applications. The most common application is in the software sector, where pathfinder algorithms, image processing algorithms, and other algorithms are developed. Some fundamental matrix operations are performed in this project, with the user selecting the operation to be performed on the matrix. The matrices and their sizes are then entered. It’s worth noting that the project only considers square matrices.

Library management is a project that manages and preserves electronic book data based on the demands of students. Both students and library administrators can use the system to keep track of all the books available in the library. It allows both the administrator and the student to look for the desired book. The C files used to implement the system are: main.c, searchbook.c, issuebook.c, viewbook.c, and more.

The Electricity Cost Calculator project is an application-based micro project that predicts the following month’s electricity bill based on the appliances or loads used. Visual studio code was used to write the code for this project. This project employs a multi-file and multi-platform strategy (Linux and Windows). People who do not have a technical understanding of calculating power bills can use this program to forecast their electricity bills for the coming months; however, an electricity bill calculator must have the following features:

  • All loads’ power rating
  • Unit consumed per day
  • Units consumed per month, and
  • Total load calculation

 

The project’s goal is to inform a consumer about the MOVIE TICKET BOOKING SYSTEM so that they can order tickets. The project was created with the goal of making the process as simple and quick as possible. The user can book tickets, cancel tickets, and view all booking records using the system. Our project’s major purpose is to supply various forms of client facilities as well as excellent customer service. It should meet nearly all the conditions for reserving a ticket.

Snakes and ladders, also known as Moksha Patam, is an ancient Indian board game for two or more players that is still considered a worldwide classic today. It’s played on a gridded game board with numbered squares. On the board, there are several “ladders” and “snakes,” each linking two distinct board squares. The dice value can either be provided by the user or it can be generated randomly. If after moving, the pointer points to the block where the ladder is, the pointer is directed to the top of the ladder. If unfortunately, the pointer points to the mouth of a snake after moving, the pointer is redirected to the tail of the snake.

This system is built on the concept of booking bus tickets in advance. The user can check the bus schedule, book tickets, cancel reservations, and check the bus status board using this system. When purchasing tickets, the user must first enter the bus number, after which the system will display the entire number of bus seats along with the passengers’ names, and the user must then enter the number of tickets, seat number, and person’s name.
We will be using arrays, if-else logic, loop statements, and various functions like login(), cancel(), etc. to implement the project.

Pacman, like other classic games, is simple to play. In this game, you must consume as many small dots as possible to earn as many points as possible. The entire game was created using the C programming language. Graphics were employed in the creation of this game. To create the game, you have to first define the grid function to manage the grid structure. To control the movement, you can define functions such as move_right(), move_left(), move_up() and move_down(). C files to add ghosts and their functionalities, positions check, etc. can be added to make the game more fun. The customers will find this C Programming game to be simple to comprehend and manage.

Have a look on Exciting Project ideas on
HTML & CSS

Website Products Display

Product display or product landing page is an exciting project, where you will learn how products are displayed on a website, most interactively. The below video displays multiple products, one after the other. You will be amazed at how the page is wholly transformed using simple CSS styling.

Technical Documentation Page

Every language, software, hardware, etc. has technical documentation for information and help. Here is how you can create a simple documentation page, with internal linking from the left navigation to the content on the right of the page. You can check out the documentation for Python, Java, Arduino, etc. for reference on how these pages look. Most technical documentation has multiple hierarchies and pages; however, for simplicity, we have created a simple project to start. You can expand it further and add it as per your wish. Technical documentation could be a beneficial HTML project if you are just starting with your HTML career.

Adding Animation

In this project, we will create a simple page, where a car will appear to move on a road. The simple project is a perfect example of how animations can be made easily and quickly. Look out for the use of tag for creating this simple animation. Try adding more objects and making them move in different directions for more fun.

Animated Website Home Page

In this project, we will create a homepage that will display a logo and some menu items. You can also have some fun with the keyframes tag for animations. Note how the navigation menu and the rest of the page are separated using the height property. You can apply a background image, and change the height to 85vh or 100vh and see the difference it makes.

Create an Image Slider

Image slider or slide show is a prevalent functionality that most websites show today. In any site, for example, fashion, food, services, etc., you can observe that most of the content is shown through multiple images. If you know how to display images as a slideshow, the other content can be developed by using plain input and other data types. The entire project has been done using only HTML and CSS, and no JavaScript, thus avoiding any cross-browser issues.

e-Voting System

In this project, you will learn to take various inputs from the user for an e-voting system, including the date, that is shown as a calendar. Styling has been done using CSS. You will also learn how to submit a form and redirect to the next page. The project shows how to add different HTML elements like input boxes, radio buttons, dropdowns, etc.;

Grid Responsive Website Layout

This is a single-page website page that includes multiple HTML and CSS components. A little complex project, but at the end of it, you should be able to create a page with a CSS grid on your own. The speaker uses simple HTML and CSS elements with good explanations.

Restaurant Website

Showcase your solid knowledge of HTML and CSS creating a beautiful webpage for a restaurant. Making a layout for a restaurant will be a bit complicated than previous project examples. You will be aligning the different food items and drinks using a CSS layout grid. You will be adding prices, images and you need to give it a beautiful look and feel as well using the proper combination of colors, font-style and images. You can add pictures gallery for different food items, you can also add sliding images for a better look. Add links for redirection to internal pages. Make it responsive setting a viewport, using media queries and grid.

Landing Page

A landing page is another good project you can make using HTML and CSS but it requires a solid knowledge of these two building blocks. You will be using lots of creativity while making a landing page. You will practice how to add footer and header, create columns, align-items, divide the sections and a lot of things. You will have to use CSS carefully keeping in mind that different elements do not overlap with each other. You will also take care of color combinations, padding, margin, space between sections, paragraphs, and boxes. Color combinations should go well with each other for different sections or backgrounds. You can take help from the link given below.

Webpage Including Form

Forms are always an essential part of any project and you will be working with a lot of forms in most of the applications so why not practice it earlier and test your knowledge. Once you get familiar with the input field or basic tags in HTML to create a form make a project using all those tags. How to use a text field, checkbox, radio button, date, and other important elements in a single form. You will be learning how to give a proper structure to a webpage while creating a form.

Frequently Asked Questions

  • All branch graduates students or undergraduate students who want to become professional in HTML & CSS.
  • All stream students eg. Engineering, BCA, BSc, BBA, Bcom, BA.
  • Any who wants to learn a new skill or improve skill for there career.

  • Basic computer knowledge.
  • General knowledge of what are programming languages.

  • Yes, a course completion certificate is given after the completion of this course.

  • Both the offline and online modes are available for this course.

Why to join Webdroid

Webdroid is a leading IT Training and Software Development Company. Our Features include Internships, Training, and College Projects on almost every technologies.