Skip to content

HTML CSS getting started Wiki

Jump to bottom
Jennifer Yoon edited this page May 10, 2018 · 15 revisions

Welcome to the HTML CSS getting started Wiki!

This page provides supplementary information to the core content found in the /getting-started/HTML-CSS folder. See link HTML-CSS folder

Working Example Website

This is a live website that I have been working on. It uses CSS Grid, Flexbox, an image with Float and Float Clear, and @media quarries to resize the screen for a mobile phone in portrait and landscape modes. (Sorry, not much content yet. If you are interested in investing or financial risk, I will be slowly adding content to this site.)

Try downloading it to your computer with "Save-As" and "Webpage Complete". (Or equivalent commands in your browser.) The 10sr.css file will be saved along with all images and fonts used by the index.htm file. Try re-sizing your browser window and see how the 3-image blocks become 2-image blocks, then all vertical 1-image blocks. The top navigation also goes from inline (horizontal) to block (vertical). Open the .htm or .css file in a text editor and try changing things. Save the changed file and refresh your browser. See what has changed. Try changing the background-color for a section. Change the font styles. Add your own text to the <body> section of index.htm. See what it looks like in the browser. Did it appear in the location and style you were expecting? Remember to save your text file and refresh your browser to see your changes.

YouTube CSS Grid, CSS Flexbox Videos

I also studied Traversy Media's YouTube "crash courses" on CSS Grid and CSS Flexbox. He also has a complete website tutorial using CSS Grid. I recommend them very highly. I watched them several times and reproduced several versions of his example website before working on my own. YouTube video links below.

Why Use the CSS Grid

Several different YouTube video speakers recommend using CSS Grid to layout webpages. It seems to have become the dominant standard around spring of 2017. Float is mainly for laying out an image with text that flows around the image. CSS Grid also seems to have replaced frameworks, such as Bootstrap, for about half of YouTubers. I agree that it is best to try using CSS Grid first, before considering adding a framework.

The main argument is that any website that hires a web developer would want custom design elements and custom user interfaces. Otherwise, many free (or cheap) templates are available for download. And usually those custom elements are not that many for the vast majority of websites. When using a framework, the customized sections overwrites (cancels) all of formatting and commands from equivalent parts that are built into the framework. And the other parts (generic parts) of the framework ends up not being used. This was also my experience. So linking to the framework's .css page only slows page load times. Popular frameworks, such as Bootstrap, are cached on edge servers, but they still incur a minor hit to speed. This is more so for mobile phone users when they are on slower connections.

Editors - built-in text editors and HTML-CSS code editors

You can start with any built-in text editor. On Windows computers, that will be Notepad or Wordpad, and on Macs that will be TextEdit. The files need to be named *.html or *.htm for the HTML file, and *.css for the CSS file. Most people use all lower case names with an underscore or a hyphen for multiple words. File names are case sensitive in some situations. "Portfolio.html" and "portfolio.html" may be considered different files.

A real code editor that I like for HTML and CSS are Notepad++ and Visual Studio Code. Both are free. Notepad++ is easier to use for first timers. It can also print to a local printer and in color, which VS Code can't do (at least not yet). Both can be used for other coding languages too. Both have lots of free 3rd party extensions you can add. VS Code has a very large developer community, and does not have any annoying ads (or notices to upgrade to a Pro version). It's similar to Sublime Text in reach, and may be overtaking Sublime Text in popularity, depending on who you talk to.

When you get more advanced in web development, VS Code has useful extensions called Emmet and Live Server. Emmet is useful for code completion (command + Tab) using short hand commands. Also lorem20 + Tab will create 20 characters worth of lorem text. This is used as a filler to see how a design change will look once text has been added. Live Server allows you to see your changes in the right side of your screen while you are editing the html and css files on your left side. It auto-refreshes when you save the file, so you don't have to keep hitting the refresh button on your browser. (Sometimes the auto-refresh takes time to start working.)

Editors - mainly for Python or Data Science

If you are mainly coding in Python, I recommend VS Code and PyCharm. They have very different ways of running the code terminal/engine/instance. I recommend trying both out for yourself. However, if you are mainly coding in Python for Data Science, then you can't get around installing Anaconda3, in my view. This includes Python 3.6, or whatever is the latest. Jupyter Notebook, which is included in Anaconda, will be one of your top editors. Jupyter also can run R and Julia codes. But if R is your main coding language, I would also recommend installing R Studio in addition to Anaconda. Anaconda also includes iPython shell. I sometimes prefer this over Jupyter/iPython Notebooks, and you may too. It's faster to load/start. It comes with lots of commands to manipulate DOS or IOS file structure. The iPython shell saves all of the current session results, so you don't have to re-run prior cells again (which you have to in a Jupyter notebook). It makes trying stuff out faster and easier. From a DOS or Unix window, type "ipython".

I hope some of you found this useful.
-- Jennifer Yoon, May 9, 2018 --

Clone this wiki locally