https://github.com/parthasarathy27/frontend-development-tutorial
A web designer is a professional who creates a website’s appearance and design. And the front end developer makes sure that the design works online by using coding languages such as CSS, HTML, and JavaScript.
https://github.com/parthasarathy27/frontend-development-tutorial
angularjs css database frontend-development html5 javascript reactjs
Last synced: 7 months ago
JSON representation
A web designer is a professional who creates a website’s appearance and design. And the front end developer makes sure that the design works online by using coding languages such as CSS, HTML, and JavaScript.
- Host: GitHub
- URL: https://github.com/parthasarathy27/frontend-development-tutorial
- Owner: parthasarathy27
- Created: 2024-01-20T12:39:07.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-17T18:37:05.000Z (over 1 year ago)
- Last Synced: 2025-03-12T15:12:56.547Z (11 months ago)
- Topics: angularjs, css, database, frontend-development, html5, javascript, reactjs
- Language: HTML
- Homepage: https://parthasarathy27.github.io/frontend-development-tutorial/
- Size: 1.89 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Developer Learning Repository
Welcome to the Frontend Developer Learning Repository! This repository is designed to help you learn and improve your skills in frontend development. Whether you're a beginner or looking to enhance your existing knowledge, you'll find a variety of resources and projects to explore.
## Getting Started:-
1. **Clone the Repository:**
```bash
git clone https://github.com/your-username/frontend-learning.git
```
2. **Navigate to the Project Directory:**
```bash
cd frontend-learning
```
3. **Explore the Learning Materials:**
- Check the `resources` directory for curated articles, tutorials, and documentation.
- Browse through the `projects` directory to find practical exercises and projects to work on.
## Projects
1. **Responsive Web Design:**
- Create a responsive webpage using HTML and CSS to master the fundamentals of layout and design.
2. **JavaScript Basics:**
- Build interactive elements and understand the basics of JavaScript with hands-on exercises.
3. **Framework Exploration:**
- Dive into popular frontend frameworks like React, Vue, or Angular by exploring dedicated project folders.
## Contributions
We encourage contributions! If you find a great resource, have a helpful tip, or want to add a new project, feel free to open a pull request.
1. **Fork the Repository**
2. **Create a Branch:**
```bash
git checkout -b feature/new-topic
```
3. **Make Changes and Commit:**
```bash
git add .
git commit -m "Add details about new topic"
```
4. **Push Changes:**
```bash
git push origin feature/new-topic
```
5. **Open a Pull Request**
## Repository
Join our Repository to connect with other learners, ask questions, and share your progress. You can find us on [Discord](#) or [Slack](#).
# HTML, CSS, and JavaScript Explained :-
This repository contains the fundamental components of web development: HTML, CSS, and JavaScript. Below is a brief explanation of each part:-
## HTML (Hypertext Markup Language)
HTML serves as the backbone of web pages, defining the structure and content. It utilizes a markup system with tags to create elements such as headings, paragraphs, images, and links. Sample HTML structure:
```html
Your Page Title
This is a Heading
This is a paragraph.
```
## CSS (Cascading Style Sheets)
CSS is responsible for styling and layout, enhancing the visual presentation of HTML elements. It applies styles like colors, fonts, margins, and positioning. Example CSS:
```css
body {
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}
h1 {
color: #333;
}
p {
margin-bottom: 20px;
}
img {
width: 100%;
height: auto;
}
```
## JavaScript
JavaScript adds interactivity and dynamic behavior to web pages. It can manipulate HTML and CSS, handle user input, and communicate with servers. A simple JavaScript snippet:
```javascript
// Change text on button click
function changeText() {
document.getElementById("demo").innerHTML = "Text changed!";
}
// Handle user input
let userInput = prompt("Enter your name:");
alert("Hello, " + userInput + "!");
```
## Project Links
1. https://parthasarathy27.github.io/frontend-development-tutorial/EMC%20Web%20Page%20HTML%20Project/starter/index.html
2. https://parthasarathy27.github.io/frontend-development-tutorial/Event%20Management%20HTML%20Project/starter/event.html
3. https://parthasarathy27.github.io/frontend-development-tutorial/Guess%20The%20Number/GTN.html
4. https://parthasarathy27.github.io/frontend-development-tutorial/Todo%20List/Todo.html
5. https://parthasarathy27.github.io/frontend-development-tutorial/imageGallery/index.html
6. https://parthasarathy27.github.io/frontend-development-tutorial/perfume%20project/index.html
Happy Coding!!🚀...