https://github.com/alvp01/tnw-responsive

Microverse responsive web design and mobile first project
https://github.com/alvp01/tnw-responsive

Last synced: about 1 hour ago
JSON representation

Microverse responsive web design and mobile first project

• Host: GitHub
• URL: https://github.com/alvp01/tnw-responsive
• Owner: alvp01
• Created: 2020-03-24T15:28:37.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-04T01:13:06.000Z (almost 5 years ago)
• Last Synced: 2025-01-13T14:52:43.242Z (4 days ago)
• Language: HTML
• Homepage:
• Size: 645 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TNW responsive design project

### Objetive

The main objective of this project is for the students to achieve mastery over responsive web design (RWD) and media queries without the use of any CSS framework.

### Requirements

- [Microverse requirements](https://microverse.pathwright.com/library/fast-track-curriculum/69047/path/step/59540217/)

- [The Odin project requirements](https://www.theodinproject.com/courses/html5-and-css3/lessons/building-with-responsive-design)

### Technologies used

- HTML & CSS

- [Font Awesome](https://fontawesome.com/)

### Approach

I coded the web using the mobile first and responsive web design principles, starting from the small devices screens and adapting the layout to fix larger screen sizes.

To make the web more appealing I downloaded and used some of the original website fonts, so the project could look more like the TNW website.

Finally I imported some Font Awesome icons to make the footer interactive.

### Live Previews

- [Development](https://raw.githack.com/alvp01/TNW-responsive/rwd-media-queries/index.html)

- [Production](https://rawcdn.githack.com/alvp01/TNW-responsive/c31190cb070f1f3cf81c83bef35b923bdb168554/index.html)

### Developer

- [Abel](https://github.com/alvp01)

### Note

I made use of CSS custom properties and variables as an experiment to make the media queries alternatively.