Previewing Your Webpage

#Basic Html (1).png

Part of me feels like I’m the only person in the world who struggled so much with this.

No, I’m not talking about resisting the urge to DM my favorite celebrities, I’m talking about turning my webpage from code on a code editor to something tangible in my Chrome Browser.

At the beginning of my coding journey I felt a little like this:

sometimes-i-start-a-sentence.jpg

I kinda knew what I was doing but mostly I hoped I’d figure it out on the way.

And you bet your ass I did just that!

Viewing Webpage in Chrome

If you’ve gotten far enough to where you have <!DOCTYPE html>, the HTML Tag , the mysterious Head Tag, AND a title in the Title Tag then Hunny you are ready to Rock N’ Roll.

91B8295C-4AD7-41AB-ABC8-B554D4C9B4F0.gif

Le Code:

Screen Shot 2018-09-17 at 8.15.26 PM.png

One way to view your work on the internet is by right clicking on your file name in your code editor – I’m using Visual Studio Code 2.0.

You’ll see a menu open up, and you’ll want to click Reveal in Finder.

Screen Shot 2018-09-19 at 10.31.55 AM 2.png

Yas hunny then your Finder will appear:

Note: If you’d rather not have to open up your code editor, simply open up the folder on your desktop that has your index.html file!

Mine is called ‘New Website’, v creative.

Screen Shot 2018-09-19 at 10.37.39 AM 2.png

Select/double click ‘index.html’.

And VIOLA! A Blank Ass webpage.
*Note:You best have saved your document as index.html OR ELSE IT PROBABLY WONT WORK

Screen Shot 2018-09-19 at 10.44.36 AM 2.png

But it’s your Blank Ass Webpage.

And it’s ready for you to go full Extreme Home Makeover on it.

cce61db2c4b50d5fb61e4493d4257c25.jpg

 

Up Next: Getting Meta – What is it and how does it work?

Leave a Comment!