Add project ideas for frontend

src/data/projects/changelog-component.md

@@ -0,0 +1,35 @@
+---
+title: 'Changelog Component'
+description: 'Create a changelog component for a website using HTML and CSS.'
+isNew: false
+sort: 4
+difficulty: 'beginner'
+nature: 'CSS'
+skills:
+  - 'HTML'
+  - 'Layouts'
+  - 'CSS'
+  - 'Flexbox'
+seo:
+  title: 'Create a Changelog Component Website Using HTML and CSS'
+  description: 'Learn how to create a changelog component for a website using HTML and CSS.'
+  keywords:
+    - 'basic css'
+    - 'css project idea'
+    - 'responsive design'
+    - 'html and css'
+roadmapIds:
+  - 'frontend'
+---
+
+In this project you are required to create a simple component for a website that displays a changelog. A changelog is a log or record of all notable changes made to a project or software. It is often used to keep users informed about the latest updates and improvements.
+
+The goal of this project is to teach you about positioning and layout in CSS. You will create a simple HTML structure and use CSS to style it into a visually appealing and responsive changelog component. Given below is a rough mockup of the changelog component you need to create.
+
+[![Changelog Component](https://assets.roadmap.sh/guest/changelog-component-1m86j.png)](https://assets.roadmap.sh/guest/changelog-component-1m86j.png)
+
+Feel free to customize the design and layout of the component as you see fit. The focus should be on creating a well-structured and responsive component that can be easily integrated into a website.
+
+---
+
+After completing this project, you will have a good understanding of how to create simple layouts using HTML and CSS. You can further enhance your skills by exploring more complex layouts, such as grids and flexbox, in future projects.

src/data/projects/portfolio-website.md

@@ -10,7 +10,6 @@ skills:
   - 'Responsive Design'
   - 'Box Model'
   - 'Typography'
-  - 'Color Theory'
   - 'Flexbox'
 seo:
   title: 'Create a Personal Portfolio Website Using HTML and CSS'
@@ -29,7 +28,7 @@ roadmapIds:
 
 In this project, you will style the HTML website structure you created previously [in a different project](/projects/basic-html-website). The focus will be on learning how to use CSS to create responsive layouts, apply color and typography, and enhance the overall design of your website.
 
-Rough mockup of the website structure is given below. Do not worry about the design details i.e. colors backgrounds etc at this stage; we are not looking for a beautiful design, but a well-structured and responsive website. Just focus on making the layout same as the mockup and ensuring it looks good on different screen sizes.
+Rough mockups of the website structure for mobile and desctop devices are given below. Do not worry about the design details i.e. colors backgrounds etc at this stage; we are not looking for a beautiful design, but a well-structured and responsive website. Just focus on making the layout same as the mockup and ensuring it looks good on different screen sizes.
 
 [![Styled HTML Website](https://assets.roadmap.sh/guest/portfolio-template-xdhki.png)](https://assets.roadmap.sh/guest/portfolio-template-xdhki.png)
 

src/data/projects/testimonial-cards.md

@@ -0,0 +1,37 @@
+---
+title: 'Testimonial Cards'  
+description: 'Create testimonial cards for a website using HTML and CSS.'  
+isNew: false  
+sort: 5  
+difficulty: 'beginner'  
+nature: 'CSS'
+skills:  
+  - 'HTML'  
+  - 'CSS'  
+  - 'Layouts'  
+  - 'Flexbox'
+  - 'Positioning'
+seo:  
+  title: 'Create Testimonial Cards for a Website Using HTML and CSS'  
+  description: 'Learn how to create testimonial components using HTML and CSS.'  
+  keywords:  
+    - 'basic css'  
+    - 'css project idea'  
+    - 'responsive design'  
+    - 'html and css'  
+roadmapIds:  
+  - 'frontend'  
+
+---
+
+In this project, you are required to create a bunch of testimonial cards. Testimonials are quotes or statements from satisfied customers or users, often used on websites to build credibility and trust.
+
+The goal of this project is to teach you about positioning and layout in CSS. Below is a rough mockup showing some testimonial cards. Each card is designed to help you understand different layout and positioning techniques.
+
+[![Testimonials Component](https://assets.roadmap.sh/guest/testimonials-min-3j2j4.png)](https://assets.roadmap.sh/guest/testimonials-min-3j2j4.png)
+
+Feel free to use any content and images you like for the testimonials.
+
+---
+
+After completing this project, you will have a good understanding of how to create layouts using HTML and CSS. You can further enhance your skills by exploring more complex projects as you progress.