Month: May 2023

HTML Website UI improvements!

Hello everyone and welcome back to another blog post! Today I will be going over how to add more UI (user interface) improvements to your websites so that it is easier for people to interact with your page.

Let’s get started,
Step 1: Include a CSS framework
Using a CSS framework can help streamline the styling process and provide pre-designed components. One popular CSS framework is Bootstrap. Add the following code to the <head> section of your HTML file, just below the existing <link> tag for your style.css file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

This will include the Bootstrap CSS file from a CDN (Content Delivery Network) and make the Bootstrap classes available for use in your HTML.

Step 2: Implement responsive navigation using Bootstrap
Replace your existing <nav> code with the following Bootstrap-based code:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

This code utilizes Bootstrap’s navbar component to create a responsive navigation bar. It includes a brand/logo, a collapsible button for small screens, and a list of navigation links.

Step 3: Improve the overall layout using Bootstrap grid system
Modify your existing content sections to utilize the Bootstrap grid system. For example, update the section containing the “About Me” information like this:

<section class="container mt-5">
  <div class="row">
    <div class="col-md-6">
      <h2>About Me</h2>
      <p>Hi, my name is Jane Doe and I'm a web developer based in New York City. I have experience with HTML, CSS, and JavaScript, and I'm always learning more!</p>
    </div>
    <div class="col-md-6">
      <img src="https://via.placeholder.com/400x200" alt="Placeholder image" class="img-fluid">
    </div>
  </div>
</section>

Here, the content is divided into two columns using the col-md-6 class. This will ensure a responsive layout where the text and image are displayed side by side on larger screens and stacked vertically on smaller screens.

Step 4: Apply additional Bootstrap styling and components
Explore other Bootstrap components and classes to enhance the UI further. For example, you can use Bootstrap’s form components to style the contact form or utilize card components to present sections with a visually appealing design.

Step 5: Customize and fine-tune the styles
Once you have incorporated Bootstrap, feel free to adjust and customize the styles according to your preferences. You can modify the colors, fonts, spacing, and other visual aspects by overriding or adding your own CSS rules.

I hope you all enjoyed this blog post and I’ll see you next time!

My summer plans!

Hello everyone and welcome back to another blog post! Today I am going to be sharing my summer plans with all of you in case you are looking for ideas in the future.
I was fortunate enough to be accepted into the UCLA SCIP (summer college immersion program) for this summer. I will be taking 2 classes there, econ 101 and US political science, I’m looking forward to delving deeper into these fascinating subjects with some of the top professors in the field. And I will also be able to spend time touring the campus and talking to other professors as well as faculty.

Another one of the great things about the UCLA Summer College Immersion Program is that there are a wide variety of courses and activities available to students. In addition to my academic classes, I’ll have the opportunity to participate in workshops, seminars, and other events designed to enhance my learning experience. For example, I’m excited to attend a workshop on study skills and time management, which will be invaluable as I navigate the rigorous coursework of college.

Outside of the classroom, there are also plenty of fun activities to keep me busy. UCLA has a beautiful campus with lots of great amenities, including a state-of-the-art fitness center and a variety of sports fields and courts. I’m planning to take advantage of these resources by playing pick-up basketball and going for runs around campus. There are also plenty of student clubs and organizations to get involved with, from the debate team to the environmental club.

As for the on-campus lifestyle and dorms, the UCLA Summer College Immersion Program provides a true college experience. I’ll be living in a dormitory with other students who are also attending the program. This will give me the opportunity to meet new people and make lasting friendships. The dorms are located on campus, so I’ll be just a short walk away from my classes and all the activities that UCLA has to offer.

The dorms themselves are comfortable and well-appointed. Each room is furnished with a bed, desk, chair, and dresser. There is also a shared bathroom on each floor and common areas where students can relax and socialize. The program staff are on-hand to provide support and guidance to students, and there are also resident advisors who are there to ensure that everyone is safe and comfortable.

Living on campus will also give me the chance to experience college life outside of the classroom. There are a wide variety of activities and events available to students, from movie nights to talent shows to intramural sports. There are also plenty of dining options on campus, including cafes, food courts, and restaurants. And as I mentioned earlier, the campus itself is beautiful, with plenty of green space and outdoor areas to explore.

Overall, I’m looking forward to the immersive college experience that the UCLA Summer College Immersion Program provides. Living on campus and taking academic courses will give me a taste of what college life is really like, and I’m excited to make the most of this opportunity.

I hope you all enjoyed and have a good day!

Adding a navigation bar and contact form to our HTML Webpage (pt. 4)

