biography html css

{{ activeMenu.name }}

• Python Courses
• JavaScript Courses
• Artificial Intelligence Courses
• Data Science Courses
• React Courses
• Ethical Hacking Courses
• View All Courses

Fresh Articles

• Python Projects
• JavaScript Projects
• Java Projects
• HTML Projects
• C++ Projects
• PHP Projects
• View All Projects

• Python Certifications
• JavaScript Certifications
• Linux Certifications
• Data Science Certifications
• Data Analytics Certifications
• Cybersecurity Certifications
• View All Certifications

• IDEs & Editors
• Web Development
• Frameworks & Libraries
• View All Programming
• View All Development
• App Development
• Game Development
• Courses, Books, & Certifications
• Data Science
• Data Analytics
• Artificial Intelligence (AI)
• Machine Learning (ML)
• View All Data, Analysis, & AI
• Networking & Security
• Cloud, DevOps, & Systems
• Recommendations
• Crypto, Web3, & Blockchain
• User-Submitted Tutorials
• View All Blog Content
• JavaScript Online Compiler
• HTML & CSS Online Compiler
• Certifications
• Programming
• Development
• Data, Analysis, & AI
• Online JavaScript Compiler
• Online HTML Compiler

Don't have an account? Sign up

Forgot your password?

Already have an account? Login

Have you read our submission guidelines?

Go back to Sign In

How To Create A HTML Personal Bio Page for Beginners

Want to know how to build a HTML personal bio page? In this tutorial, I’ll walk you through this fun and practical HTML project step-by-step.

Whether you're just starting your HTML journey or looking to sharpen your skills, creating a personal bio page is an excellent project to learn real-world web development skills.

In this HTML tutorial, you'll:

• Structure your personal bio page with semantic HTML to ensure clear, accessible content.
• Use CSS to style your page, focusing on layout, typography, and color to make a visually engaging online presence.
• Apply responsive design principles to make sure your page looks great on any device, from desktops to mobile phones.
• Implement modern web design techniques like Flexbox and CSS Grid to enhance the layout and user experience.
• Add personal touches and professional details to make your bio stand out to potential employers or clients.

Through this tutorial, you'll not only develop a fully functional personal bio page but also gain valuable insights into the fundamentals of web design and CSS styling.

To make the most of this tutorial, having basic knowledge of HTML and CSS is beneficial. 

But you don't need to be a web development expert to follow along. I've designed this guide to be beginner-friendly, with clear explanations and practical examples.

I’ve also provided the full source code for this HTML project so you can follow along, experiment, and even build upon it for your own projects. 

Let’s dive in and start building!

• How To Create A HTML Personal Bio Page

Ready to start your web development journey with a hands-on HTML project ? 

Today, we're going to build a HTML personal bio page, which is perfect for beginners in web design. 

This project will demonstrate how to use HTML to structure personalized web content effectively.

We'll cover the basics of HTML for structuring your page and introduce CSS to enhance its visual appeal. Check out the image below for a preview of what you’ll build!

Wondering if it's challenging? Not at all! 

I’ve designed this HTML project to be beginner-friendly, dividing it into easy-to-follow steps. 

Whether you're new to web development or familiar with HTML and CSS, this project is great for skill enhancement.

You can do all of this using our online HTML compiler , so you won’t need to fire up an IDE or text editor to follow along with me as we build this personal bio page.

By the end, you’ll have a functional page for your portfolio and a solid understanding of HTML and CSS basics.

• Project Prerequisites

Before starting, ensure you’re comfortable with basic HTML syntax and CSS. I will cover everything else you need. 

Plus, if you need to brush up on any of these areas, you can always check out a web development course . 

I should also mention that it’s important to be willing to experiment and learn from mistakes. Maybe that sounds obvious, but trust me, this is one of the best ways to learn.

Plus, if you get stuck, you can even consider using an AI coding assistant like GitHub Copilot to help out, but I’d recommend waiting until you’re 100% stuck, as this is where you really learn.

Remember, we're also here to help, so don’t hesitate to search hackr.io for help as you go along.

• Step 1: Setting Up The Project

Let's kick things off by preparing your environment to develop the HTML personal bio page. 

If you want to dive straight in, I'd recommend following along with me using our online HTML compiler . 

This is pre-populated with the HTML and CSS files you need to build this HTML project without switching on an IDE.

Alternatively, I've outlined the steps for you to create the necessary files and organize your workspace on your own computer. 

Just follow these, and you'll have a solid foundation for your project.

i. Choose an IDE or Editor

Before you start, choose an IDE or editor tailored for web development. If you’ve read my article on the best web development IDEs , you’ll see I favor Visual Studio Code (VSCode). 

This is excellent for HTML and CSS and a solid choice if you’d prefer to build on your own machine.

ii. Install Necessary Plugins

If you choose VSCode, consider installing VSCode extensions like "Live Server" to preview your HTML pages in real time and "Prettier" for code formatting. 

These tools will make your development process smoother and more efficient.

iii. Create a New HTML Project

Once your editor is set up, it's time to create a new project:

- Open your editor and select the option to create a new project or folder.

- Name your project folder something descriptive, like "PersonalBioPage."

- Inside this folder, create two files: index.html for your HTML content and styles.css for your CSS styles.

iv. Set Up a Basic HTML Structure

Open your index.html file and set up a basic HTML structure. Here’s a simple template to get you started:

Try It Yourself »

This is the basic structure every HTML project and page starts with. 

We've got our DOCTYPE, HTML tag, head section (with meta tags, title, and link to our CSS file), and the body where our content will go.

v. Prepare for CSS Styling

Make sure your styles.css is linked correctly in your HTML file to start adding styles in the next steps.

vi. Verify Project Setup

To ensure everything is set up correctly, try opening your index.html with the Live Server plugin or directly in your browser. 

You should see a blank page with the basic document structure ready to be filled with content.

And there you have it! You’ve successfully set up your environment for creating a personal bio page. 

Let’s jump into Step 2, where we’ll create the HTML structure for your bio.

• Step 2: Creating the HTML Structure

With your development environment set up, it’s time to construct the HTML skeleton of your personal bio page. 

i. Create the Header Section

The header is the first thing visitors see. 

It should include your name, a professional photo, and a brief tagline or your current professional role. Here’s how you might structure it:

Replace "your-photo.jpg" with the actual path to your image. Make sure the image is professional and suits the page’s style.

ii. Add the About Section

This section should provide a brief introduction about yourself. 

Include things like your professional background, achievements, or a short personal story. 

Structure it like this:

iii. Include a Skills Section

Highlight the professional skills or tools you’re proficient with. Consider using a list for clarity:

iv. Detail Your Experience

A well-laid-out experience section can really make your bio stand out. Include past positions, key responsibilities, and significant accomplishments:

v. Add a Contact Section

Make it easy for people to reach out to you. Include your professional email address, LinkedIn profile, or other contact methods:

Ensure all links are correct and test them to make sure they work.

vi. Structuring for Responsiveness

While adding content, keep in mind how your page will look on different devices. Use semantic HTML and prepare to apply CSS styles that will make the page responsive.

Here’s a summary of what we've accomplished in this step, highlighting the specific HTML skills you've utilized:

• Structured the Page Content: We created distinct sections, such as the header , about , skills , experience , and contact sections. This uses semantic HTML, which not only helps with SEO but also makes your site more accessible.
• Utilized Semantic HTML Tags: For each section, we employed semantic tags (<header>, <section>, <article>, <footer>), enhancing the meaning and readability of your HTML structure. These provide better structure compared to non-semantic tags like <div>, making it easier for search engines and accessibility tools to navigate.
• Embedded Multimedia and Links: We added an image to your header with <img> and provided links in your contact section using <a>. This is fundamental in HTML for incorporating multimedia elements and hyperlinks.
• Organized Content with Lists and Headings: Skills and professional experiences were listed using <ul> and <li> to clearly display lists of items. We used headings (<h1>, <h2>, <h3>) to structure the content hierarchically, improving both the aesthetics and organization of the information.
• Prepared the Document for Styling and Interactivity: By assigning id attributes to sections and other elements, we've prepared the groundwork for future CSS styling and JavaScript interaction.

With the HTML structure in place, you now have a solid framework for your personal bio page.

Let’s move on to Step 3 to style your page.

• Step 3: Styling with CSS

Now you have a solid HTML structure for your personal bio page, it’s time to enhance its visual appeal with CSS. 

This will transform your page from a basic text layout into a professionally styled profile.

i. Set Up Your CSS File

Make sure your CSS file (styles.css) is linked correctly in your HTML document, which we did in Step 1. 

This ensures that any styles you add will directly affect your HTML elements.

ii. Style the Header

The header is your first impression. Make it stand out by adding background colors, adjusting the text alignment, and customizing fonts:

iii. Style the About Section

Make the about section easy to read with ample spacing and a clear font:

vi. Enhance the Skills Section

For the skills list, consider adding a grid layout or icons next to each skill to make it visually engaging:

v. Professionalize the Experience Section

Align your experiences in a neat, readable format. Use borders or shading to distinguish each job role:

vi. Style the Contact Section

Ensure the contact section is clear and accessible, with link styles that are easy to identify:

In this step, you've employed several key CSS techniques to enhance the aesthetics and usability of your personal bio page:

• CSS Selectors and Properties: You've used a variety of selectors (element, id, class) and properties to precisely target and style HTML elements.
• Layout Techniques: Application of CSS for layout adjustments like padding, margins, text alignment, and the grid display method for organizing content visually.
• Responsive Design Elements: While we haven’t fully implemented responsiveness, the structure set here provides a solid basis for introducing media queries in the future, ensuring the site looks good on any device.
• Visual Enhancements: Introduction of stylistic features like background colors, font sizes, and hover effects to make the website more interactive and visually appealing.

You've now transformed a basic HTML document into a styled and professional-looking personal bio page. 

Next, we can review and debug our HTML project.

• Step 4: Review and Debug

Having designed and styled your personal bio page, it’s time to review and debug your work to ensure it looks great and functions correctly across different browsers and devices.

i. Check Consistency Across Browsers

Ensure your page displays consistently across different web browsers like Google Chrome, Firefox, Safari, and Edge. 

Look for styling discrepancies and make adjustments as needed. Tools like BrowserStack can be helpful for this testing.

ii. Validate Your HTML and CSS

Use validators to check if there are any errors or warnings in your HTML and CSS code:

• HTML Validator: Use the W3C Markup Validation Service to check for HTML syntax errors.
• CSS Validator: Use the W3C CSS Validation Service to ensure your CSS is error-free.

iii. Test Responsiveness

Adjust your browser window size to simulate different screen sizes or use your browser’s developer tools to test various device resolutions. 

Make sure your layout adjusts and looks good on mobile, tablet, and desktop views. Adjust your CSS using media queries if necessary to improve responsiveness.

vi. Improve Accessibility

Ensure your page is accessible to all users, including those with disabilities:

• Check color contrast ratios.
• Ensure that all interactive elements are keyboard accessible.
• Use semantic HTML to aid screen readers.
• Include alt text for images.

v. Optimize Loading Times

Optimize your page for faster loading times:

• Compress any images used without losing quality.
• Minify your CSS file to reduce its size.
• Check that your hosting solution loads your page quickly enough.

vi. Gather Feedback

Sometimes, it helps to get a fresh set of eyes on your project:

• Ask friends or colleagues to review your page.
• Gather feedback on the design, content, and functionality.
• Make adjustments based on the feedback to enhance user experience.

With your page polished and debugged, it's ready for the world to see. 

The next step would be to consider how and where to publish it, so let’s take a look at that!

• Step 5: Publishing Your Page

Now your personal bio page is designed, styled, and debugged, it’s time to share it with the world. 

This final step will guide you through the process of publishing your page online.

i. Choose a Hosting Service

To make your bio page accessible on the internet, you need to host it on a web server. 

Here are a few popular, user-friendly options that offer free plans:

• GitHub Pages: Ideal for hosting simple, static websites. Plus, it integrates directly with your GitHub repository, making updates easy.
• Netlify: Offers a straightforward drag-and-drop interface for deploying your site and automatic HTTPS.
• Vercel: Similar to Netlify, it provides easy deployment options and is great for static sites.

ii. Prepare Your Files for Deployment

Before uploading your files, ensure everything is named correctly and organized:

• Your main HTML file should be named `index.html`.
• Ensure all links to CSS files and images are relative and correctly referenced so they work on the web server.

iii. Upload Your Files

Depending on your chosen hosting service, the process will vary:

• GitHub Pages: Push your project to a GitHub repository, then enable GitHub Pages in the repository settings.
• Netlify/Vercel: Drag and drop your project folder onto their web interface or connect your GitHub account for continuous deployment.

iv. Set Up a Custom Domain (Optional)

If you have a custom domain, you can link it to your hosting provider to give your bio page a more professional look:

v. Test Your Live Site

Once your site is live, perform a final test:

• Visit the URL provided by your hosting service.
• Check all pages and links to ensure everything loads and functions as expected.
• Test on different devices and browsers to confirm compatibility.

vi. Update and Maintain

Remember, publishing your site is not the end of the road. 

Keep your content updated and continue improving the site based on user feedback and analytics.

• Next Steps & Further Learning

Congratulations on successfully building and publishing your own personal bio page! 

While you've reached a significant milestone, there's still plenty to explore in web development. 

First up, I’d highly encourage you to play around with the code I have provided, especially the styling. 

There is so much more you can do here, and it’s an excellent way to express your personality.

Beyond that, here are a few ideas to keep enhancing your skills:

Expand Your HTML and CSS Knowledge

• Advanced CSS: Learn about animations, transitions, and more complex layout designs with Flexbox and Grid.
• Responsive Design: Dive deeper into making your website look great on all devices by mastering media queries and responsive design principles.

Explore Additional Web Technologies

• JavaScript: Adding basic JavaScript can make your bio page more interactive. Consider implementing features like a light/dark mode toggle or interactive tabs for different sections of your resume. You can even use our online JavaScript compiler to do this.
• SEO Basics: Learn the fundamentals of Search Engine Optimization to increase the visibility of your web page.

Engage with the Community

• Feedback: Share your page on forums and with peers to get feedback and suggestions for improvement.
• Open Source: Consider contributing to open-source projects where HTML and CSS skills are needed. This can provide real-world experience and community engagement.

Keep Learning and Sharing

• Document Your Journey: Blog about the process of building your bio page, what you learned, the challenges you faced, and how you solved them.
• Stay Updated: Follow web development blogs, join webinars, and participate in online communities to keep up with the latest trends and best practices.

And if you're hungry for more HTML projects, check out the rest of our step-by-step tutorials, including how to build a HTML recipe page .

• Personal Bio Page: Full Source Code Example

HTML Source Code:

CSS Source Code:

• Wrapping Up

Building a HTML personal bio page is a fantastic way to boost your web development skills and delve into creating visually appealing and functional websites.

By creating this personal bio page, you've tackled a variety of challenges, including crafting a user-friendly layout, handling styling with CSS, and ensuring your content is responsive and accessible across different devices.

In this tutorial, you’ve learned how to:

• Structure your content with HTML to create a clear, logical, and accessible web page.
• Use CSS to enhance the visual appeal of your page, applying styles that bring your content to life.
• Implement responsive design techniques to ensure your bio page looks great on both desktops and mobile devices.
• Utilize advanced CSS features like Flexbox and Grid for sophisticated layout designs.
• Prioritize web accessibility, making your site usable for everyone.

You now possess the foundational tools and knowledge needed to further develop and refine your personal bio page.

Potential enhancements could include adding interactive elements with JavaScript, integrating with social media platforms, or incorporating a blog section to share your professional insights and experiences.

Your journey into the world of web development doesn't end here. With these new skills, you're well-equipped to tackle more complex projects, explore different aspects of web design and development, and continue building a diverse range of engaging web experiences.

Have fun and happy coding!

Want to sharpen up your HTML and web development skills? Check out:

Dr. Angela Yu's Complete Web Development Bootcamp

Technical Editor for Hackr.io | 15+ Years in Python, Java, SQL, C++, C#, JavaScript, Ruby, PHP, .NET, MATLAB, HTML & CSS, and more... 10+ Years in Networking, Cloud, APIs, Linux | 5+ Years in Data Science | 2x PhDs in Structural & Blast Engineering

Subscribe to our Newsletter for Articles, News, & Jobs.

Disclosure: Hackr.io is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

In this article

• How To Create An Interactive Photo Gallery Using HTML HTML Projects Web Development
• How To Create An HTML Animated Business Card for Beginners HTML Projects Web Development
• DataCamp’s Certifications To Get You Job-Ready: Insider Review Certifications Data Analytics Data Engineering Data Science

Please login to leave comments

Always be in the loop.

Get news once a week, and don't worry — no spam.

{{ errors }}

{{ message }}

• Help center
• We ❤️ Feedback
• Advertise / Partner
• Write for us
• Privacy Policy
• Cookie Policy
• Change Privacy Settings
• Disclosure Policy
• Terms and Conditions
• Refund Policy

Disclosure: This page may contain affliate links, meaning when you click the links and make a purchase, we receive a commission.

How to Create a Portfolio Website Using HTML, CSS, JavaScript, and Bootstrap 5

If you are a web developer or a web designer, it is essential for you to have a portfolio website. It lets you provide information about yourself and showcase your best work with your relevant skills and experience.

In this blog post, I will discuss some of the benefits of creating a portfolio website. Then I'll show you how to create a beautiful responsive portfolio website for yourself using HTML, CSS, JavaScript and Bootstrap version 5.

Here's an interactive scrim about how to create a portfolio website using HTML, CSS, JS, and Bootstrap 5:

Table of contents.

• Benefits of having a portfolio website
• What is Bootstrap ?

Folder Structure

How to add a navigation menu to your portfolio, how to add a hero header to the portfolio, how to make the about section, how to make the services section, how to add dark background color to navbar on page scroll, how to build the portfolio section, how to build the contact section, how to build the footer section.

• Adding Final Touches

Benefits of having a Portfolio Website

Having a portfolio website has several benefits, including:

• it provides a platform to showcase your relevant skills and experience
• it shows your personality
• it lets hiring managers find you instead of you reaching out to them
• you are easily searchable on search engines like Google

What is Bootstrap?

Bootstrap is a popular front-end CSS framework which is used to develop responsive and mobile friendly websites. The latest release of Bootstrap is version 5. You can find the official documentation of Bootstrap 5 here .

We will now start working on creating the portfolio website.

First, let's create the folder structure. You can get the project starter files on GitHub . Also, you can visit here to see the live demo of this project.

The folder structure consists of index.html, style.css, and script.js files and an images folder. We'll write all CSS in the style.css file and the JavaScript in the script.js file .

In the index.html file, you can see the HTML boilerplate code with the Bootstrap CDN, font awesome kit , and a link to the external style sheet and JavaScript.

Here, the script.js file is loaded after loading all the HTML code.

Now, let's work on adding a navigation menu in our project. It will help visitors find the relevant info they're looking for.

We will use Bootstrap's fixed-top class in nav element to keep the navbar at the top of the page. The navbar also has a navbar-brand class where we keep the name of the person as a brand.

The navbar has the following features:

• It has six links: home, about, services, portfolio, contact, and footer
• It has a transparent background. We will add a dark background on page scrolling later.
• It toggles on smaller devices

You can find more details regarding Bootstrap 5 navbar features here .

However, the navbar has a problem while scrolling. It's fully transparent throughout the page which causes readability issues.  We will fix this issue after we complete the Services section to make you understand the issue properly.

Now, we will be adding a hero image with some text in the center. A hero image is a web design term which refers to a high quality full width image that displays the company or individual's main goals, a representative image, photo, or other eye-catching elements. It helps attract users to your site.

 Also, let's add the CSS for the above code in the style.css file:

Here we can see that the section has an id named bgimage which is responsible for displaying the background hero image with full width. It also displays some text in the center above the background image with the help of the above CSS.

This is how the site looks so far with the navbar and the hero section:

The About page contains important information about you and your background. Visitors to your portfolio site can get to know you through the information you provide in this page.

We will be adding an image to the left side of the row, and on the right side we will add our quick introduction in this section. Let's demonstrate it using the code below:

Let's add some CSS for the left side image:

This will create an about section. You can modify the content based on your use cases. We have added classes named mt-4 and pt-4 with container class which will set the margin top and padding top to 1.5 rem.

The row has two columns. One has the col-lg-4 class for displaying the image which will occupy the left column with a 4-part grid for large screens.

The next column is assigned a class of col-lg-8 which will occupy the right column with an 8-part grid for larger screens. For medium and small screens they will overlap with each other which we can see in the below GIF file:

This section helps convert website visitors into potential clients. This is where you explain what specific services you offer, and where you niche down your offered services.

Let's add the code for this section and describe it below:

Since this website is targeted towards web developers and designers, I've included some of the services which a web developer or designer might offer.

We have used bootstrap cards to display services. Our services section has 2 rows and 3 columns each. For large screens with a width greater than or equal to 992px, three cards are displayed in a row. For screens less than 992px wide, only a single card is displayed in a row.

You can find more about bootstrap breakpoints here .

Also, there are fonts added in each card to make them look better.

Without CSS, the services section would look like this :

So, let's add some CSS to increase the font icon font size and card height and add some extra color when a user hovers over a card.

This is how our services section looks now:

If you look into the above gif properly you will see that the navbar is transparent throughout the page which causes readability issues. So let's work on fixing this issue.

We will write some JavaScript and CSS in order to resolve this problem. We will add a navbarDark class in order to show a dark background color for the navbar on page scroll.

For that we need to go to the script.js file and add the following code:

Now, let's break down the above code:

• The header holds the value of the nav element since the querySelector method returns the first element that matches the CSS selector (which is .navbar in this case).
• window.onscroll fires up when the scroll event happens.
• window.scrollY returns the number of pixels that the document is scrolled vertically and its value is assigned to a variable named top .
• If the value of top is greater than or equal to 100, it adds a class of navbarDark to the header.

Let's quickly add CSS for the navbarDark class. For that, go to your style.css file and add the following code:

This is how the navbar will look now:

This section includes your best work. People can see what you are capable of doing, and showcasing strong past work will definitely attract more potential clients or recruiters. So only add your best work in this section.

We will use Bootstrap cards to display the portfolio projects. There will be 2 rows and each row will have 3 columns of cards.

This will be the code for portfolio section:

Each card has an image, title, description, and link to the projects. Three cards are displayed in a row for large screens which have breakpoints of ≥ 992px wide, but for screens < 992px wide only a single card is displayed in a row.

The GIF below shows how the portfolio section looks now:

You should include your contact information in this section so that visitors can contact you if they want to hire you.

Our contact section will include 2 columns in a single row: Google maps for location and a contact form.

In order to embed the Google map, you need to follow these steps:

• go to https://www.embed-map.com
• enter your location
• click on the Generate HTML Code button which will provide your Google Map HTML Code

Our code will look like this with the contact form included:

The first column will display the Google map and the next one will display the contact form.

The form has four different form fields: name, email, subject and project details. The form doesn't submit the request itself. You will need to connect it with any back-end language. Or, you can simply use Netlify Form or Formspree form for this.

This is how the contact section will appear:

Now we have come to the last section of this post, which is the footer section. We have already added a link to the font awesome CDN in the index.html file.

In the Footer, we will add links to our social media through font awesome icons.

Without the CSS, our footer will look like this:

So let's add some styling to the footer with this code:

The icons are now displayed in the center with a hover effect which we can see in the below GIF file.

Final Touches

In order to add some spacing between all the sections, let's add some more styling:

Now we're done making our complete portfolio website.

You can find the full source code of this project here .

This is how you can create a complete responsive portfolio website using HTML, CSS, JavaScript, and Bootstrap 5 .

In this blog post we saw some of the benefits of creating a portfolio website for web developers and designers. We divided the whole website into different sections and discussed each one individually as we built it.

You can customize this website based on your own use cases.

I hope you found this post useful.

Happy Coding!

You can find me on Twitter for daily content regarding Web development.

Software Engineer with a passion for writing articles.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Discover Biography websites built by the Webflow community

Browse, clone, and customize thousands of websites #madeinwebflow. .css-ac9ku6{color:#2e5cff;font-weight:normal;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;}.css-ac9ku6:hover{-webkit-text-decoration:underline;text-decoration:underline;} looking for templates.

• Marketplace
• Hire designers
• Become an Affiliate
• Terms of Service
• Privacy policy
• Cookie policy
• Cookie preferences

Creating an Accessible HTML and CSS Biography Card

Adam LOWE shows you how to build an accessible and responsive biography grid using HTML and CSS using Pinegrow Web Editor.

This video was originally posted on the author’s blog: https://peakperformancedigital.com/building-accessible-bio-card/

• Support Forum
• Known Issues
• Release Notes
• Download Pinegrow
• Newsletter Archive
• Community Resources

How TO - About Page

Learn how to create an about page / about us page.

Create an About Page

Step 1) add html:.

Advertisement

Step 2) Add CSS:

Ever heard about W3Schools Spaces ? Here you can create your website from scratch or use a template, and host it for free.

* no credit card required

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Autumnjo/Biography-Web-Page

Folders and files, repository files navigation, biography-web-page.

A beginner biography-style website made with HTML and CSS in September 2021.

• React Native
• CSS Frameworks
• JS Frameworks
• Web Development
• Websites and Software that help HTML, CSS And JavaScript Developers
• Begin Web Development with a Head Start
• Design a Online Grocery Website in HTML CSS & JavaScript
• Javascript: A gateway to the world of web development
• Web Components: Building Custom Elements with JavaScript
• Create a Quiz App with Timer using HTML CSS and JavaScript
• How to Become a JavaScript Developer?
• How to make Live Coding Editor using HTML CSS and JavaScript ?
• How to Create a Portfolio Website using HTML CSS and JavaScript ?
• Design a Student Attendance Portal in HTML CSS & JavaScript
• Create a Bookmark Landing Page using HTML CSS and JavaScript
• Design a video slide animation effect using HTML CSS JavaScript
• Best Books to Learn Front-End Web Development
• JavaScript Cheat Sheet - A Basic Guide to JavaScript
• Create a Music Website Template using HTML, CSS & JavaScript
• Design Hit the Mouse Game using HTML, CSS and Vanilla Javascript
• Best Books to Learn Back-End Web Development
• Using Primer CSS - A Simple and Transparent CSS Library for Web Development
• Free Website Templates - HTML and CSS Templates with Source Code

Learn Web Development Basics with HTML CSS and JavaScript

Web development  refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

• Web:  It refers to websites, web pages, or anything that works over the internet.
• Development:  It refers to building the application from scratch.

Table of Content

Web Development can be classified into two ways

Frontend development, popular frontend technologies, what is html, what is css.

• What is JavaScript?
• Backend Development

Front-end Development  is the development or creation of a user interface using some markup languages and other tools. It is basically the development of the user side where only user interaction will be counted. It consists of the interface where buttons, texts, alignments, etc are involved and used by the user.

• HTML:  HTML stands for HyperText Markup Language. It is used to design the front end portion of web pages using markup language. It acts as a skeleton for a website since it is used to make the structure of a website.
• CSS:  Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify the process of making web pages presentable. It is used to style our website.
• JavaScript:  JavaScript is a scripting language used to provide a dynamic behavior to our website.

HTML  stands for  HyperText Markup Language.  It is the standard language used to create and design web pages on the internet. It was introduced by  Tim Berners-Lee  in  1991  at  CERN  as a simple markup language. Since then, it has evolved through versions from  HTML 2.0  to  HTML5  (the latest 2024 version).

HTML is a  combination of Hypertext and Markup language . Hypertext defines the link between the web pages and Markup language defines the text document within the tag.

Example: This example shows the basic use of HTML on the web browser.

CSS or Cascading Style Sheets  is a stylesheet language used to add styles to the HTML document. It describes how HTML elements should be displayed on the web page.

CSS was first proposed by  Håkon Wium Lie in 1994  and later developed by Lie and Bert Bos, who published the  CSS1 specification in 1996 .

Basic CSS Example

CSS has 3 ways to style your HTML:

• Inline : Add styles directly to HTML elements (limited use).
• Internal : Put styles inside the HTML file in a  <style>  tag.
• External : Create a separate CSS file (.css) and link it to your HTML.

Example: This example shows the use of external, internal and inline CSS into HTML file.

What is JavaScript ?

JavaScript  is a  lightweight,   cross-platform ,  single-threaded,  and  interpreted compiled  programming language. It is also known as the scripting language for webpages. It is well-known for the development of web pages, and many non-browser environments also use it.

JavaScript is a   weakly typed language  (dynamically typed) . JavaScript can be used for  Client-side  developments as well as  Server-side  developments. JavaScript is both an imperative and declarative type of language. JavaScript contains a standard library of objects, like  Array ,  Date , and  Math , and a core set of language elements like  operators ,  control structures , and  statements . 

Example: This example shows the alert by the use of alert method provided by JavaScript.

There are others frontend frameworks are used to create a website so that the UI can be more better and it could be fast running website.

Please Login to comment...

Similar reads.

• Frontend-Development
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

• 400+ Features
• Website Templates
• Website Designs
• WordPress Themes
• Joomla Templates
• HTML Templates
• HTML Website Builder
• WordPress Website Builder
• Joomla Page Builder
• Video Tutorials
• Documentation
• Contact Support

Block Types

Biography html templates.

• Newest & Popular

More from Team HTML Templates

• Customize Any Template Download

• Build Website with no Coding Download

• Free Website Builder Software Download

Other Team HTML Templates

• Terms of Use
• Privacy Policy
• License Agreement

Themes & Templates

• CSS Templates
• HTML5 Templates
• One Page Templates
• Website Builder
• WYSIWYG HTML Editor
• Static Site Generator
• HTML Code Generator
• Web Page Designs
• eCommerce Designs
• Landing Pages
• Homepage Designs
• Website Mockup

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

CSS selector structure

The CSS selector represents a particular pattern of element or elements in a tree structure. The term "selector" can refer to a simple selector , a compound selector , or a complex selector . When included in the :has() pseudo-class as a parameter, these selectors are referred to as relative selectors , representing elements relative to one or more anchor elements.

These selectors can be combined into a comma-separated selector list . If any selector in a non-forgiving selector list is invalid, the entire selector list is invalidated.

Simple selector

A simple selector is a selector with a single component, such as a single type selector, attribute selector, or pseudo-class, that's not used in combination with or contains any other selector component or combinator. A given element is said to match a simple selector when that simple selector accurately describes the element. Any selector that contains a single basic selector , attribute selector , pseudo-class , or pseudo-element selector is a simple selector.

Compound selector

A compound selector is a sequence of simple selectors that are not separated by a combinator . A compound selector represents a set of simultaneous conditions on a single element. A given element is said to match a compound selector when the element matches all the simple selectors in the compound selector.

In a compound selector, the type selector or universal selector must come first in the sequence of selectors. Only one type selector or universal selector is allowed in the sequence. As whitespace represents the descendant combinator , no whitespace is allowed between the simple selectors that make up a compound selector.

Complex selector

A complex selector is a sequence of one or more simple and/or compound selectors that are separated by combinators, including the white space descendant combinator .

A complex selector represents a set of simultaneous conditions on a set of elements.

Selectors can be read from right to left. For example, a#selected > .icon matches all elements with a class of icon that are the direct children of the <a> element with the id selected . The selector .box h2 + p matches the first <p> s to come immediately after any <h2> elements that are descendants of any element with the class of box .

Relative selector

A relative selector is a selector representing an element relative to one or more anchor elements preceded by a combinator. Relative selectors that don't begin with an explicit combinator have an implied descendant combinator .

Selector list

A selector list is a comma-separated list of simple, compound, and/or complex selectors. A given element is said to match a selector list when the element matches any (at least one) of the selectors in that selector list.

If any selector in a non-forgiving selector list is invalid, the entire selector list is invalidated.

The :is() and :where() pseudo-classes can be used to construct forgiving selector lists .

Specifications

• CSS selectors and combinators
• Forgiving selector list
• Document.querySelector()
• Document.querySelectorAll()
• CSS selectors module
• CSS pseudo-elements module

Sam Rubin, Longtime KTLA Entertainment Reporter, Dies at 64

Sam Rubin , a popular entertainment reporter on KTLA since 1991, died Friday. He was 64.

