Personal Portfolio Landing Page
Introduction to HTML Basics and Structure
Understanding the Web
- The web is short for world wide web, or www
- The web is a massive collection of interconnected web pages
Websites and Web apps
- digital pages to store information, ideas and resources
- have a unique address called URL
- Linked or pointing to other webpages
- Websites are static, web apps are dynamic and interactive
Server
- kind of store houses which store data and files for website and web apps
- servers share this information whenever asked for
Clients
- clients request information and services for you from the web (servers)
- when you type a web address into your browser, click a link, or open an app, you're acting as a "client” through browsers
Setting Up the Development Environment
- To build websites, you need two key tools: a code editor and a web browser.
- We'll use Chrome as our browser and VS Code as our code editor.
- GitHub is your developer's social media platform, where you can share and collaborate on code.
- Live server extension on vscode makes it super smooth to build websites
Resources:
-
Text editor: Visual Studio Code
-
Live Server
-
-
Github
-
Browser developer tools: Chrome DevTools (**https://developers.google.com/web/tools/chrome-devtools**)
Task: Create a project directory, anywhere, and name it portfolio. Go to VScode, and open that
Intro to HTML and HTML Elements
- HTML is a markup language that uses elements and tags to structure and style web content.
- The DOCTYPE declaration ensures browsers render your HTML correctly, as it declares the type of HTML written in the document.
- Key HTML elements include
<html>,<head>, and<body>- HTML: It’s like the topmost container, which contains everything on and about your web page
- Head: contains meta information, the information about the webpage, such as title, author, some resources, user can’t see any of it
- Body: It contains the actual content of your website, which users can interact with
Here's a simple example of an HTML structure:
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text.</p> </body> </html>Text HTML elements
There are text-related elements like headings, paragraphs,
- Headings (
<h1>to<h6>): Used to define different levels of headings, with<h1>being the highest and<h6>the lowest. - Paragraphs (
<p>): Used for structuring and presenting text content in separate paragraphs.
Text formatting options such as bold, italic, and underline.
- Bold (
<b>): Renders text in bold, typically for highlighting important parts. - Italic (
<i>): Displays text in italics, often used for emphasizing. - Underline (
<u>): Underlines the text, but use sparingly as it's not recommended for standard web content.
Here’s an example showcasing different heading levels:
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <h2>Subheading</h2> <i><h3>Sub-Subheading</h3></i> <p>This is a paragraph of text.</p> </body> </html> -
Task: Create a file name index.html inside your project directory, this is going to be the HTML document.
Other HTML elements
- Lists (
<ul>,<ol>,<li>): Used for creating unordered (bulleted) and ordered (numbered) lists. - Links (
<a>): Creates hyperlinks to other web pages or resources, allowing users to navigate. - Images (
<img>): Embeds images into the web page, enhancing visual content. - Div (
<div>): A container element used to group and style other elements. - Span (
<span>): Inline element used to style a specific portion of text within another element. - Tables (
<table>,<tr>,<td>,<th>): Organizes data into rows and columns for tabular content. - Forms (
<form>,<input>,<textarea>,<select>): Enables user input, like text boxes, text areas, and dropdown lists. - Buttons (
<button>): Creates clickable buttons that can trigger actions or submit forms. - Semantic Elements (
<header>,<nav>,<main>,<article>,<section>,<footer>): Provides meaning to the structure, aiding accessibility and SEO. - Comments (
<!-- -->): Used to add notes within the HTML code that aren't displayed on the web page.
Here's an example of adding an image using HTML:
<img src="path/to/image.jpg" alt="Description of the image">Task: Create a folder named assets inside your project directory, and download the SVG files from the link.
Exercise
Build the structure of the Portfolio web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nisha's Portfolio</title>
</head>
<body>
<nav>
<img src="" alt="Logo" />
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
<header id="header">
<div>Text</div>
<div>Header Image</div>
</header>
<section id="about">
<h1>Hello I am Nisha</h1>
<div>
<img src="" alt="profile image" />
<div>About Text</div>
</div>
</section>
<section id="portfolio">
<h1>My Work Portfolio</h1>
<div>Project Cards</div>
</section>
<section id="skillset">
<h1>My Skillset</h1>
<div>skills</div>
</section>
<section id="contact">
<h1>Contact Me</h1>
<form action="">Form</form>
</section>
<footer>
<div>Socials</div>
<div>Address</div>
</footer>
</body>
</html>Default Styling and Layout by HTML
Default styling
- The default font-size
- The default color of the text: black
- Heading hierarchy, difference sizes for H1, H2, H3 etc.
- special color and text decoration for the anchor elements, and their state change
Default Layout
Different HTML elements are positioned in different ways on the web page, that’s the default layout that HTML provides. There are block-level elements and inline elements,
Block Level Elements
- Block-level elements, like
<div>,<p>,<h1>,<ul>, and<li>, create a new "block" on the page. - They stack vertically on top of each other regardless of their width
- By default, block-level elements stretch the full width of their parent container, if the width is not specified
- They typically start on a new line and create clear visual distinctions between different content sections.
Inline Elements
- Inline elements, like
<span>,<a>,<em>, and<strong>, are designed to be part of the flow of text within a block-level element. - They do not create a new line and only take up as much width as necessary for their content.
- Inline elements can appear within block-level elements, and they can also be nested within other inline elements.
