Do you’ll want to be taught HTML, CSS, and JavaScript in internet design when you’ll be able to simply create web sites with AI-powered instruments? That’s a query that stopped me within the tracks as a result of there’s no straightforward reply.
Nonetheless, for somebody whose first style of internet design was with Macromedia Dreamweaver, I’ll say it helps to know the way web sites are put collectively.
Even should you’re creating touchdown pages with superior instruments like HubSpot’s AI website generator, you by no means know whenever you’ll must manually change the font, structure, or animate a specific internet aspect. And understanding the online fundamentals — particularly HTML, CSS, and JavaScript — positively helps.
On this information, I’ll stroll you thru every of them, explaining how every internet know-how works and why it’s necessary for creating fashionable web sites.
Desk of Contents
HTML, CSS, and JavaScript at a Look
Nearly each fashionable web site makes use of HTML, CSS, and JavaScript. The truth that you’re capable of learn this weblog, introduced in an aesthetically pleasing structure, and see a slide-in pop-up after scrolling to a sure depth is because of all three internet applied sciences.
One of the simplest ways to grasp every of them is to make use of the home analogy.
- HTML gives construction to an internet site, similar to how beams and pillars help a home.
- CSS beautifies an in any other case plain internet web page, very similar to paints and wallpapers improve the fantastic thing about a home.
- JavaScript permits customers to work together with an internet site by including behind-the-scenes performance. It’s like including plumbing, electrical energy, and web to a home.
Should you’re not accustomed to coding, they could look comparable and complicated. However whenever you’re skilled to look into the main points, or particularly the syntax and semantics of every, you’ll be capable of differentiate them.
What’s HTML?
HTML stands for HyperText Markup Language. It buildings an online web page into logical elements so the online browser is aware of the place the header, physique, paragraphs, tables, pictures, and different parts are. For instance, these are frequent parts that you would be able to particularly state in an HTML doc.
- <head> incorporates metadata of the online web page.
- <physique> consists of seen content material that customers can see.
- <h1> the heading with the biggest font dimension.
- <p> begins a paragraph.
- <b> bolds the textual content.
How does HTML work?
Once you go to a webpage, the browser masses the related HTML doc from the online server. An HTML doc organizes internet content material with a sequence of HTML tags. Then, the browser creates a Doc Object Mannequin (DOM), which it makes use of to grasp how numerous internet parts relate to one another. You’ll be able to consider DOM as a constructing blueprint that explains a home’s construction.
Though HTML is just not a programming language, I respect the way it categorizes internet parts with customary conventions. For instance, if you wish to underline a sentence, you mark it with <u> and </u>.
<p>That is <u>underlined textual content</u> utilizing the HTML u tag.</p>
Similar to how an architect makes use of a blueprint to assemble a home, an online browser makes use of the HTML file to render the online content material’s construction. Whether or not a textual content is a heading, paragraph, or belongs to a numbered checklist, it’s all clearly acknowledged within the HTML file.
Right here’s what the HTML construction appears like for a easy dialog field.
<div class=“demo-box”>
<h3>Hey World</h3>
<p>Primary HTML content material</p>
<button>Click on me</button>
</div>
You’ll be able to copy the markup above, paste it right into a textual content editor, and reserve it as an .html file. Then, open it in a browser and also you’ll see a easy, plain internet web page like this. When you received’t see the HTML markup on the browser, they’re useful for the browser to map data in methods the online designer supposed.
One other necessary characteristic of HTML is that you would be able to add attributes to the HTML parts. For instance, if you wish to flip a textual content right into a hyperlink, you’ll be able to add an attribute that describes the vacation spot web page.
<a href=“data.html”>Content material</a>
Right here, href incorporates the vacation spot file that you’ll be directed to whenever you click on Content material, which is the anchor textual content.
Understanding HTML5 in Trendy Internet Growth
The primary model of HTML was invented in 1991. Since then, HTML has gone by way of a number of main revisions. In the present day, many fashionable web sites use HTML5, which is extra versatile and helps options that fashionable internet growth wants.
For instance, HTML5 gives semantic tags that higher describe particular internet parts. Let’s take the <b>, which you’ll discover in HTML. Principally, it tells the browser to render a specific textual content daring. Whereas <b> remains to be accessible in HTML5, you’ll be able to obtain the outcomes with <sturdy>. Once you use <sturdy>, you’re additionally telling the browser the textual content is considerably necessary, which is useful for assistive applied sciences.
HTML5 additionally gives higher help for audio and video embedding. Bear in mind the times whenever you needed to obtain Flash to render movies on web sites? With HTML5, you’ll be able to embed movies with tags like <audio> and<video>.
For extra on the various options that HTML5 affords, learn this text.
What’s CSS?
Cascading Fashion Sheets (CSS) is a rule-based language that permits you to create an aesthetically pleasing webpage. You’ll be able to change how each internet aspect appears by making use of CSS to override the browser’s default fashion. For instance, if you need a special font, background colours, or margin dimension, you’ll be able to write CSS code for the HTML doc you created.
How does CSS work?
CSS follows a standardized syntax, which, in my view, even for non-coders, is simple to observe. Principally, you write CSS code by specifying the selector and declaration.
- Selector is the online aspect you need to modify. For instance, a heading generally is a selector.
- A declaration is the brand new properties that you simply need to assign to the online aspect. You employ a { } pair to checklist the declaration, which consists of a property-value pair.
Let’s take the CSS code under for example.
I’ve added a number of modifications that override the unique aspect’s fashion, together with the background coloration, textual content coloration, and the padding. And right here’s what the dialog field appears like with the CSS code.
Prettier, isn’t it?
However that’s not all. You’ll be able to fashion internet parts at completely different ranges by inserting the CSS code in numerous elements of your web site.
- Inline: Write the CSS code inside the HTML aspect utilizing the <fashion> attribute to restrict the modifications to at least one particular internet aspect.
- Native: Place the CSS inside the HTML file, normally within the header, to use fashion modifications for the complete internet web page.
- World: Create a separate CSS file and hyperlink to it out of your web site’s header to allow international modifications for the complete web site.
For instance, I can use a special font, coloration, and margin for touchdown pages through the use of native CSS with out altering the default fashion for weblog articles.
Responsive Internet Design With CSS
CSS isn’t just for giving your web site a gorgeous facelift. It’s additionally necessary for enabling responsive design. CSS allows the browser to automatically adjust web elements, including font size, layout, and margin, according to the screen size.
I remember the days when smartphones were introduced. Back then, many websites looked awkward on small screens because responsive design was still in its infancy. These days, the browser can apply different styles based on the device you’re using in a method called CSS media queries. Essentially, CSS media queries define distinct sets of attributes for various screen sizes, including desktop, tablet, and mobile devices.
Another CSS technique that gives you flexibility is to use relative instead of absolute scale when declaring properties.
For example, instead of stating width: 200 px, I use width:70% so the browser can adjust the web element’s width accordingly. Besides %, you can also use relative units like em, rem, and vw with CSS to create responsive web layouts.
What is JavaScript?
JavaScript is a programming language that web developers use to add functions, animation, and integration into websites. It turns a plain, read-only web page into one that users can interact with. For example, it allows you to drag and drop files into a placeholder and view the upload progress in real time.
Since JavaScript was introduced, it has become a core technology that makes a website “livelier.” The automatic scrolling carousel, perfectly-timed pop-in dialogs, built-in rate calculator functions — basically anything that isn’t static is powered mostly by JavaScript.
That said, JavaScript is more than animating objects in modern web development. It’s also a critical technology that performs many intelligent backend services. For example, websites use JavaScript to send customer information submitted in a form to the backend server, which is later stored in a database.
How does JavaScript work?
JavaScript, like many programming languages, has its own rules and syntax. If you share a similar background with me in object-oriented languages like C#, Java, or Python, JavaScript will look familiar.
Initially, JavaScript was a client-side scripting language, which means it supports developing user-facing websites. These days, developers use JavaScript for both client and backend development. When you use JavaScript for client-side functions, the browser retrieves the JavaScript file from the server and runs the code in real time.
Let’s revisit the same example I used to explain HTML and CSS. If you click the button on your webpage, nothing happens. The reason is that there isn’t a “code” assigned to the button. With JavaScript, you can add a function to the button.
For example, what happens if I add the following JavaScript code to the button?
The result? You will see the button’s text changed to Clicked! and the dialog’s orientation shifted after you click it.
While JavaScript used to be associated with animating web objects, its role has significantly evolved. Now, JavaScript can also run backend functions. For example, you can create a function that automatically refreshes marketing analytics in real time from your CRM database. (I won’t be showing the entire example here because it takes more than a few lines of script to do that. Also, it’s better to use HubSpot Marketing Analytics if that’s what you need to do!)
Like CSS, you’ll be able to embrace JavaScript inline, domestically, or create a separate file.
Professional tip: Download my example HTML file here, which incorporates the CSS and JavaScript implementations. Nonetheless, in precise initiatives, it’s higher to retailer HTML, CSS, and JavaScript individually. Spending 10 years in utility growth taught me to not combine the consumer interface and the underlying perform code collectively.
JavaScript and API Integration
An utility programming interface (API) is a technique that enables a number of software program parts, together with internet companies, to reliably change information. Builders use an API to reveal capabilities to the general public, so that you don’t need to construct them from scratch. As a substitute, you name the API out of your web site to entry these companies.
As a result of JavaScript is widespread for internet design, you should use the script to entry many APIs. And this contains browser APIs and third-party APIs.
- Browser APIs are companies which are constructed onto the online browser itself. For instance, you’ll be able to entry geolocation information, management audio quantity, and seize pictures out of your digicam with browser APIs.
- Third-party APIs allow you to combine exterior capabilities into your web site. For instance, you’ll be able to stream reside video to Fb, entry HubSpot CRM data, and use Google Maps with the APIs that these platforms present.
Let’s try the JavaScript under. It creates a Google Maps object with the google.maps.Map() constructor. A constructor is code that creates a brand new object that mimics the unique blueprint. On this case, it creates the Google Map object.
Then, you should use API constructors like google.maps.Geocoder(), google.maps.Marker() and google.maps.InfoWindow() by together with them in your JavaScript code.
Beneath is how I take advantage of the google.maps.Marker() API to mark a place on the map.
Find out how to Use HTML, CSS, and JavaScript Collectively for Internet Design
To date, I’ve clarified the roles of every scripting and programming language. The query now lies in combining them collectively so that you’ve got a gorgeous, practical web site with an organized codebase.
Should you’re utilizing internet growth instruments like HubSpot’s website builder, you don’t want to fret about unifying, organizing, and sustaining the information. The software does the heavy lifting so you’ll be able to deal with creating an internet site your prospects love.
Nonetheless, should you determine to construct your websites manually, you’ll must create separate HTML, CSS, and JavaScript information.
Sometimes, the mission folder of a single-page web site appears like this.
- Index.html
- Fashion.css
- Script.js
To incorporate the CSS file, place the next line within the <Head> of the webpage.
<hyperlink rel=“stylesheet” href=“fashion.css”>
In the meantime, for JavaScript, embrace the next line of code within the <Physique> tag:
<script src=”https://weblog.hubspot.com/advertising and marketing/script.js“></script>
Relying on the use instances, it’s also possible to place the JavaScript within the <Head>, however for efficiency, I’d counsel utilizing the async or defer attribute.
<script src=”https://weblog.hubspot.com/advertising and marketing/script.js” defer ></script>
Professional tip: When constructing web sites, I could be fairly obsessive in preserving code maintainable, readable, and reusable. That’s why I don’t put all of the HTML, CSS, and JavaScript code in a single file.
Design with HTML, CSS, and JavaScript.
Now, you’ve realized the fundamentals of HTML, CSS, and JavaScript. They’re core applied sciences that drive fashionable web sites. They usually do greater than create lovely websites – additionally they allow complicated capabilities that improve every part from web site interactions to enterprise transactions.
To grasp HTML, CSS, and JavaScript in internet design, you’ll want to take a position time, assets, and energy. However even with fundamental information, you’ll be able to nonetheless do wonders in your internet design, supplied that you simply’re utilizing internet growth instruments that carry them collectively.
Sadly, we do not render different fonts on the weblog, so if you may make instructions or tags in daring, that works fantastic!
Editor’s word: This publish was initially printed in November 2018 and has been up to date for comprehensiveness.
