building-with-responsive-design

KO | EN

gitlite — search

#ai #llm #golang #android #java #nodejs #windows #cli #kubernetes #vue #awesome-list #pytorch #security #openai

building-with-responsive-design

(★ 9)

This project clones The Next Web, a tech-focused magazine which uses media queries to gracefully degrade their site as the window size is reduced.

building-with-responsive-design Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Building With Responsive Design
![screenshot](https://raw.githubusercontent.com/yokoworks/building-with-responsive-design/master/assets/images/screencapture.png)

## About The Project

This project clones The [Next Web](https://thenextweb.com/), a tech-focused magazine which uses media queries to gracefully degrade their site as the window size is reduced.

The project has involved the use of Grid and FlexBox for positioning of HTML elements to satisfy responsivenes of the page on different
screen sizes.

More on responsiveness, it incorporated the use of media queries, which is a powerful tool that helped in inclusion of block CSS properties only if a certain condition is true, i.e. a particular media screen size which are refered to as breakpoints.

## Table of Contents

* [About the Project](#about-the-project)
  * [Built With](#built-with)
* [Live Demo](#live-demo)
* [Getting Started](#getting-started)
* [Authors](#authors)
* [Contributing](#contributing)
* [Show your support](#show-your-support)
* [License](#license)
* [Acknowledgements](#acknowledgements)

### Built With

* [HTML5](https://en.wikipedia.org/wiki/HTML5)
* [CSS3](https://developer.mozilla.org/en-US/docs/Archive/CSS3)
* [JavaScript](https://en.wikipedia.org/wiki/JavaScript)

## Live Demo

[Live Demo Link](https://rawcdn.githack.com/yocosaka/building-with-responsive-design/80038fce72071091b92950667ba205aae1b1f3d6/index.html)

## Getting Started

To get a local copy up and running follow these simple example steps.

1. On the project GitHub page, navigate to the main page of the repository.
2. Under the repository name, locate and click on a green button named `Code`. 
3. Copy the project URL as displayed.
4. If you're running the Windows Operating System, open your command prompt. On Linux, Open your terminal. 
5. Change the current working directory to the location where you want the cloned directory to be made. Leave as it is if the current location is where you want the project to be. 
6. Type git clone, and then paste the URL you copied in Step 3. <br>
e.g. $ git clone https://github.com/yourUsername/yourProjectName 
7. Press Enter. Your local copy will be created.

## Authors

👤 **Yoko Saka**
- GitHub: [@yocosaka](https://github.com/yocosaka)
- Twitter: [@yocosaka](https://twitter.com/yocosaka)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/yokosaka)

👤 **Lameck Otieno**
  - GitHub: [@githubhandle](https://github.com/Lameck1)
  - Twitter: [@twitterhandle](https://twitter.com/lameck721)
  - LinkedIn: [LinkedIn](https://www.linkedin.com/in/lameck-odhiambo-642b7077/)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues).

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## Show your support

Give a ⭐️ if you like this project!

## 📝 License

This project is [MIT](./LICENSE) licensed.

## Acknowledgements

* [Font Awesome](https://fontawesome.com)
* [Google Fonts](https://fonts.google.com/)

building-with-responsive-design

building-with-responsive-design Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

building-with-responsive-design

building-with-responsive-design Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README