Scribd
Upload
26 views

HTML CSS JavaScript Coding Tips

Use semantic HTML elements, CSS to separate presentation from content, and HTML tables for tabular data. Validate HTML, use a CSS reset, and minimize inline styles. Use CSS selectors wisely, cascading and inheritance, and appropriate units for length values.

Uploaded by

Chris Davis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

HTML CSS JavaScript Coding Tips

Use semantic HTML elements, CSS to separate presentation from content, and HTML tables for tabular data. Validate HTML, use a CSS reset, and minimize inline styles. Use CSS selectors wisely, cascading and inheritance, and appropriate units for length values.

Uploaded by

Chris Davis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Coding and Tips Frontend Coders

HTML CSS JavaScript Coding Tips

Use semantic HTML elements 2


Use CSS to separate presentation from content 3
Use HTML tables for tabular data 4
Use alt attributes for images 5
Use HTML forms for user input 5
Use CSS classes and IDs for styling 5
Validate your HTML 6
Use a CSS reset 7
Use CSS grid and flexbox for layout 8
Minimize the use of HTML inline styles 8
Use CSS selectors wisely 9
Use CSS cascading and inheritance 10
Use CSS units for length values 11
Use CSS shorthand properties 12
Use CSS reset or normalize 13
Organize your code with CSS cascading and inheritance 14
Use CSS Flexbox or CSS Grid for layout 15
Use CSS preprocessors 16
Optimize your styles for performance 17
Use media queries 18
Use CSS Flexbox for flexible layout 19

Laurence Svekis https://basescripts.com/


Use CSS Transitions for smooth animations 21
strict mode example 22
Use const and let 23
Use Arrows functions 23
Use Destructuring to get values from arrays 23
Use template literals 24
Use forEach over for loop 24
use of higher-order functions 24
Avoid Global Variables 25
Avoid Naming Collisions 25
Initialize variables with default values 26

Use semantic HTML elements


Use semantic HTML elements: Semantic HTML elements provide
meaning to the structure of your web pages. Examples of
semantic elements include <header>, <nav>, <main>,
<article>, <section>, <aside>, <footer>, etc. For example:

<header>
<h1>Header</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Laurence Svekis https://basescripts.com/


</nav>
</header>
<main>
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</p>
</main>
<footer>
<p>Footer</p>
</footer>

Use CSS to separate presentation from


content
Use CSS to separate presentation from content: CSS provides a
way to separate the presentation of your web pages from the
content, making it easier to maintain and change the look and
feel of your site. For example:

<style>
h1 {
font-size: 36px;
color: blue;
text-align: center;
}
p {
font-size: 18px;
color: green;
text-align: justify;
}
</style>

Laurence Svekis https://basescripts.com/


<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</p>

Use HTML tables for tabular data


Use HTML tables for tabular data: HTML tables provide a way to
display tabular data, such as schedules, financial data, etc. For
example:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>25</td>
<td>London</td>
</tr>
</table>

Laurence Svekis https://basescripts.com/


Use alt attributes for images
Use alt attributes for images: The alt attribute provides a text
description for images, which is important for accessibility and
SEO. For example:

<img src="image.jpg" alt="A beautiful landscape">

Use HTML forms for user input


Use HTML forms for user input: HTML forms provide a way for
users to enter data into your web pages. For example:

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Submit">
</form>

Use CSS classes and IDs for styling


Use CSS classes and IDs for styling: CSS classes and IDs provide
a way to select and style specific elements on your web pages.
For example:

<style>
/* Define a CSS class */

Laurence Svekis https://basescripts.com/


.highlight {
background-color: yellow;
font-weight: bold;
}
/* Define a CSS ID */
#header {
background-color: lightgray;
padding: 20px;
text-align: center;
}
</style>
<body>
<div id="header">
<h1>Welcome to my website</h1>
</div>
<p>This is some example text.</p>
<p class="highlight">This text is highlighted.</p>
</body>

In this example, the CSS class .highlight is used to apply a yellow


background and bold font to the text in the second paragraph.
The CSS ID #header is used to apply a light gray background,
padding, and centered text to the div with the ID of header. By
using CSS classes and IDs to style elements, you can separate
presentation from content, making your HTML code easier to
maintain.

