https://github.com/mosnad-web01/abdulaziz-phase-0-html-riyadh-blog-lab

https://github.com/mosnad-web01/abdulaziz-phase-0-html-riyadh-blog-lab

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/mosnad-web01/abdulaziz-phase-0-html-riyadh-blog-lab
• Owner: Mosnad-Web01
• License: other
• Created: 2024-08-15T11:19:20.000Z (5 months ago)
• Default Branch: master
• Last Pushed: 2024-08-15T11:21:29.000Z (5 months ago)
• Last Synced: 2024-11-14T16:48:01.234Z (2 months ago)
• Language: JavaScript
• Size: 908 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# BONUS: Riyadh Blog

## Learning Goals

- Create an HTML structure for an existing mockup

## Introduction

Web developers are often asked to work from a mockup of a potential webpage,

generally referred to as either a `mockup` or `comp`. In this lab, you'll be

asked to use a mockup image, source text and images, and create an HTML

structure that mirrors the mockup image.

## Getting Started

**Fork and clone** this lesson into your local environment. Navigate into its

directory in the terminal, then run `code .` to open the files in Visual Studio

Code.

## Create an HTML Structure for an Existing Mockup

### Process

In the `index.html` file, use the comments in the code to place the content from

`SOURCE.md` in the proper locations. The image file

[`MOCKUP.jpg`](https://s3.amazonaws.com/learn-verified/RIYADH-MOCKUP.jpg) can be

used as a reference to build the `index.html` page as it appears.

Open `index.html` in a separate browser tab to see your progress as you work.

Run `npm test` as you go to see test results.

### Bonus

Use CSS in the `style.css` file in the `css` folder to change different aspects

about your page such as:

- font color

- font size

- font family

- change the background image to a color

- change the background color to a gradient

You can also try modifying these styles on-the-fly by modifying them with the

[developer tools] of your [browser].

You might think: "BUT I DON'T KNOW CSS" (_very well_ or _at all_). Developers

_constantly_ encounter this feeling. Since developers are constantly learning,

we try to keep the commands as simple as possible. You might know more than you

think! What happens if you change `red` to `green`? What do you expect? How

would you validate your guess? Developers usually call this process "trying

stuff" or "messing around" or "playing with stuff." While all those phrases

sound like a joke, what they mean to say is that they're using the Scientific

Method to validate their guesses into building a model.

It's possibly the most powerful learning technique possible. Toddlers and

puppies are amazing at it!