Rubin died at his home of a heart attack. His last appearance on KTLA was on May 9. He did not appear Friday on KTLA’s 7-9 a.m. “Morning News” as usual. KTLA reported that Rubin’s colleagues said he “showed no outward signs of illness” the day before.

Popular on Variety

“Sam was an icon in Los Angeles and the entertainment industry and he was a beloved member of our Nexstar Nation. My prayers are with his family and the KTLA family as we mourn his passing. He will be missed,” Sook said in a statement.

KTLA, one of the nation’s pioneering TV stations and the first commercial outlet to hit the airwaves on the West Coast in 1948, praised the journalist who became synonymous with the station. KTLA news anchor Frank Buckley was visibly choked up as he reported Rubin’s death on-air Friday afternoon.

“Sam was a giant in the local news industry and the entertainment world, and a fixture of Los Angeles morning television for decades,” KTLA said in an X post. “His laugh, charm and caring personality touched all who knew him. Sam was a loving husband and father: the roles he cherished the most. Our thoughts are with Sam’s family during this difficult time.”

KTLA 5 is profoundly saddened to report the death of Sam Rubin. Sam was a giant in the local news industry and the entertainment world, and a fixture of Los Angeles morning television for decades. His laugh, charm and caring personality touched all who knew him. Sam was a loving… pic.twitter.com/eG0tQswBSH — KTLA (@KTLA) May 10, 2024

“Everyone is going to feel like they lost a family friend,” publicist Jamie Gruttemeyer Symonds told Variety in response to the news of Rubin’s death.

Actor Yvette Nicole Brown echoed that sentiment in an X post, calling Rubin “a friend” and noting “I enjoyed all the times I got to visit him at KTLA.”

This is shocking news. @SamKTLA was a friend. I enjoyed all the times I got to visit him at KTLA. Life is short. Live, love and laugh every chance you get. And let the folks you love know that you do. ❤️ https://t.co/INaLghcwla — yvette nicole brown (@YNB) May 10, 2024

I last talked to Sam Rubin at the Critics Choice Awards this year. His smile and his genuine excitement for all things Hollywood ever present. In nervous situations he was a buoy of kindness. I will miss him. pic.twitter.com/rAG8DZ777q — Kiefer Sutherland (@RealKiefer) May 10, 2024

The news of Rubin’s death hit Hollywood hard with an outpouring of sadness and tributes from actors on both coasts. Dave Foley, Kiefer Sutherland, Marlee Matlin, Jerry O’Connell, Paul Feig, Ben Stiller, Greg Grunberg and more shared their memories and continued to praise Rubin’s kindness in the business.

This is dreadful news. One of the true delights of being in show business was the opportunity to chat occasionally with Sam Rubin. In fact, I was looking forward to seeing Sam in a couple of weeks. He was a wonderful part of life in Los Angeles. I’ll miss him. https://t.co/XI0evw65kS — Dave Foley (@DaveSFoley) May 10, 2024

I am shocked and saddened by the news of Sam Rubin’s untimely passing. If you look up “kind” you would see his picture. RIP, Sam.. you will definitely be missed by me. pic.twitter.com/MsHYoXnnvs — Marlee Matlin (@MarleeMatlin) May 10, 2024

Sam Rubin was a LEGEND. Rest In Peace KING. pic.twitter.com/KlvC6oiIJm — Jerry O'Connell (@MrJerryOC) May 10, 2024

Devastated by this news. I truly loved Sam, who was so supportive of me and the industry in general. He was the best. I can’t quite process him being gone. Sending so much love to his family and friends. So sad. RIP Sam. Love you, pal. https://t.co/w4TxOcSsZa — Paul Feig (@paulfeig) May 10, 2024

Truly heartbreaking to hear of the passing of Sam Rubin from KTLA morning news. He made my mornings, my band and me, more interesting and entertaining than they deserved to be… Thank you Sam, Rest Easy 🙏💚 pic.twitter.com/xkqGMeyKyV — Mark McGrath (@mark_mcgrath) May 10, 2024

I am numb and shocked at the news of my friend Sam Rubin passing. He cared about everyone that he met and always took the time to smile and ask about family and was the best at what he did. I can’t believe this news. So devastating and sad. Thinking about his beautiful family… pic.twitter.com/xthdAOvGha — Greg Grunberg (@greggrunberg) May 10, 2024

So sad and sorry to hear of Sam Rubin’s passing. Consummate pro. I did my first interview with him in something like ‘93, and countless times over the years. He loved actors and movies. He made everyone feel comfortable and it was always fun and easy. He was an institution. We… — Ben Stiller (@BenStiller) May 10, 2024

In addition to his work as an anchor, Rubin’s television production company SRE, Inc. has produced more than 200 hours of broadcast and cable programming including “Live From” red carpet shows and 120 episodes of talk show “Hollywood Uncensored.”

Rubin was a co-founder of the Critics Choice Association. The organization paid tribute to him, calling him a “guiding force” for the organization that bestows awards for movies and TV shows.

“Sam’s generous spirit, unfailing good humor and deep knowledge of “Hollywood” made him a legend in the entertainment business and a trusted friend to millions of viewers – and to hundreds of stars who relaxed in easy conversation with him on his set at KTLA and on countless red carpets,” Critics Choice said.

In 1996, Rubin teamed with his crosstown rival, KTTV entertainment reporter Dorothy Lucey, as hosts of the daytime syndicated talk show “Scoop with Sam & Dorothy,” which ran for a few months.

