Request a Call Back
X
Fields marked with an * are required
A Complete HTML and CSS Guidelines for Beginners - Habilelabs

If you are new at HTML & CSS then you should familiar with these Guidelines before starting. Let’s discuss HTML and CSS Guidelines for Beginners in this post for better UI and UX designs.

Guidelines to follow

  • Html
  • CSS
  • Class
  • Section
  • Single page CSS
  • CSS/JavaScript custom file
  • Proper commenting
  • Code reusability
  • CSS according to framework
  • Code check

HTML – Hypertext Markup Language :

All critical website content should be added to the website using a markup language such as HTML.

Proper comment section should be used before writing any code because it will help us in identifying why this code has been written and what is the use.

Always add “alt” attributes to images because it will help when an image for some reason cannot be displayed Use lower case element and attribute names.

Use correct document type – Always declare the document type as the first line in your document.

Close all HTML elements and quote the attribute values.

Do not add blank lines & indentation unnecessarily.

Avoid code lines over 80 characters.

Representation of HTML:

CSS – Cascading style sheets:

Presentation of the website content should be defined by a styling language such as CSS.
Use simple syntax for linking to style sheets (the type attribute is not necessary) with proper comments.

  • Place the opening bracket on the same line as the selector
  • Use one space before the opening bracket
  • Use two spaces for indentation
  • Use semicolon after each property-value pair, including the last
  • Only use quotes around values if the value contains spaces
  • Place the closing bracket on a new line, without leading spaces
  • Avoid lines over 80 characters
  • New file should be used for creating CSS

 

Representation of CSS:

Class:

If there are multiple elements on a single web page and that need to be styled then we use classes. For example, let’s say that you want to give a redirect a particular button to some site or at the new page or at pressing the button it’s color should be changed. So for modifying colors & redirecting page to some link, we use classes and for that,  you could add a class to each of those buttons or the container holding the buttons.

Representation of classes:

CSS/JavaScript custom file:

We are using a framework using different libraries then we should not change the library files instead of that we should create an another file and then do the customization. For example, in bootstrap, we are using a navbar and it contains its own CSS file navbar-default and we are asked to change in that particular file so for that we’ll create a new custom CSS file.

Bootstrap library  file:

CSS According Framework:

A framework is defined as a package made up of the structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of the website, as a basis to start building a site. So as to use framework we should place the library along with proper commenting.

 Representation of Library:

Single Page CSS:

For every page, there should be separate CSS file and it should contain the information about that particular page only. For example, let’s say there are four pages (Home, About Us, Products Contact Us) so for each and every page there should be separate CSS file with proper commenting and relevant names.

Code Re-usability:

Code which shares a very similar or identical structure should be written in such a way that it can be used further. The aim of code reusability is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, code reusability allows us to cut out much of the work and save a lot of time.

Code Check:

Before submitting the code it should be reviewed and checked properly maintaining the above guidelines rules. It will help understand the third party user easily without facing any difficulties.

In this post, we discuss HTML and CSS guidelines for absolute beginners. Read here for basics of Material design for bootstrap.

We are web application development and mobile app development experts. Discuss with us about your project: Contact Us Here

Hope you found this post helpful, so don’t forget to share with friends.

“Slapping the keyboard until something good happens.”

Dheeraj is full stack developer at HABILELABS. He is an avid technology enthusiast. Besides maintaining a fairly good academic record, He has also developed a keen interest in the field of software Development and its diverse applications. Not only he just learns to develop his own skill set but has a vision of applying his technical skills and creativity to create products which could solve bigger challenges of the present day IT space.

What others say about us

quotes icon

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again."

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!."

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

iSEEit

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Siquo

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Tableluv

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Denthub

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again"

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!"

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

KCRW

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu