Select Lesson
What is Everything? The IDE Layout
Create a File
Delete Files
Add Images
Share your code
Share your Webpages
Create Folders
Add Files to Existing Folder
Add Image Subfolder
Add Multiple Images
Add CSS to Root Website Folder
Downloading your IDE (CSS and file paths)
Filepaths
Conventions
Create web projects with IDE
What is Everything? The IDE Layout
Create a File
Delete Files
Add Images
Share your code
Share your Webpages
Create Folders
Add Files to Existing Folder
Add Image Subfolder
Add Multiple Images
Add CSS to Root Website Folder
Downloading your IDE (CSS and file paths)
Filepaths
Conventions
HTML/CSS Website IDE
This is the web IDE , a space for you to make websites and webpages and other apps.
You can create webpages (.html), stylesheets (.css) and javascript files (.js).
You can share the URL to give people access to your website and share your code for others to see.
This is the place to practice your learning with personal projects or complete website based assessments.
What is Everything? The IDE Layout
1. IDE action buttons
2. Resource Buttons
The resource buttons connect you to support, let you look up code in the reference, access your own notes and access tools, like color widgets, and show you shortcuts and files.
To learn more go to our Guide to the Resource Buttons
3.File explorer
4. Text editor/ Code editor
This is the Code/Text editor where you write your code. You can use the IDE action buttons to add new images and files or you can right click here and use the shortcuts on specific folders.
5. Web Output
This is what your webpage would look like on a mobile phone. Click the URL on the mobile screen to open it in your browser. You can copy and send that URL and others will be able to open it.
Refresh is useful to make sure that an external CSS is updating.
6. Reminders
We have a few bits of code here to remind you of important HTML you might want to use.Create a File
To create a single webpage or style sheet simply
- Click the new document icon,
- Name your document
- Add a file type to it (IMPORTANT)
.html
for a webpage,.css
for a style sheet and.js
for a JavaScript file.
These will save automatically inside their folders (see where project.html
, project.css
and project.js
are in your IDE.
Delete Files
To remove files or folders:
- Right-click on the file/directory you wish to remove and
- Delete the file or folders
OR
- Click on the file/directory you wish to remove and
- Click the DELETE button
Be careful, it is not reversible.
Add Images
- Click on the camera icon in the IDE action buttons.
- '''search through your computer and select and image to upload
- '''the images folder will appear to store your images in. You can delete the file path and the image will appear in your named folder next to
project.html
. - You can rename your image
- The most common image file paths to use are
.png
,.jpg
and.gif
. They have to be under 500kb to be uploaded. tinypng.com is an awesome free site for making Jpeg and PNG files smaller. - Click OK
- See your image appear in the file explorer.
If you click on your image when on a web page it will show you the three different ways to add your image to your page
Absolute path:
<img src="https://www.codeavengers.com/c/ilanasignal/images/red-bug.png">
Root Relative path:
<img src="/c/ilanasignal/images/red-bug.png">
Document Relative path:
<img src="images/red-bug.png">
These file path notes can tell you more.]]
Share your code
You can get a URL to show the code of a file you are working on to your friends, or maybe to a teacher or moderator. They have to have a code avengers account
- Teachers looking to share assessments with moderators please message support@codeavengers.com
Share your Webpages
or "Deploy Your app to the Web"
- When you have selected the html file you wish to share, you can either
- click the URL on the phone or hit the deploy button.
- Both will open up a live webpage.
- Copy and send the URL to people you want to show it too.
Create Folders
If you are making a website then all your files should be in one folder, and your first page should be called index.html
To create folders inside your file explorer you simply:
- Create a new file,
- Name a folder, add a forward slash and then the file name and file type (.html for a webpage, .css for a stylepage)
New file name: website-name/index.html
- Click OK
- See file appear inside your new folder.
Add Files to Existing Folder
To add more files to existing folders you simply:
- Right-click on folder
- Left-click create new file
- Type in name of file (you should see the folder file path)
Add the file ending
.html
for a webpage and.css
for a stylesheet. - Click OK
- See file appear in the file explorer
You can watch this YouTube video showing the process:
Web IDE: Add a root folder Code Avengers Tutorial
- Currently the CSS will always be added to the css folder, not the website root folder.
How to create an subfolder
To create a sub-folder you simply right click on an existing folder and a new file and add a file path
website-name/sub-folder-name/
Or you can:
- Select the create new file button
- Write in the names of the folders
website-name/sub-folder-name/page4.html
)
- Once you have clicked OK your sub-folder will appear in the file explorer.
- You can right click to add files or images to it.
Add Image Subfolder
You should add an image folder inside your websites
root folder
, it is good practice to have everything for a website in one root folder.
YOu can easily add an /images/ subfolder using the method above, but this one below is also very easy.
Here is how to add an image sub folder to your website.
- Left-click the UPLOAD IMAGE button
- Find an image file to upload
- Insert the folder name in the front (Spelling is important)
- Click OK
- See new sub folder and file appear
You can watch this YouTube video to see how to add a image subfolder.
Web IDE: Add a new image folder Code Avengers Tutorial
Add Multiple Images
To add more image files to existing folders you simply:
- Right-click on folder
- Left-click upload image
- Find an image file to upload
- Click OK
- See file appear in the file explorer
You can watch this YouTube video to see how to add an image to a folder.
Web IDE: Add multiple images Code Avengers Tutorial
Add CSS to Root Website Folder
To add css to a folder instead of the css folder add a /
forward slash BEFORE the folder name. (See image)
/website-name/codeavenger.css
Link CSS and HTML in the same folder
Linkcodeavengers.css
in the html index page
<link rel="stylesheet" type="text/css" href="codeavenger.css">
Link to CSS inside of Html's Root folder
project.css
linked to project.html
<link rel="stylesheet" type="text/css" href="css/project.css">
Link to CSS outside of Html's Root folder
project.css
linked to index.html
<link rel="stylesheet" type="text/css" href="../css/project.css">
This means Go back a folder (From
website-name/
to ilanasignal/
)
Go into css/
folder andfind''' project.css
Downloading your IDE (CSS and file paths)
You can watch this YouTube video on downloading your IDE (CSS and file paths)
Web IDE: Downloading CSS and understanding File paths
This video is useful for assessments. ALWAYS DOWNLOAD AT THE END OF EACH SESSION.
Filepaths
File paths are important to understand because websites are simply files that have links to other files.
This level 1 Code Avengers lesson >> can teach you about file paths.
These lesson plan notes can tell you more: Notes on Linking files >>
Save everything for a website inside one base folder, called a root folder, and name your main page "index."
Linking webpages is easy. You just add an anchor tag and the file name of the page you want to link up.
If you were editing "index" and wanted to link to "page 2" you would add this code into index.
<a href="page2.html">Click here to go to page 2</a>
Want to know more?
Here are the three different file-path types to add this image onto the index.html webpage.
If you look at the above picture you can see the files and some folders are inside other folders? We are working on index.html, inside the website-name folder.
Document relative
If a file is in the same folder as the webpage you are writing you just need the file name to insert a link on your current webpage.
<a href="page2.html">Click here to go to page 2</a>
If say you wanted to link to project.html, which is a folder up in the ''ilanasignal folder''' you would write
<a href="/project.html"> Here is a project</a>
the forward slash, /, means "go up or back a folder"
These are both "document relative" ways to link, and you use them when you are linking to a file in your computer/server.
(Here everything is on the Code Avengers website and there is a file explorer for you to see your documents and how they are linked.)
When you link to from one document to another then you can move your documents around (As long as you move them both) So you could move both index.html and images/red-bug.png into the c folder and the link would still work. As long as they still have the same distance from each other it doesn't matter where you move the files.
Root relative
<img src="/c/ilanasignal/website-name/images/red-bug.png">
www.codeavengers.com is the server. It it has many files and folders on it. The root folder in this case is for all your IDE stuff is kept in folder-c
, folder-your user name
.
A root folder is just the name for the folder that contains everything. It can apply to any folder you like. Website-name
is the root folder of our website, ilanasignal
is the root folder of all the newly created files made by that user. c
is the root folder of all the IDE stuff, including the Code Avengers pre-made CSS sheets and images.
This address doesn't rely on where index.html
is as long as it is in the c folder
but the image can't be moved without the link breaking. So your image file
is connected to the root folder
not the index file
.
Absolute
The file paths to other websites are "absolute" and you use them to reference files outside of your computer/ server.
<img src="https://www.codeavengers.com/c/ilanasignal/website-name/images/red-bug.png">
www.codeavengers.com is the server. This file path points to exactly where the image is. If the image is moved around in anyway the link will not work. But it doesn't matter in anyway where your index file
is located. It could be in the IDE, it could be on your computer as a file, it could be on another website.
When ever you link to another website you will use the absolute url file path.
Conventions
- Use external CSS sheet with websites
- For each website have a root folder that contains all your images/files/folders
- Follow the Google Style Guide on writing in HTML/CSS, also the W3School guide is pretty easy to read.
- Name your first file of each webpage, the homepage, index.html
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F