https://github.com/harrystaley/fend_aboutme
A beginner-friendly project for learning HTML and CSS, where you personalize an "About Me" webpage by editing content and styling elements to create a visually appealing profile. Perfect for those new to web development, this exercise helps reinforce fundamental frontend skills.
https://github.com/harrystaley/fend_aboutme
css design frontend html layout markup styles web
Last synced: 3 months ago
JSON representation
A beginner-friendly project for learning HTML and CSS, where you personalize an "About Me" webpage by editing content and styling elements to create a visually appealing profile. Perfect for those new to web development, this exercise helps reinforce fundamental frontend skills.
- Host: GitHub
- URL: https://github.com/harrystaley/fend_aboutme
- Owner: harrystaley
- Created: 2015-12-19T07:48:57.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2025-04-12T08:53:38.000Z (about 1 year ago)
- Last Synced: 2025-04-12T09:39:52.325Z (about 1 year ago)
- Topics: css, design, frontend, html, layout, markup, styles, web
- Language: HTML
- Homepage:
- Size: 3.9 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FEND_AboutMe
## Project Overview
FEND_AboutMe is a beginner-friendly project designed to help new developers gain hands-on experience with HTML and CSS. This project involves creating a personalized "About Me" webpage where participants can edit content and apply various styling techniques to design a visually appealing profile. It is an excellent way for beginners to practice and reinforce their frontend development skills including understanding of HTML markup, CSS styles, and overall web design principles.
### Project Structure
The project is structured into several key files:
- `index.html`: The main HTML file where you will add your personal information and structure your webpage.
- `styles.css`: This CSS file is used to style the HTML elements in `index.html`. You will edit this file to customize the look of your webpage.
- `images/`: A directory where you can store images you wish to include on your webpage.
- `README.md`: Provides project information and instructions.
## Setup Instructions
### Prerequisites
To get started with this project, you'll need:
- A web browser (e.g., Google Chrome, Mozilla Firefox, Safari)
- A code editor (e.g., VS Code, Sublime Text, Atom)
### Installation
1. Clone the repository to your local machine:
```bash
git clone https://github.com/your-username/FEND_AboutMe.git
```
2. Navigate to the project directory:
```bash
cd FEND_AboutMe
```
3. Open the `index.html` file in your web browser to view the webpage.
4. Use your code editor to modify and save changes to the HTML and CSS files.
## Usage
To use this project, simply follow these steps:
1. Open the `index.html` and `styles.css` files in your code editor.
2. Replace the placeholder content in `index.html` with your personal information, such as your name, biography, and contact details.
3. Customize the styles in `styles.css` to design your page. You might change the colors, fonts, layout, and other styles.
4. Save your changes and refresh the browser to see the updates.
### Example Changes
- In `styles.css`, change the background color:
```css
body {
background-color: #f0f0f2;
}
```
- In `index.html`, add a new section about your hobbies:
```html
Hobbies
Here, I like to write about my hobbies...
```
## Contributing
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
This project is open source and available under the [MIT License](LICENSE.md).
---
Feel free to clone this project and personalize your own "About Me" page while learning the fundamentals of web development!