Validate your HTML


Validate your HTML: Validating your HTML helps ensure that your
web pages are well-formed and comply with web standards. This

Laurence Svekis https://basescripts.com/


can help prevent issues with rendering and accessibility. You can
validate your HTML using online tools such as the W3C HTML
Validator. https://validator.w3.org/

Use a CSS reset


Use a CSS reset to ensure consistent styling across different
browsers: A CSS reset provides a way to reset the default styling
for HTML elements, so that you can start with a consistent base
across all browsers. This helps to prevent inconsistencies in the
appearance of your web pages in different browsers. For
example:

<style>
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Your custom styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
</style>

Laurence Svekis https://basescripts.com/


Use CSS grid and flexbox for layout
Use CSS grid and flexbox for layout: CSS grid and flexbox provide
modern and efficient ways to layout your web pages. For
example:

<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>

Minimize the use of HTML inline styles


Minimize the use of HTML inline styles: While it is possible to use
inline styles in HTML, it is better practice to use CSS classes and
IDs to separate presentation from content. Inline styles make
your HTML harder to maintain and can result in code duplication.

Laurence Svekis https://basescripts.com/


It is better to define styles in a separate CSS file or in the
<style> element in the <head> of your HTML document.

Top 12 CSS code Tips


Use CSS selectors wisely
Use CSS selectors wisely: CSS selectors allow you to target
specific elements in your HTML and apply styles to them. It's
important to use the most specific selector possible to target the
elements you want to style. For example:

<style>
/* Target elements with a specific class */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* Target elements with a specific ID */
#header {
background-color: lightgray;
padding: 20px;
text-align: center;
}
</style>
<body>
<div id="header">
<h1>Welcome to my website</h1>
</div>
<p>This is some example text.</p>

Laurence Svekis https://basescripts.com/


<p class="highlight">This text is highlighted.</p>
</body>

In this example, the CSS class .highlight is used to apply a yellow


background and bold font to the text in the second paragraph.
The CSS ID #header is used to apply a light gray background,
padding, and centered text to the div with the ID of header.

Use CSS cascading and inheritance


Use CSS cascading and inheritance: CSS styles are cascaded,
meaning that styles are passed from parent elements to child
elements. You can use inheritance to your advantage to simplify
your CSS code. For example:

<style>
/* Define a CSS class for the parent element */
.container {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
/* Child elements will inherit the styles from the
parent */
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div class="container">

Laurence Svekis https://basescripts.com/


<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>

In this example, the styles defined in the .container class are


inherited by the child elements with the .item class.

Use CSS units for length values


Use CSS units for length values: When specifying length values in
CSS, it's important to use appropriate units, such as px, em, rem,
etc. For example:

<style>
.container {
padding: 20px;
background-color: lightgray;
}
.item {
width: 200px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

Laurence Svekis https://basescripts.com/


<div class="item">Item 4</div>
</div>

In this example, the padding, width, height, and margin values all
use appropriate units.

Use CSS shorthand properties


Use CSS shorthand properties: CSS shorthand properties allow
you to specify multiple values in a single line of code. This can
make your CSS code more concise and easier to read. For
example:

<style>
.container {
padding: 20px;
background-color: lightgray;
}
.item {
margin: 10px 20px;
background-color: lightblue;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>

Laurence Svekis https://basescripts.com/


In this example, the margin property for the .item class uses
shorthand to specify a top and bottom margin of 10px and left
and right margins of 20px.

Use CSS reset or normalize


Use CSS reset or normalize: A CSS reset or normalize stylesheet
can be used to ensure consistent styling across different
browsers. This can help prevent cross-browser compatibility
issues. For example:

<style>
/* Use a CSS reset stylesheet */
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;

Laurence Svekis https://basescripts.com/


font: inherit;
vertical-align: baseline;
}
/* Add your own styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>

In this example, a CSS reset stylesheet is used to remove all


default styles and ensure a consistent starting point for styling.
The body element is then given a font family and size.

Organize your code with CSS cascading and


inheritance
Organize your code with CSS cascading and inheritance: CSS
uses cascading and inheritance to determine which styles should
be applied to an element. By understanding these concepts, you
can write more efficient and organized CSS code. For example:

<style>

Laurence Svekis https://basescripts.com/


/* Define a general style for all links */
a {
text-decoration: none;
color: blue;
}
/* Override the style for a specific class of links
*/
.button {
background-color: lightgray;
color: white;
padding: 10px 20px;
border-radius: 5px;
display: inline-block;
}
</style>
<body>
<a href="#">Link</a>
<a href="#" class="button">Button</a>
</body>

In this example, all links have a text-decoration of none and a


color of blue. However, for links with the .button class, the
background color, color, padding, border radius, and display are
overridden.

Use CSS Flexbox or CSS Grid for layout


Use CSS Flexbox or CSS Grid for layout: Flexbox and Grid are
modern CSS layout systems that make it easier to create flexible
and responsive designs. For example (using Flexbox):

Laurence Svekis https://basescripts.com/


<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: calc(33.33% - 20px);
margin: 10px;
background-color: lightblue;
}
</style>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>

In this example, the .container class is set to use Flexbox with a


flex-wrap of wrap to allow items to wrap onto multiple lines. The
.item class has a flex-basis of calc(33.33% - 20px) to make the
items equal width and leave room for the margins.

Use CSS preprocessors


Use CSS preprocessors: CSS preprocessors such as Sass, Less,
and Stylus add additional features to CSS, making it easier to
write and maintain complex styles. For example (using Sass):

Laurence Svekis https://basescripts.com/


// Define a variable for the primary color
$primary-color: lightblue;

// Define a mixin for rounded corners


@mixin rounded-corners($radius) {
border-radius: $radius;
}

// Use the mixin and the variable in styles


.box {
background-color: $primary-color;
@include rounded-corners(10px);
padding: 20px;
}

In this example, the $primary-color variable is defined to be


lightblue, which can be reused throughout the styles. The
rounded-corners mixin is defined to accept a $radius value and
apply it to the border-radius property. The mixin is then used in
the .box class to apply rounded corners with a radius of 10px.

Optimize your styles for performance


Optimize your styles for performance: Writing performant CSS is
important for ensuring a fast-loading website. Some tips for
optimizing your CSS include: reducing the size of your CSS file,
using fewer and simpler selectors, and avoiding complex CSS
expressions. For example:

<style>
/* Use a simple selector */

Laurence Svekis https://basescripts.com/


.box {
background-color: lightblue;
padding: 20px;
}
/* Avoid using complex expressions */
.box:nth-child(3n + 1) {
background-color: lightgray;
}
</style>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</body>

In this example, the selector for the .box class is simple, using
only the class name. The selector for the style that changes the
background color of every third box uses the nth-child
pseudo-class, which is less complex than using multiple class
names or multiple selectors.

Use media queries


Use media queries to adjust styles based on different screen
sizes: Media queries allow you to apply different styles based on
the size of the screen. This is important for ensuring that your
website looks good on different devices. For example:

<style>
/* Default styles */

Laurence Svekis https://basescripts.com/


.box {
width: 100%;
padding: 20px;
text-align: center;
background-color: lightblue;
}
/* Styles for screens wider than 600px */
@media (min-width: 600px) {
.box {
width: 50%;
}
}
</style>
<body>
<div class="box">Box</div>
</body>

In this example, the default styles for the .box class set its width
to 100% and its background color to lightblue. The media query
checks if the screen width is at least 600px wide, and if so, sets
the width of the .box to 50%. This means that the box will take
up half of the screen on devices with a screen width of 600px or
more, and will take up the full screen on smaller devices.

Use CSS Flexbox for flexible layout


Use CSS Flexbox for flexible layout: CSS Flexbox is a layout
model that makes it easy to create flexible and responsive
designs. Flexbox is useful for arranging elements in a row or
column, aligning elements, and controlling the distribution of
space. For example:

Laurence Svekis https://basescripts.com/


<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.box {
width: 30%;
height: 100px;
background-color: lightblue;
}
</style>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>

In this example, the .container class is set to use the display: flex
property to activate Flexbox. The flex-direction property is set to
row to arrange the elements in a row. The justify-content
property is set to space-between to distribute the space between
the elements evenly. The align-items property is set to center to
align the elements vertically in the center of the container. The
.box class sets the width of each box to 30% and the height to
100px. This results in the three boxes being arranged in a row,
with equal space between them, and centered vertically.

Laurence Svekis https://basescripts.com/


Use CSS Transitions for smooth animations
Use CSS Transitions for smooth animations: CSS transitions allow
you to smoothly animate changes to the styles of an element.
Transitions are a great way to add a subtle and professional touch
to your website. For example:

<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: width 2s, height 2s;
}
.box:hover {
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box">Hover over me</div>
</body>

In this example, the .box class sets the width and height of a box
to 100px and the background color to lightblue. The transition
property is set to width 2s, height 2s to animate changes to the
width and height over 2 seconds. The .box:hover selector targets
the box when the user hovers over it, and changes the width and
height to 200px. As a result, when the user hovers over the box,
it will smoothly animate from 100px to 200px in both width and
height over 2 seconds.

Laurence Svekis https://basescripts.com/


Top 10 Coding Examples and Tips
for JavaScript Code
1. Use strict mode to enforce modern JavaScript syntax and
catch errors early.
2. Always declare variables with const or let, rather than var.
3. Use arrow functions instead of function for cleaner and
concise code.
4. Make use of destructuring to extract values from arrays and
objects into variables.
5. Use template literals for string concatenation and embedding
expressions.
6. Prefer forEach over for loop for simple iterations.
7. Make use of higher-order functions like map, filter, and
reduce to process arrays.
8. Avoid using global variables and always use const or let to
scope variables.
9. Use modules to organize your code and avoid naming
collisions.
10. Always initialize variables with default values to avoid
undefined values.

strict mode example


Use strict mode to enforce modern JavaScript syntax and catch
errors early:

'use strict';

Laurence Svekis https://basescripts.com/


Use const and let
Always declare variables with const or let, rather than var:

// Use let
let name = 'John Doe';

// Use const
const PI = 3.14;

Use Arrows functions


Use arrow functions instead of function for cleaner and concise
code:

// Function expression
const multiply = (a, b) => a * b;

// Implicit return
const square = x => x * x;

Use Destructuring to get values from arrays


Make use of destructuring to extract values from arrays and
objects into variables:

// Destructuring arrays
const colors = ['red', 'green', 'blue'];
const [first, second, third] = colors;

Laurence Svekis https://basescripts.com/


// Destructuring objects
const person = {
name: 'John Doe',
age: 30,
job: 'Software Engineer'
};
const { name, age, job } = person;

Use template literals


Use template literals for string concatenation and embedding
expressions:

const name = 'John Doe';


const message = `Hello, ${name}!`;

Use forEach over for loop


Prefer forEach over for loop for simple iterations:

const numbers = [1, 2, 3, 4, 5];


numbers.forEach(number => console.log(number));

use of higher-order functions


Make use of higher-order functions like map, filter, and reduce to
process arrays:

const numbers = [1, 2, 3, 4, 5];

Laurence Svekis https://basescripts.com/


// Use map
const double = numbers.map(number => number * 2);

// Use filter
const even = numbers.filter(number => number % 2 ===
0);

// Use reduce
const sum = numbers.reduce((acc, number) => acc +
number, 0);

Avoid Global Variables


Avoid using global variables and always use const or let to scope
variables:

// Global variable (not recommended)


let name = 'John Doe';

// Scoped variable (recommended)


function sayHello() {
const name = 'John Doe';
console.log(`Hello, ${name}!`);
}

Avoid Naming Collisions


Use modules to organize your code and avoid naming collisions:

// math.js

Laurence Svekis https://basescripts.com/


export const PI = 3.14;
export const add = (a, b) => a + b;

// main.js
import { PI, add } from './math.js';
console.log(PI); // 3.14
console.log(add(1, 2)); // 3

Initialize variables with default values


Always initialize variables with default values to avoid undefined
values:

// Default value
let name = 'John Doe';

// Default value with destructuring


const person = {
name = 'John Doe',
age: 30
};
const { name, age = 0 } = person;

Laurence Svekis https://basescripts.com/

You might also like