Github Pages Tips if your img doesn't appear 🖼️

Israa Gargar — Fri, 03 Feb 2023 15:37:30 +0000

When it comes to publishing a website on GitHub Pages, it's important to make sure that all the assets, including images, are properly linked.

If your images don't appear after you've published your website, there are a few things you can check to resolve the issue.

Tips for fixing missing images:

1️⃣Pay attention to the writing of image extensions:

On GitHub Pages, the case sensitivity of file names matters, so make sure you're using the correct capitalization for your image file extensions. For example:
Images.png is different from images.png

2️⃣Check your image src path. If your code includes a forward slash (/) before the image path, remove it.

For example, if your src path is

src="/images/images.png"❌

change it to

src="images/images.png"✅

This will often solve the issue of missing images on GitHub Pages

By following these simple tips, you can quickly resolve any issues with missing images on your website when publishing it on GitHub Pages. By paying attention to details like file name capitalization and src paths, you can ensure that your website looks and works exactly as you intended it to.

# My first web design😃🦾

Israa Gargar — Sun, 29 Jan 2023 16:03:04 +0000

Web design is a field that requires a solid foundation in HTML and CSS. Without a proper understanding of the fundamentals, it can be challenging to grasp complex concepts and make the most of cutting-edge tools. That's why after struggling with advanced technologies like React, I realized that I had missed the most important part of web development - the foundation. I made the decision to start over and focus on building a solid foundation in HTML and CSS.

I am proud to present my first project https://esogargar.github.io/temp1/, created using only HTML and pure CSS. The project showcases my newfound understanding of HTML and CSS, create visually appealing and responsive websites, with a touch of Google Fonts and Font Awesome icons, I was able to add a unique look and feel to the site, and of course the use of media queries ensured that the website remains user-friendly on different devices and screen sizes. The project was hosted for free on GitHub Pages.

Lesson learned

CSS Variables and Components: One of the best practices in CSS is to make use of variables and components. This makes it easier to maintain and update the website, as all changes can be made in one place, this not only helps in reducing the amount of code but also ensures that the website remains consistent.

CSS Flex and Grid: Flexbox is made for one-dimensional layouts, and the Grid is made for two-dimensional layouts. It means Flexbox can work on either rows or columns at a time, but Grids can work on both.

CSS Selector:
- nth-child selector

Generating shapes with ::before and ::after

CSS animation :
- Add a smooth scrolling effect to the document

Use transform and transition when action (Hover)

Use CSS browser prefixes :

GitHub Pages: I used to host my first website for free

In conclusion, this project showcases the use of HTML and CSS to create a visually appealing and responsive website.

DEV Community: Israa Gargar

Github Pages Tips if your img doesn't appear 🖼️

# My first web design😃🦾

Lesson learned