Table of contents
No headings in the article.
Have you ever wondered how when you register for an event or fill out a form on a website, your information seamlessly reaches the receiving end. Looks like magic right? Well no, that's just the power of frontend technologies.
What are Frontend Technologies? Frontend Technologies are a set of technologies used to develop the user-interface of web pages and applications. See "Frontend" as basically everything you see and interact with on your screen in a website and the "Technologies" used as the tools that allows for functionality and accessibility. Example of this Technologies includes: HTML, CSS, JavaScript, Vue JS, Next JS, Flutter and many others.
Now, the goal of this article is not to talk about frontend technologies in general but to talk about the two basic fundermentals of Front-End Technologies; HTML and CSS.
Let's go!!
HTML: HTML stands for "Hypertext Markup Language". It is the standard markup language used for creating web pages, It uses "tag" and "attributes" to describe the structure and formatting of a web page. HTML provides structure to a webpage and make it accessible to users of the internet through text, visual formatting and search factors. HTML largely determines textual content.
CSS: CSS stands for "Cascading Style Sheet". CSS is a design language that makes a website looks more attractive and appealing than just plain or uninspiring pieces of text. It is used for designing and responsiveness of a web page. CSS determines visual structure, layout and aesthetics.
NB: see HTMl as the skeleton of the webpage providing the basic structure and content and CSS as the skin and clothing adding style, layout and design making the webpage visually appealing.
Now, let's compare both!!
HTML vs CSS
1. HTML defines the structure and the content of a web page while CSS defines the visual appearance and layout of a web page.
2. HTML can exist without CSS but the page will look plain and unstyled while CSS requires HTML to apply style to as it targets HTML elements.
3. HTML are typically stored in .html files while CSS are typically stored in .css files.
4. HTML uses a tag-based syntax to create elements (e.g., <p>, <h1>, <div>) while CSS uses selectors and properties to apply styles to HTML elements (e.g., p { font-size: 14px; }).
5. HTML introduced new semantic elements like <article>, <section>, <nav>, and <aside>, enhancing the readability and accessibility of web pages while CSS introduced new properties for styling, including gradients, shadows, rounded corners, and more.
We've compared both now let's give a contrast?!
HTML and CSS: Their Differences.
1. HTMl consists of elements, which are the building blocks of the web page (e.g., headings, paragraphs, images, links) while CSS consists of rules that define how HTML elements should be styled. Each rule has a selector and one or more declarations (e.g., h1 { font-size: 12px; color: blue; }).
2. HTMl is typically stored in .html files. HTML documents can contain embedded CSS and JavaScript while CSS is Typically stored in .css files. CSS can be linked to HTML documents using the <link> tag or embedded within HTML using the <style> tag.
3. HTML provides semantic meaning to content. For example, <article>, <nav>, and <footer> convey specific meanings about the content they contain while CSS does not convey any semantic meaning. Its sole purpose is to style the content defined in HTML.
4. HTML can exist independently and still be functional, though it would lack styling and appear plain while CSS depends on HTML to apply styles. CSS without HTML has no content to style.
5. Changes in content or structure are made directly in the HTML file. Updating the structure might require changes in multiple places while CSS centralizes styling rules, allowing for easier updates and maintenance. Changing a style in one place can update the appearance across multiple HTML elements.
Now at this junction I think you've gotten a clear overview of what both frontend technologies are?
Additions;
HNG is a very good program for individuals who are looking forward to challenging themselves to work on projects and solve problems. In this program, I'm looking forward to challenging myself to go beyond my comfort zone , comply and do every required task even when it gets tough.
ReactJS is also one of the languages that will be required when working on some task in the program, Though I'm still trying to understand JavaScript but I don't think react JS will be that complicated.
If you're interested in the program you can visit the following links;