Important: your first page (homepage) should have the name index.html or index.phpįor your site-address to work, your site should have an index-file: your first page (homepage) should have the name index.html (or index.php). This is explained in a separate page: Next step: upload the page to your website You now are ready to upload the files to your site. Go to the CSS tutorial of W3Schools to learn more). Least read the first pages from Introduction until Styles and use/test what you learned by adding it to your HTML document. If you have not done so yet, then now is the time to learn a bit more about HTML from the W3schools tutorials. You can now further customize the page, make it your own, try out things. But in browser-plus, you can turn on Live preview (icon with lightning bold), which will automatically refresh the preview (but you still have to press The preview will change only once you save the file (press CTRL+S) and refresh the preview (press F5).
Atom livereload how to#
See the bottom of this page on how to install packages in Atom. A better preview can be generated by the browser-plus package. You can get a basic preview inside Atom also: press CTRL+SHIFT+M.Right-click the file and choose "Show in Explorer". To quickly browse to the website folder, you can open it directly from Atom.It might be a good idea to keep working with a preview opened, eg.
Atom livereload windows#
In the Windows Explorer (or Finder), browse to the website folder and double-click on the index.html file: To check if the page looks good, you can preview it in your browser.
Atom livereload code#
Add code for an image element to embed the image in the html document:
Now study the W3Schools tutorial chapter on images. Next, paste it in the subfolder 'img' of the website-folder: Right-click the website folder and choose New Folder:Ĭopy an image to be used for the page to the folder "img" (use Windows Explorer/Finder): Type html and press Enter to insert basic HTML code.įirst, add a new folder 'img'. Is there a quicker way to do all this? Yes!Ĭreate a new file: press Ctrl+N. Add a proper title, headers and paragraph-text (info shown below is just an example): Next, paste it in the index.html file in your editor (use Edit > Paste or CTRL+V): Now copy the HTML example code (select it and right-click it and choose Go to the HTML introduction of W3Schools, or to any other tutorial which shows a start of an HTML document. You now are ready to add HTML code to the file index.html. Your project in Atom should now look like: Next, save the 'untitled' file: choose File > Save or press CTRL+S. If there is no 'untitled' file, add a file via File > New File:
If there is already an 'untitled' file, skip the next line. So if you would like to add images, copy them to the website folder (it is recommended to create a subfolder for that, eg. Important: add all files to the website folderĪll files you would like to add to your site have to be in the website folder. You now are ready to add files to the website folder. In Atom: choose File > Add Project Folder, click New Folder, type a name, select it, press Select Folder: We can do this from the editor (or use the Windows Explorer/Finder): Create a folder for your websiteĬreate a folder for your website, for example in your 'Documents' folder: Install the editor you choose and continue with the steps below.
In this tutorial we will continue using Atom.
0 kommentar(er)
