Just starting out in the world of programming and decided to showcase my portfolio site on GitHub. While my index page is displaying correctly, I'm encountering issues with some images and all of my SCSS files not showing up. Any assistance or guidance on this matter would be highly appreciated.
If you'd like to take a look at the repository, here's the link: https://github.com/ELeonJohnson/ELeonJohnson.github.io
To ensure compatibility with browsers, remember to compile your .scss files and only reference the corresponding .css files in your index.html.
If you've installed Sass using the command sass --watch _main.scss:main.css, you'll obtain the compiled CSS version. For more details, check out the documentation on Sass's official website.
In the context of Parcel.js bundling your project into a dist folder, for GitHub Pages, you just need the contents within this dist folder. Remove any unnecessary source code outside of the dist folder, then transfer everything within dist to your root folder named ELeonJohnson.github.io.
Within a <div> element, I have an <img>. I would like the entire div to scale down by 10% (using transform) when clicked on. While I have achieved this effect, there is one minor issue: clicking on the image itself does not trigger the scaling, ...
Thank you for the insights on header issues. I have a follow-up question: Is it possible to identify header problems that prevent me from displaying content in an iframe just by looking at the link? If so, can I display a different page for those problemat ...
I am trying to figure out how to print a document by passing custom HTML code. Below is the code I have tried, but unfortunately it's not working: function Clickheretoprint() { var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes, ...
I am trying to achieve equal spacing between list items, and I attempted the following code. ul { list-style-type: none; display: flex; justify-content: space-between; } However, it seems that this approach is not working as expected. I am confused ...
As a beginner, I've created a document with a 3x3 checkerboard using HTML and CSS. However, I'm facing an issue where the heading element is not displaying on a separate line as expected. I believe the problem lies in the CSS styling, specifical ...
Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it. If the content of the first span is long and causes it to wrap, t ...
I am currently working on a small website that needs to query my local mongodb. Everything works perfectly fine on localhost. That's why I decided to begin with NodeJS. While all JavaScript functions work seamlessly when run separately, I encounter a ...
Hey there, I am currently using two different header images - one for desktop and another for both tablet and mobile devices. I am wondering how I can automatically switch from the desktop header image to the mobile/tablet header image when the screen siz ...
I am struggling to create a timeline with a broken structure on my website. I suspect that the issue lies in using display:inline. When attempting to apply this to my site: https://i.stack.imgur.com/4Ur7k.png the layout gets distorted: https://i.stack.i ...
Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...
Currently, I am immersed in a project utilizing material design. In this context, I find myself contemplating the size of an image that has been hard-coded as (200x200). I am curious to know if this approach aligns with the principles of material design. ...
How can I create image control buttons, such as close, resize, and rotate, for each individual image when hovering over it? Each image is contained within a draggable div. I want to display an image control button next to each image. This button should on ...
What I am attempting to achieve is, I would like the column box to have a 100% width, and when it is hovered over, I want it to transition to the left, with the width of the column box being about 60%, revealing a second block that shows up as 20% width o ...
Is there a way to direct users to a specific tab upon clicking a link on another page? Check out the example below: <div class="products-btn"> <a href="products.html#pills-profile">view all</a> </div> On Pro ...
Is there a way to retrieve values of uploaded images after clicking on the submit button using $_POST in PHP (with image upload through HTML5)? For an example of HTML5 image upload, you can check out this link You can access the demo at the following lin ...
After implementing some jQuery validation, I wanted to display a text as a placeholder when the user skipped out of an input field without entering anything. This is the code I wrote: $('input[type="text"]').on('blur', function() { ...
Constantly immersing myself in studying the languages I am familiar with and exploring new development concepts and languages is a regular practice for me. When it comes to books, O'Reilly is my go-to choice, but when it comes to online resources, I&a ...
I'm currently working on an ember build that incorporates autoprefixer. My issue arises from the fact that the output location for 'assets/application-name.css' has shifted from its normal path to 'app/styles/app.css', and I would ...
Question: On my page, I have a slideshow displaying images and videos. Before starting the slideshow, I want to ensure that all content on the page has loaded. Does $(window).load() verify if all content, including videos, has been loaded? Thanks in adv ...
Struggling to make box-shadows cooperate with different backgrounds? The traditional method involves using mix-blend-mode and adding a pseudo element behind the main one for the effect. You can see an example of this technique here (click the + icon in th ...