You'll be making an HTML page with CSS. If you need a quick refresher before you jump into coding, look back at the HTML video on elements and media
- Git clone this repo:
$ git clone https://github.com/wdi-sg/blog-mockup.git
cd
into the directory in yur command line- Create an
index.html
andstyle.css
file in this directory and open them in the browser to begin
Look at the image below and create this webpage using HTML and CSS.
IMPORTANT Make sure to check your work in the browser as you write your code.
๐ Reminder:
Using the commandopen index.html
inside the terminal when you are inside the folder with yourindex.html
file will open your application in your browser.
- Take a few minutes to describe what you see and figure out what tags you'll likely need
-
URL for image: https://imgur.com/NzdTHeo.png
- NOTE: This image is large! You'll have to resize it using CSS later on
-
Don't worry about matching the colors/fonts exactly, but in case you do want to try:
- The fonts were found on google fonts
- Consider using a color picker to find the hex codes used in the mockup!
- Macbooks come with an app called Digital Color Meter that you can use, or you can find a color picker online through google
-
For text to fill the paragraphs, there are a few ways to do this:
- in your
.html
file typelorem
and press tab to get some auto generated text by atom. - use a standard Lorem Ipsum generator
- want more flavor? Choose one from this list
- explore even more and practice your google-fu
- in your
-
The links that you create do not have to go anywhere, but you should be able to click on them.
- Reminder!: Use a
#
as the value ofhref
to make a "dummy" link.
- Reminder!: Use a
-
Do another mockup! We've provided a second mockup in the doggie directory.
- View the mockup here
cd
into thedoggie
directory and do your html layout mockup in the providedindex.html
file!- If you get to the css, make sure to use the provided
main.css
file as well
- If you get to the css, make sure to use the provided
- ๐ Reminder: We provided all the images needed in the
img
folder, so you'll need to use relative pathing to get those into your index.html
-
Or, just move on to the hungry for more below
-
Create an
about.html
file which has similar content to the index. -
Have the "About" link in the
index.html
file send you toabout.html
. -
Have the "Home" link send you to the
index.html
page.