Simple Web Page With Css
Use CSS to style a web page from scratch
One of the best ways to get started when learning about web design and CSS is to get your hands dirty and style a simple web page from scratch.
- See a Demo: https://johndoenma.github.io/coursework/art128/simplewebpagewithcss/index.html
- View on Github: https://github.com/johndoenma/coursework/tree/master/art128/simplewebpagewithcss
- View on Codepen: https://codepen.io/kccnma/pen/ppQdmo
Video Lesson
Watch the video below for a guided step-by-step demonstration of this assignment.
Let's Code!
Get started by launching your favorite code editor (IDE)
Create a new HTML folder named "simplewebpagewithcss"
Inside of your new directory, copy-paste your simplewebpage.html file and rename it to index.html. Next, create another new folder named "css" and inside of it create a new file named style.css. This is the file that we will be editing. Once you are all setup, your local folder setup should look like this:
Start Styling!
Next, go line-by-line and write every line of css from the code below by hand. After each line, hit save then preview your changes in the browser by hitting refresh.
HTML
[gist https://gist.github.com/kccnma/8e23e593457c7bf9eea97f91e01e4c98 /]
CSS
[gist https://gist.github.com/kccnma/07c097807856b1aabad207bec6076389 /]
When you done, it should look like this:
[codepen_embed height=”265” theme_id=”0” slug_hash=”ppQdmo” default_tab=”html,result” user=”kccnma”]See the Pen Simple HTML Web Page with Base CSS (ART 128 Assignment #2) by kccnma (@kccnma) on CodePen.[/codepen_embed]
Last Step: Use Filezilla to upload your new directory and all new files and sub folders via FTP
Launch Filezilla and connect to your host (remote) server. Be sure to navigate to your target "public_html" or "www" directory and upload your new file to the correct sub folder/directory.
If you completed this assignment, great job!
Summary
Getting started with CSS is a little harder than HTML, but not much harder. Just like HTML, the more you code, the easier it will get as you practice writing code and building web sites.