Introduction to HTML, CSS, and JavaScript: Part 1- Personal Portfolio Website

Introduction

Creating websites is a valuable skill in today’s digital world. This blog series will guide you through the basics of HTML, CSS, and JavaScript by building a simple project: a personal portfolio webpage.

[You can check out my Portfolio page: https://www.apoorav-malik.netlify.app/, This website is made with ReactJs, which is a Front-End Framework, with TailwindCSS for styling]

Before starting, You should know some points for an effective website design.

An effective website design balances aesthetics with functionality, prioritizing user experience and engagement. Key aspects to consider include:

Usability and Navigation:

• Intuitive and clear layout: Users should easily find what they’re looking for.
• Simple and consistent navigation: Menus and links should be readily accessible and logically structured.
• Mobile-friendliness: Responsive design ensures optimal viewing across all devices.
• Fast loading speed: Minimizing page load time keeps users engaged.

Visual Design and Content:

• High-quality visuals: Images, videos, and graphics should be relevant and visually appealing.
• Readability and typography: Fonts should be clear, legible, and appropriate for the brand.
• Compelling content: Engaging and informative text that resonates with the target audience.
• Clear calls to action: Prompts that encourage users to take the desired action, like buying or subscribing.

Technical Considerations:

• Search engine optimization (SEO): Optimizing website content and structure for search engine visibility.
• Accessibility: Ensuring the website is accessible to users with disabilities.
• Security: Implementing measures to protect user data and website integrity.
• Performance optimization: Minimizing technical issues for a smooth user experience.

Additional Points:

• Branding: Consistent visual identity that reflects the brand’s personality and values.
• White space: Strategic use of empty space improves readability and visual hierarchy.
• Color scheme: Choosing colors that evoke the desired emotions and align with the brand.
• User experience (UX): Focusing on creating a positive and seamless user journey.

What You’ll Learn

• HTML: Structure of web pages.
• CSS: Styling web pages.
• JavaScript: Adding interactivity to web pages.

HTML [HyperText Markup Language]

HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It uses a system of tags to denote different types of content and elements within a webpage. Each HTML document begins with a `!DOCTYPE html` declaration and contains a hierarchical structure of nested tags, such as `html`, `head`, `body`, and various other tags like `header`, `main`, `section`, `p`, `h1` through `h6`, and more. These tags help define the document’s layout, headings, paragraphs, links, images, and other multimedia, allowing web browsers to render and display the content appropriately to users.

CSS [Cascading Style Sheet]

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and design of HTML documents. It allows developers to apply styles such as colors, fonts, layouts, and spacing to web pages, enhancing their visual appeal and usability. CSS rules consist of selectors and declarations. Selectors identify the HTML elements to be styled, while declarations define the styling attributes and their values, enclosed in curly braces. Common CSS attributes include `color`, `font-size`, `margin`, `padding`, `border`, `background-color`, and `display`. By separating content (HTML) from presentation (CSS), developers can maintain cleaner code and create more flexible, responsive, and visually engaging websites.

Javascript

JavaScript is a versatile programming language commonly used to add interactivity and dynamic features to websites. It enables developers to manipulate HTML and CSS, respond to user actions, and create engaging web experiences. JavaScript interacts with the Document Object Model (DOM), which represents the structure of a webpage, through various functions. Key document functions include `getElementById()`, which selects an element by its ID; `querySelector()`, which selects the first element that matches a specified CSS selector; and `addEventListener()`, which attaches event handlers to elements, allowing developers to define behaviors like clicks, form submissions, and other user interactions. By leveraging these functions, JavaScript enhances the functionality and interactivity of web pages.

Getting Started

To start, you need a text editor (like Visual Studio Code) and a web browser (like Google Chrome).

Navigate to a folder using your file manager or the terminal (Terminal commands blog post: Coming Soon). Make sure it is a folder you visit regularly and will remember. Create a new folder called projects.

In Visual Studio Code’s Explorer pane, click on your development folder’s name. You’ll see four icons appear to the right of the folder name. Click the ’New File’ icon. Type the new file’s name with its appropriate file extension ( for example, .html, .css, .csv). It is critical that you include the correct file extension, so programs like linters know how to interpret its contents. Press Enter when done.

Extensions to install in your VS Code

• Live Server: ritwickdey.LiveServer
• Prettier : esbenp.prettier-vscode
• ESLint: dbaeumer.vscode-eslint

To install Extensions, check the Explorer Pane for an Extension tab.  Then, search these extensions using names or their Extension IDs. Install these Plugins.

Now, You have set up your VS code for coding Websites !!

In Part 2, We will start coding our first HTML Page.