Ways to show an external website on a hosted website platform

Currently in the process of building a portfolio website that will have its own domain and hosting. For the purposes of clarity, let's refer to my portfolio site as "website #1" and the project site as "website #2."

Website #1 is being developed with a domain and hosting in place. I aim to feature website #2 (which lacks a domain and hosting) within website #1 without having to invest in additional domain or hosting services for it. Website #2 was originally created as a school project, so I prefer not to incur any extra costs.

I envision a scenario where users can click on a button on website #1, triggering a new browser window to appear on top of website #1, showcasing the local files of website #2. The background of website #1 should still be visible while the popup browser window takes center stage (see image).

If this functionality is achievable, I am curious about whether website #2 would be responsive within the popup window. Ideally, users should be able to resize the popup window to observe its responsiveness.

I hope that the details provided this time around are clear enough to solicit assistance. Thank you in advance! :)

https://i.sstatic.net/lDNmw.png

javascripthtmlcsspopupwindowportfolio

Answer №1

If you want to showcase your projects on your website, consider organizing them in a /projects/ directory. You can then easily link to them like this: .

To seamlessly display these projects on your portfolio site, make use of the versatile iframe tag. With the right coding practices, you can ensure that the content is responsive across all devices.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for keeping an image at a fixed size within a grid, even when the browser window is resized

As a newcomer to front end coding, I am currently working on a practice website to familiarize myself with the code. One issue I am facing is related to using a bootstrap grid with an image in the left column. I want to prevent the image size and position ...

htmlcssbootstrap-4

Setting the width of input-group inputs is a feature introduced in Bootstrap 4

Need assistance with a problem involving an input-group in bootstrap 4. Within the input-group, there are two inputs— one with a prepend and the other with an append. The setup is contained within a col-12 div in a form-group, and the goal is to set spe ...

htmlcsspositionbootstrap-4

Placing an element in a fixed position behind a non-fixed element

I am facing a challenge with an element that has two children, one of them is absolutely positioned. My goal is to position this absolutely placed element behind its sibling. Unfortunately, the z-index property doesn't seem to be working as expected. ...

htmlcssz-indexabsolute

Slide feature in Drupal Views allows you to create dynamic

This is the design I currently have: https://i.stack.imgur.com/P6spc.jpg For example, when you click on the "Structure" header, it opens up the contents and shows an image. I have created a content type and installed Views. I have separated the image, h ...

phpjavascriptjqueryajaxdrupal-7

What is the best way to handle multiple responses in Ajax within a single function?

Here is a simple code snippet: $.ajax({ url:'action.php', method: 'POST', data:{getcart:1}, success:function(response){ $('#getcart').html(response);//want to ...

javascriptphpjquerymysqlajax

How to position a div in the center of the screen with an overlay

While this code functions well in Firefox, it unfortunately does not work in IE. I am seeking a solution to properly center the div on the screen - Currently, the div is leaning too much towards the bottom In addition, I require the div with an id of "l ...

javascriptjquerycssinternet-explorer

Downloading EJS File instead of Displaying on Express.js Router

As I embark on the journey of developing a live video sharing/watching feature using Pure Node.js and without relying on any frameworks, an unexpected issue arose in the middle of the process. The problem occurred when Express started downloading an EJS fi ...

javascriptnode.jsexpresssocket.ioejs

Align the brand logo in the center of the navbar and position the 'help' icon to the right

I am facing a challenge in adding an icon to the right of my centered brand text without affecting its alignment. Currently, the text is perfectly centered at the top. I wish to place an icon on its extreme right side. Here is how it looks presently And ...

cssbootstrap-4

What is the best way to handle errors that occur asynchronously without using promises in order to respond to those specific errors?

I have searched for answers but none seem to directly address my specific question. My current usage involves the pattern shown below: class A { getLocation() { return Promise.reject(2222222) } async a() { try ...

javascripttypescriptasync-awaites6-promiseecmascript-2017

The primary directory specified in the package.json file

Question: I have a pre-existing library that I want to turn into an NPM module. Currently, the library is being required through the local file system. How can I specify the main directory path for my module's files? If my structure looks like this: ...

javascriptnode.jsnpmpackage.json

Dropdown selection triggers an Ajax request

I have encountered an issue while attempting to make an Ajax request to the page chosen in a drop-down menu. While most of my script code works fine in binding a mouse click to table rows, it seems to fail in this particular scenario. The error message I r ...

javascriptjqueryhtmlajax

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

I have been extensively researching how to create a to-do list using JavaScript with local storage, but unfortunately, I have not been able to find exactly what I am looking for. Is there a way for me to set up a to-do list and input data before actually ...

javascripthtmlcsslocal-storage

Showcasing live Twitter feed on a web page using socket.io and node.js

I'm currently in the process of developing a real-time Twitter streaming web application using node.js, socket.io, and twit. var express = require('express') , app = express() , http = require('http') , server = http.createS ...

htmlnode.jstwittersocket.io

GeoApiFrProvider Leaflet Alert: Incomplete search requests being sent

I've been developing a map application using Leaflet and the GeoApiFrProvider. Everything is working fine, but I've run into an issue where the search request is being triggered prematurely, especially when the address starts with the digit "1." ...

javascriptreactjsleafletgeoapi

Is it possible to have the background blurred, but only specifically behind the overlay?

How can I make the div appear as if it is blurring the background image of the page, even when the position of the div is changed? Also need to ensure it works seamlessly during window resizing. ...

css

Is it possible to have the Target='_blank' attribute open the link in a new window instead of a new tab?

Is there a way to achieve this? When using Firefox, the link opens in a new tab, which I prefer to avoid users having to adjust settings in their browsers. I am looking for a solution where a pop-up contact form appears whenever a user clicks on 'co ...

javascripthtmlbrowser

Adding a property conditionally in jsx: A guide

I have a simple example of Material UI RadioGroup code that I want to display conditionally in either a row or column format. By default, it is displayed in column format. Below is the code snippet: <RadioGroup aria-label="gender" name=&q ...

javascriptreactjsmaterial-uiradio-group

AngularJS - Implementing a sliding down menu feature with the ng-click directive

Is there a way to modify my menu button so that it slides down and up when clicked, instead of just showing and hiding? HTML: <div class="nav"> <nav class="primary-nav" ng-show="showMenu" ng-class="{true: 'showMenu'}[showMenu]"> ...

angularjscssangularjs-scopeng-class

What are the steps to developing a unique JavaScript function?

Recently, I created a new function. function createGarage(id) { var id = 'data.models.'+id+'.pictures'; $.ajax({ url: 'models.json', type: 'get', dataType: 'json', error: function(data) ...

javascriptjqueryajax

Is your Bootstrap button displaying a blue border?

Recently, I incorporated buttons into my website using a bootstrap template. However, after customizing the button colors, I discovered an annoying blue outline appearing around each button. Despite numerous attempts, I have been unsuccessful in eliminatin ...

cssbootstrap-4