https://github.com/vara-co/blog-project

Personal Blog Project using HTML, CSS, Media Queries, Imports, Flexbox, Grid, and other fun stuff.
https://github.com/vara-co/blog-project

blog css css-flexbox css-grid css3 frontend html html5 project

Last synced: 25 days ago
JSON representation

Personal Blog Project using HTML, CSS, Media Queries, Imports, Flexbox, Grid, and other fun stuff.

• Host: GitHub
• URL: https://github.com/vara-co/blog-project
• Owner: vara-co
• Created: 2024-09-15T00:05:32.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-20T01:27:31.000Z (about 2 months ago)
• Last Synced: 2024-09-29T23:22:21.944Z (about 1 month ago)
• Topics: blog, css, css-flexbox, css-grid, css3, frontend, html, html5, project
• Language: HTML
• Homepage: https://blog-project-gamma-blue.vercel.app
• Size: 15.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
UDACITY Front End Web Development Nanodegree


Project 2: Personal Blog Project 

Using HTML, and CSS(Flexbox/Grid/Media Queries)





by Laura Vara



Link to live website: https://blog-project-gamma-blue.vercel.app/index.html 

This project consists of creating a blog post using HTML and CSS flexbox and grid.

This project includes the HTML Semantics:

- header

- article

- section

- footer

And for the images:

- figure

- figcaption

My main page looks like this:

![image](https://github.com/user-attachments/assets/ebe70bdd-e71d-4e48-ac86-b3f309bda733)

That links to the "Blog" page which looks like this:

![image](https://github.com/user-attachments/assets/d539e7b3-2a04-4709-a032-3d13c87bbe13)

The blog page also includes a footer:

![image](https://github.com/user-attachments/assets/62645041-5b3a-4312-8982-873f7b82812a)

My blog post has all the requirements:

![image](https://github.com/user-attachments/assets/4745a50d-6759-44e6-b47f-f8c8f95f0329)

![image](https://github.com/user-attachments/assets/9e688507-53be-438a-a6c6-9f4856e286ab)

![image](https://github.com/user-attachments/assets/105d5e7c-0193-484a-a4b5-82ec7c995ce7)

Note that the working links are as follows:

1. Home

2. Blog

3. Post1 (By clicking on the Read More button, links on "Popular Posts" on the sidebar, or by clicking the image at the "Featuared" section on the Home pag.

4. Post2

Media Queries were used to make sure the site was responsive to different devices

![image](https://github.com/user-attachments/assets/5d4c5506-9d6f-4092-b7c4-0e506669b6d2)

References:

- Media Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

- Media Queries: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

- Subscribe Form: https://blog.hubspot.com/marketing/html-form-email

- Font Awesome for the socials: https://fontawesome.com/ 

Image References:

- Title background image: https://pixabay.com/photos/leaf-drops-veins-structure-foliage-7395982/

- Hello World Image: https://pixabay.com/photos/forest-trees-light-dust-clearing-653448/

- One Step at the Time: https://pixabay.com/illustrations/ai-generated-sneakers-meadow-8222499/

- The Structure of HTML Image: https://pixabay.com/photos/tree-nature-dusk-sunset-kahl-tree-94198/ 

- Styling with CSS Image: https://pixabay.com/photos/flower-cherry-blossom-sakura-7718955/

- Flexbox Image: https://pixabay.com/photos/mountains-landscape-mountain-range-4420690/

- Grid Image: https://pixabay.com/photos/stones-stone-nature-natural-3803550/