Rubin was the recipient of a Golden Mic award, a lifetime achievement award from Southern California Broadcasters Association and winner of best entertainment reporter from the Los Angeles Press Club. He penned two celebrity biographies over his long career, one about Jacqueline Kennedy Onnassis and a 1990 book about Mia Farrow co-authored with Richard Taylor.

Early in his career, Rubin covered entertainment news for Group W Television and he was a correspondent for the 1980s New York-area cable channel Movietime.

According to his KTLA bio, he supported several organizations including the MS 150 Bay to Bike Tour and supports L.A. schools and literacy programs.

CORRECTION: An earlier version of this story incorrectly stated that Rubin had been on the air Friday on “KTLA Morning News.”

More From Our Brands

Mtv movie & tv awards nixed for 2024, this futuristic new 55-foot carbon-fiber yacht will hit the seas in 2025, ronaldo to invest in wearable technology company whoop, the best loofahs and body scrubbers, according to dermatologists, tracker recap: what we learned about russell in jensen ackles’ debut — plus, a supernatural easter egg, verify it's you, please log in.

site categories

Lucy liu honored with gold legend award at 2024 gold house gala: “i feel like it’s been very lonely”, ‘young sheldon’: how producers addressed the inevitable tragedy that rocks the cooper family.

By Lynette Rice

Lynette Rice

Senior TV Writer

More Stories By Lynette

• Billy Rosenberg Stepping Down As Senior VP Comedy, Hulu Originals
• ‘SNL’ Anniversary Special Planned For February 2025
• ‘When Calls The Heart’ Renewed For 12th Season By Hallmark Channel

SPOILER ALERT! This story contains plot points from the May 11 episode of Young Sheldon on CBS .

For fans of The Big Bang Theory, Thursday’s episode of Young Sheldon shouldn’t have come as a huge surprise. With the May 16 series finale only a week away, viewers were waiting for the comedy’s title character to face a major family tragedy before going off to Caltech.

It finally happened in the episode titled “A New Home and a Traditional Texas Torture.”

Related Stories

First Look At Jim Parsons & Mayim Bialik Reprising ‘Big Bang Theory’ Roles In ‘Young Sheldon’ Finale — Update

CBS Orders ‘Young Sheldon’ Georgie & Mandy Spinoff Series Starring Montana Jordan And Emily Osment

Off camera, George Cooper Sr. (Lance Barber) died from a heart attack. His two best friends delivered the tragic news to his family.

Here, executive producer Steve Holland explains the timing of George’s death and why it was important to keep it out of the final episode of the series.

DEADLINE: Is it weird writing about an outcome that fans of The Big Bang Theory already knew about and were expecting in Young Sheldon ‘s final season?

STEVE HOLLAND: I mean, it’s a little bit of a challenge. There are some pieces of the lore and some pieces of the ending that people know. But I think for us it’s also about trying to tell those stories in ways that are still surprising. Especially since the show has gone to Netflix, I think there is an audience that is younger and less familiar with Big Bang. So I actually don’t know the answer of how many people expect certain things to happen in the finale versus how many people will be surprised by them. It’s a good question.

DEADLINE: Was it established in Big Bang that George died of a heart attack?

HOLLAND: I don’t remember if it was sort of an implied heart attack. I’m not sure if we actually ever said heart attack. It’s what we had always thought, internally. We know Sheldon’s dad passed away when he was 14, but I don’t remember if we ever specifically said heart attack.

DEADLINE : Love the bait and switch with the ladder and how you put George on top of it to check out the roof !

HOLLAND: You get nervous anytime he’s wandering into traffic or going up the ladder. You’ve got to be nervous about what’s going to happen!

HOLLAND: It was always going to be off camera. We didn’t want to witness that moment of his death. We always knew we were going to deal with his death this season, but we never thought about seeing it on camera. So really the discussion was when it would happen in the course of the last few episodes and how the family would get the news.

DEADLINE: Why did you give him his dream job before he died?

HOLLAND: Because we’re mean! For a couple reasons. We wanted to give George a win after all these years. Because there’s a segment of the audience that is expecting the death to happen, and they assumed it would be this season, we thought, ‘well, maybe if we put it in episode 12, not even the penultimate episode, maybe that’ll be more of a surprise.’ And so then it’s about figuring out, well, what that episode is. And it felt like it’s a nice way, even though slightly mean way, to give George a little bit of a win and to have an episode feel like it was about something that wasn’t just about treading water until you get to this last moment. I think it makes that last moment even more surprising and impactful.

DEADLINE: So you knew for a while you didn’t want him to die in the final episode?

HOLLAND: We talked about it. I think early on our thought was probably that it would be the final episode or that the funeral would be the final episode. As we were talking about it, I think Chuck Lorre said the show has been such a positive, loving family show. Let’s not leave the audience wallowing in grief. Maybe there’s a way to do that and then move past it and show the family starting to put itself back together and end on a little bit more of a moment of hope.

The series finale of Young Sheldon airs Thursday, May 16, in two back-to-back episodes.

Must Read Stories

Will smith action pic ‘sugar bandits’ sets director; ‘megalopolis’ deals.

‘Top Boy’, ‘Happy Valley,’ Spall, Lancashire Among TV Awards Winners: Full List

Mark damon dies: ‘monster’ producer, sales vet & actor was 91, ‘the cleaning lady’ & ‘the floor’ renewed by fox, rob lowe inks first-look deal.

Subscribe to Deadline Breaking News Alerts and keep your inbox happy.

Read More About:

56 comments.

Deadline is a part of Penske Media Corporation. © 2024 Deadline Hollywood, LLC. All Rights Reserved.