diff --git a/README.md b/README.md index c8fe1aaa9..313fccd40 100644 --- a/README.md +++ b/README.md @@ -2,482 +2,6 @@ # CSS | Flexbox Slack Clone -
+My first fully responsive clone project, I've learned too much. Here what is looks like: -

- slack landing page mobile -

- - -
- -

Learning Goals

- - -This exercise allows you to practice and apply the concepts and techniques taught in class. - -Upon completion of this exercise, you will be able to: - -- Develop a fully responsive webpage using the provided designs as a guide. -- Use CSS _media queries_ to adapt the page layout to different screen sizes. -- Use _Flexbox_ to layout and position elements on a webpage dynamically as either rows or columns. -- Use the CSS `position` property to position elements on a webpage. -- Display images on a webpage and make them responsive according to the viewport size. -- Submit completed work using Git and GitHub by creating a Pull Request. - -
-
- -
- -
- -## Introduction - -**Slack** is a cloud-based set of team collaboration tools and services, or in simpler terms, an online chat application. - -Slack app is used in daily communications within different teams in companies, but today we will be focusing on their landing page. In today's lab, we'll recreate Slack's landing page while ensuring it's responsive and adapts well to different screens. You can see the _desktop (large) screen_ version of the web page we will be cloning [here](). - -
- -The lab's goal is to create a _responsive_ landing page using **CSS** and **Flexbox**, starting with the styles for the mobile (small) screens first and then adapting the layout to larger screens using _media queries_. - -We have provided you with the all the HTML and the images you will need for the page, as well as the screenshots to guide you with the styles and layout for each screen size. - -
- -## Getting Started - -- Fork this repo -- Clone this repo - -
- -## Submission - -- Upon completion, run the following commands: - - ```bash - git add . - git commit -m "done" - git push origin master - ``` - -- Create a Pull Request and submit your assignment. - -
- -## Instructions - -The `starter_code` folder contains all the files you'll need. The `images` folder contains all the images you'll need for your page, although most of them are already displayed on the page. - -**The `index.html` already contains all the text and content needed. We will be focusing on the CSS and styling!** - -During each iteration, the first step you should do is to inspect the provided screenshots. These are included in each iteration, along with a preview of the final result. Use these as a starting point for implementing your styles. - -
- ---- - -### Iteration 1 | Mobile Screens (width < 768px) - -Mobile first, right? :wink: - -We will start by focusing on the styles for mobile screens first! :iphone: Oh! Remember to use **Flexbox** to create the layout and display the content in rows or columns from the start. You'll be working on adapting the layout to different screen sizes in the following iterations, so it's essential that you start using Flexbox from beginning to end! - -
- - - -When done, your page should look like this: [Preview - Mobile]() - -
- -Use the following page screenshot as the guide: - -
- Screenshot - Mobile Screens - -
- - -[Back to top](#iteration-1--mobile-screens-width--768px) - -
- -
- ---- - -### Iteration 2 | Small Screens (width > 768px and width < 1024px) - -Let's start growing our screen size. In this iteration, you will work on making the website look great on small screens (iPads, tablets, or larger smartphones). You will have to use CSS [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to apply the style and layout changes. Take a look at the preview and the screenshot to see the changes that are needed. Your task is to work on the following: - -- The **header** should go from 1 column to display 2 columns: one with the content and buttons and the other with the image. -- In the **section "TRUSTED BY COMPANIES..."**, the **company logos** should be displayed in a single row. -- The **section "Teams large and small rely on Slack"** should have the **list elements** displayed horizontally as rows. -- In the **footer**, the **list elements** that were previously displayed as a column should now be displayed horizontally in a row. - -
- - - -When done, your page should look like this: [Preview - Small Screens]() - -
- -Use the following page screenshot as the guide: - -
- Screenshot - Small Screens - - - -
- -[Back to top](#iteration-2--small-screens-width--768px-and-width--1024px) - -
- -
- ---- - -### BONUS: Iteration 3 | Medium Screens (width > 1024px and width < 1440px) - -We'll continue by focusing on devices with medium-sized screens (notebooks and bigger tablets). Similar to the previous iteration, you will have to use CSS media queries to apply the style and layout changes. The most noticeable changes in this viewport size are: - -- The **navbar** should now display **all the menu links**. The previously displayed **menu icon** should now be hidden. -- The **section "Welcome to your new digital HQ"** should now display the buttons horizontally next to each other. - -
- - - -When done, your page should look like this: [Preview - Medium Screens]() - -
- -Use the following page screenshot as the guide: - -
- Screenshot - Medium Screens - -
- - -[Back to top](#iteration-3--medium-screens-width--1024px-and-width--1440px) - -
- -
- ---- - -### BONUS: Iteration 4 | Large Screens (width > 1440px) - -Last one! Some small changes and we are done! In this iteration we are targeting large-screen devices such as desktops and laptops: - -- The **signup buttons** in the **header** should now be displayed horizontally, next to each other. -- Additionally, the **image** in the **header** should be centered and fully visible. - -
- - - -When done, your page should look like this: [Preview - Large Screens]() - -
- -Use the following page screenshot as the guide: - -
- Screenshot - Large Screens - -
- - -[Back to top](#iteration-4--large-screens-width--1440px) - -
- -
- -**Happy coding!** :blue_heart: - -
- -## FAQs - -
- -
- I am stuck in the exercise and don't know how to solve the problem or where to start. -
- -If you are stuck in your code and don't know how to solve the problem or where to start, you should take a step back and try to form a clear question about the specific issue you are facing. This will help you narrow down the problem and come up with potential solutions. - -For example, is it a concept that you don't understand, or are you receiving an error message that you don't know how to fix? It is usually helpful to try to state the problem as clearly as possible, including any error messages you are receiving. This can help you communicate the issue to others and potentially get help from classmates or online resources. - -Once you have a clear understanding of the problem, you will be able to start working toward the solution. - -[Back to top](#faqs) - -
- -
- How do I center align HTML text elements? -
- -To center align HTML _text elements_, you can use the `text-align` property and set it to `center`. This property can be applied to any _inline_ or _block-level_ element. - -Here is an example of how you can use the `text-align` property to center align multiple text elements: - -**HTML** - -```html -
-

This is a title

- -

This is some text in here

-
-``` - -**CSS** - -```css -/* CSS */ - -p { - text-align: center; /* Center align all p elements */ -} - -h2 { - text-align: center; /* Center align all h2 elements */ -} -``` - -This will center align all `p` and `h2` elements within the parent `div`. - -For more information, check: [W3C: Centering Things](https://www.w3.org/Style/Examples/007/center.en.html) - -[Back to top](#faqs) - -
- -
- How do I center align HTML block elements? -
- -To center align a block-level element, such as a `div`, `h1`, etc., you can use the `margin` property and set it to `auto`. This will center the element horizontally within its parent container. - -Here is an example of how you can do this: - -**HTML** - -```html -
-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

-
-
-``` - -**CSS** - -```css -/* CSS */ - -div { - width: 500px; - margin: 0 auto; -} -``` - -This will set the `width` property of the `div` to 500 pixels and we set the left and right margins to be equal by using `margin: 0 auto;`. - -[Back to top](#faqs) - -
- -
- How do I center align an HTML image element? -
- -There are a few ways you can center align an image element. - -##### 1. Align an image using `text-align` - -To center an image element in HTML, you can use the `text-align` property on the parent element, such as `div`. Example: - -**HTML** - -```html -
- -
-``` - -**CSS** - -```css -div { - text-align: center; -} -``` - -This will center align all the children elements within the `section` element, including the `img` element. - -
- -##### 2. Align an image as a block element - -The other way is converting the image into a block element and using `margin: 0 auto`. Here is an example: - -**HTML** - -```html -
- -
-``` - -**CSS** - -```css -img { - display: block; - margin: 0 auto; -} -``` - -This will center the image horizontally within the parent `section` element. The `display: block` property is used to make the image a _block-level_ element, allowing the `margin: 0 auto` property to work. The `margin: 0 auto` property sets the left and right margins to be equal, centering the element within its parent container. - -[Back to top](#faqs) - -
- -
- How can I center align elements within a Flexbox container? -
-To center align elements within a Flexbox parent container, you can use the `justify-content` property and set it to `center`. This will horizontally center the elements within the Flexbox container. - -**Example:** - -```css -.container { - display: flex; - justify-content: center; /* Center elements horizontally */ -} -``` - -You can also use the `align-items` property and set it to `center` to vertically center align the elements within the Flexbox container. - -Example: - -```css -.container { - display: flex; - justify-content: center; /* Center elements horizontally */ - align-items: center; /* Center elements vertically */ -} -``` - -
- -For more information and an interactive Flexbox guide, check: [An Interactive Guide to Flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox) - -
- -[Back to top](#faqs) - -
- -
- How can I change the header from having 1 column to having 2 columns using Flexbox? -
- -To change the header of an HTML page from having one column to having two columns using Flexbox, you should do the following in your CSS: - -1. Use the `display` property and set it to `flex`. -2. Add the `flex-direction` property and set it to `column` to arrange the elements in a column. -3. Add the `justify-content` property to align the elements horizontally -4. Use the `align-items` property to align them vertically. - -```css -header { - display: flex; - flex-direction: column; /* Arrange elements in a column */ - justify-content: space-between; /* Align horizontally */ - align-items: center; /* Align vertically */ -} -``` - -To make the header responsive and change it to a two column layout on screens that are wider than 800 pixels, use a media query and set the `flex-direction` property to `row`: - -```css -@media (min-width: 800px) { - header { - flex-direction: row; - } - - /* Change the width of nested div elements */ - header > div { - width: 50%; - } -} -``` - -The header will maintain a single-column layout on smaller screens, but on screens larger than 800 pixels wide, it will change to a two-column layout. - -[Back to top](#faqs) - -
- -
- Why are my media query styles not displaying properly on my browser? -
- -When using media queries to create a responsive layout, it is recommended to start with the default styles for mobile (smaller) screens and then use media queries at the end of your stylesheet to apply styles for each increasing viewport size. - -There are a few possible reasons why your media query styles may not be properly displayed on your browser. - -1. Where applicable, check that you already have default styles for mobile screens. These styles should be placed at the beginning of your stylesheet before your media queries. -2. Ensure you have placed your media queries at the end of your stylesheet after your regular styles. This is because media queries are applied after regular styles, so if you place them before your regular styles, they will be overridden. -3. Ensure you have the correct syntax in your media query. The correct syntax is `@media (expression) {...}`. -4. Make sure that you are using the correct media query expression. For example, if you are trying to target screens that are wider than 800 pixels, you should use the `min-width` in your expression, like this: `@media (min-width: 800px) {...}.` - -For more information on CSS media queries, check: [MDN: Beginner's guide to media queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries) - -[Back to top](#faqs) - -
- -
- I am unable to push changes to the repository. What should I do? -
- -There are a couple of possible reasons why you may be unable to _push_ changes to a Git repository: - -1. **You have not committed your changes:** Before you can push your changes to the repository, you need to commit them using the `git commit` command. Make sure you have committed your changes and try pushing again. To do this, run the following terminal commands from the project folder: - -```bash -git add . -git commit -m "Your commit message" -git push -``` - -2. **You do not have permission to push to the repository:** If you have cloned the repository directly from the main Ironhack repository without making a _Fork_ first, you do not have write access to the repository. - To check which remote repository you have cloned, run the following terminal command from the project folder: - -```bash -git remote -v -``` - -If the link shown is the same as the main Ironhack repository, you will need to fork the repository to your GitHub account first and then clone your fork to your local machine to be able to push the changes. - -**Note**: You should make a copy of your local code to avoid losing it in the process. - -[Back to top](#faqs) - -
+![slack-responsive-clone](readme-img/slack-responsive-clone.gif) \ No newline at end of file diff --git a/readme-img/slack-responsive-clone.gif b/readme-img/slack-responsive-clone.gif new file mode 100644 index 000000000..006cc9a5c Binary files /dev/null and b/readme-img/slack-responsive-clone.gif differ diff --git a/starter_code/images/cloud-download-svgrepo-com.svg b/starter_code/images/cloud-download-svgrepo-com.svg new file mode 100644 index 000000000..4ac4b7bc5 --- /dev/null +++ b/starter_code/images/cloud-download-svgrepo-com.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/starter_code/images/world-wide-web.png b/starter_code/images/world-wide-web.png new file mode 100644 index 000000000..17ae422a1 Binary files /dev/null and b/starter_code/images/world-wide-web.png differ diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..ff6c730aa 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -13,22 +13,30 @@ + + + Slack is your digital HQ | Slack