Hello everyone and welcome back to another blog post! Today I will be adding to my last couple of posts where I lay out how you can create your own HTML website quickly and easily. If you haven’t checked out my previous posts make sure to look at those first as they will explain everything you need to know. Each post is labeled with its corresponding part so you can progress in the same order I did. With that out of the way let’s get started on today’s lesson!

Step 1: Add a navigation bar A navigation bar is a menu that allows users to quickly navigate to different pages or sections of a website. Add the following code to the top of your HTML file:

phpCopy code<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

This code creates a navigation bar at the top of your HTML page. The <nav> element is used to define a section of the page that contains navigation links. The <ul> element is an unordered list of links, and the <li> elements define each individual link.

Step 2: Add a contact form A contact form is a great way to allow users to send you feedback or inquiries directly from your website. Add the following code after the closing </section> tag:

phpCopy code<section id="contact">
	<h2>Contact Us</h2>
	<form>
		<label for="name">Name</label>
		<input type="text" id="name" name="name" required>
		<label for="email">Email</label>
		<input type="email" id="email" name="email" required>
		<label for="message">Message</label>
		<textarea id="message" name="message" required></textarea>
		<input type="submit" value="Send">
	</form>
</section>

This code creates a new section on your HTML page with a heading and a contact form. The <form> element is used to define a section of the page that contains form elements. The <label> elements are used to provide labels for each form field, and <input> and <textarea> elements define each individual form field. The required attribute on each form field ensures that users must fill out that field before submitting the form.

Step 3: Add a responsive design A responsive design ensures that your website looks great on all devices, from desktops to smartphones. Add the following code to the <head> section of your HTML file:

phpCopy code<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">

This code includes a meta tag that sets the viewport width to the width of the device and a link to your CSS stylesheet. Add the following code to your CSS file:

cssCopy code@media screen and (max-width: 600px) {
	nav ul {
		flex-direction: column;
		text-align: center;
	}

	nav li {
		margin: 10px 0;
	}

	section {
		padding: 10px;
	}
}

This code creates a media query that targets screens with a maximum width of 600 pixels, such as smartphones. It changes the navigation bar to display vertically, centers the navigation links, and reduces the padding on the sections to fit the smaller screen.

I hope you all enjoyed this blog post and feel free to reach out if you have any questions either by my contact page or through the comments on this post. Have a good day and I will see you all again next time.

Stylizing your very own HTML Webpage (pt. 3)

Welcome back to my blog for another lesson in HTML. Today we will learn how to stylize our website with all sorts of different colors made from a combination of RGB. Without further ado, lets get going!

Step 1: Add some styling with CSS While HTML is used to define the structure of a web page, Cascading Style Sheets (CSS) are used to define the visual style of the page. Let’s add some CSS to our HTML page to make it look more visually appealing.

This may sound difficult but it just requires a bit of code that I have laid out below, if you need help feel free to email me or contact me via the comments under this post!

First, create a new file called “style.css” in the same directory as your HTML file. Add the following code to the file:

cssCopy codebody {
	font-family: Arial, sans-serif;
	background-color: #f2f2f2;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-around;
	background-color: #333;
	color: #fff;
}

nav li {
	margin: 0 10px;
}

nav a {
	color: #fff;
	text-decoration: none;
}

section {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

section h2 {
	font-size: 36px;
	margin-top: 0;
}

section p {
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 20px;
}

section img {
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
}

form label {
	display: block;
	margin-bottom: 5px;
	font-size: 18px;
}

form input,
form textarea {
	display: block;
	width: 100%;
	padding: 10px;
	font-size: 18px;
	margin-bottom: 20px;
	border: 2px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

form input[type="submit"] {
	background-color: #333;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 10px 20px;
	font-size: 18px;
	cursor: pointer;
}

This new feature adds quite a lot of customization possibilities to our website so feel free to play around with the values to get them just right. nextly the sizes and specifications of multiple things such as any images we include are changed, and finally

I’ll also explain the code. The first few lines set the background color and text color of our body text, after which a margin between sections is added, we create a label and add details to its background, border, and text.

Thank you all for reading this blog post and I hope to see you next time

How to expand upon your first HTML Webpage (pt. 2)

Hello everyone and welcome back to another blog post! Today I will be expounding upon the information that I published in my last blog post where I detailed the process of creating your very own HTML page. Now we are going to add more information to your page and get it looking professional in no time. On that note, let’s get started!

Step 1: Add some content Now it’s time to add some content to your HTML page. Let’s start with a basic navigation menu. Replace the <h1>My HTML Page</h1> line with the following code:

phpCopy code<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

This code adds a navigation menu to your HTML page. The <nav> element is used to define a section of the page that contains navigation links. The <ul> element is an unordered list of links, and each link is represented by an <li> element. The href attribute in the <a> tag tells the browser where to go when the link is clicked. In this case, we’re using the “#” character to indicate that the links don’t actually go anywhere.

Next, let’s add a section that contains some text and an image. Add the following code after the <nav> section:

cssCopy code<section>
	<h2>About Me</h2>
	<p>Hi, my name is Shrey and I'm a web developer based out of California. I have experience with HTML and JavaScript, and I'm always learning more!</p>
	<img src="https://via.placeholder.com/400x200" alt="Placeholder image">
</section>

This code adds a section that contains a heading, a paragraph of text, and an image. The <section> element is used to define a section of the page that contains related content. The <h2> element is a second-level heading, and the <p> element is a paragraph of text. The src attribute in the <img> tag tells the browser where to find the image.

Step 2: Add some more advanced HTML features Now that we’ve covered the basics, let’s add some more advanced HTML features to our page. First, let’s add a form that allows users to submit their contact information. Add the following code after the <section> section:

phpCopy code<section>
	<h2>Contact Me</h2>
	<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>

		<label for="message">Message:</label>
		<textarea id="message" name="message

Step 3: Add a footer A footer is an important part of any website. It provides a place to include additional information, such as copyright notices, links to social media profiles, and contact information. Add the following code after the closing </section> tag:

phpCopy code<footer>
	<p>&copy; Shrey 2023</p>
	<ul>
		<li><a href="#">Facebook</a></li>
		<li><a href="#">Twitter</a></li>
		<li><a href="#">LinkedIn</a></li>
	</ul>
	<p>Email: shrey.agarwal.ca@gmail.com</p>
</footer>

This code adds a footer to your HTML page. The <footer> element is used to define a section of the page that contains footer content. The <p> elements contain the copyright notice and email address, and the <ul> element is an unordered list of links to social media profiles.

In the next post, we will go over stylizing and adding lots of unique colors to your webpage, I’ll see you all next time!

How to create your first-word page using HTML (pt. 1)

Hello everyone and welcome back to another blog post. Today I wanted to share a basic tutorial in HTML which is a programming I’ve been learning. In this post ill explain how to create an HTML page which is the foundation of any website like this one. It’s a great place to start if you are new with coding so lets get started!

By the end of this tutorial, you’ll have a working web page that you can share with the world!

Step 1: Open a Text Editor

To get started, you’ll need a text editor. This can be any program that lets you type text and save it as a file. Some popular text editors include Notepad (for Windows), TextEdit (for Mac), and Sublime Text (for both Windows and Mac).

Open your text editor and create a new file. Save the file with the extension “.html” (for example, “my-first-web-page.html”).

Step 2: Create the HTML Structure

Every HTML document has a basic structure that you’ll need to follow. This structure consists of two main sections: the head section and the body section.

To begin, add the following line of code to your HTML file:

phpCopy code<!DOCTYPE html>

The above line tells the browser that you’re using HTML5, which is the latest version of HTML.

Next, add the html tag to define the beginning and end of your HTML document:

phpCopy code<html>
  <!-- Your code goes here -->
</html>

Inside the html tag, create the head tag and the body tag:

phpCopy code<html>
  <head>
    <!-- Your head code goes here -->
  </head>
  <body>
    <!-- Your body code goes here -->
  </body>
</html>

The head section is where you’ll include information about your web page that’s not visible to the user, such as the title of the page. The body section is where you’ll include the visible content of your web page, such as text and images.

Step 3: Add a Title to Your Web Page

The title of your web page appears in the browser’s title bar and in search engine results. To add a title to your web page, add the title tag inside the head section:

phpCopy code<head>
  <title>My First Web Page</title>
</head>

Replace “My First Web Page” with the title of your own web page.

Step 4: Add Content to Your Web Page

Now it’s time to add some content to your web page! Start by adding a heading using the h1 tag:

cssCopy code<body>
  <h1>Welcome to My First Web Page</h1>
</body>

This creates a large heading that will be the main focus of your web page. You can change the text inside the h1 tag to whatever you’d like.

Next, add a paragraph of text using the p tag:

cssCopy code<body>
  <h1>Welcome to My First Web Page</h1>
  <p>This is my first web page, and I'm excited to learn more about HTML!</p>
</body>

This creates a block of text that appears below the heading. You can change the text inside the p tag to whatever you’d like.

Finally, add an image to your web page. Find an image online and save it to your computer. Then, add the img tag to your HTML code:

cssCopy code<body

I hope you all enjoyed this post and have a great day I’ll see you in the next one!