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.
-
Clone the Repository:
git clone https://github.com/your-username/frontend-learning.git
-
Navigate to the Project Directory:
cd frontend-learning -
Explore the Learning Materials:
- Check the
resourcesdirectory for curated articles, tutorials, and documentation. - Browse through the
projectsdirectory to find practical exercises and projects to work on.
- Check the
-
Responsive Web Design:
- Create a responsive webpage using HTML and CSS to master the fundamentals of layout and design.
-
JavaScript Basics:
- Build interactive elements and understand the basics of JavaScript with hands-on exercises.
-
Framework Exploration:
- Dive into popular frontend frameworks like React, Vue, or Angular by exploring dedicated project folders.
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.
- Fork the Repository
- Create a Branch:
git checkout -b feature/new-topic
- Make Changes and Commit:
git add . git commit -m "Add details about new topic"
- Push Changes:
git push origin feature/new-topic
- Open a Pull Request
Join our Repository to connect with other learners, ask questions, and share your progress. You can find us on Discord or Slack.
This repository contains the fundamental components of web development: HTML, CSS, and JavaScript. Below is a brief explanation of each part:-
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:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<img src="image.jpg" alt="Description">
</body>
</html>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:
body {
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}
h1 {
color: #333;
}
p {
margin-bottom: 20px;
}
img {
width: 100%;
height: auto;
}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:
// 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 + "!");- https://parthasarathy27.github.io/frontend-development-tutorial/EMC%20Web%20Page%20HTML%20Project/starter/index.html
- https://parthasarathy27.github.io/frontend-development-tutorial/Event%20Management%20HTML%20Project/starter/event.html
- https://parthasarathy27.github.io/frontend-development-tutorial/Guess%20The%20Number/GTN.html
- https://parthasarathy27.github.io/frontend-development-tutorial/Todo%20List/Todo.html
- https://parthasarathy27.github.io/frontend-development-tutorial/imageGallery/index.html
- https://parthasarathy27.github.io/frontend-development-tutorial/perfume%20project/index.html
Happy Coding!!🚀...