Eventually HTML5 Project - PBL (#24)

* image update

* new change

* eventually PBL

* added guided key

bird-app/step0/Instructions.md

@@ -2,4 +2,4 @@ Hello there, welcome to the first step of the making bird app social media proje
 
 ## Build a landing page for the social media
 
-This step involes you building a landing page for the social media website. Take a look inside the task checklist on the left to see all the steps you have to complete to pass this step.
+This step involves you building a landing page for the social media website. Take a look inside the task checklist on the left to see all the steps you have to complete to pass this step.

eventually-html5-landing-page/spec.yml

@@ -1,32 +1,33 @@
 name: Eventually - Stunning HTML5 Landing Page
-tags: ["HTML/CSS","JavaScript"]
+tags: ["HTML/CSS", "JavaScript"]
 starter-files: https://github.com/codedamn-projects/eventually-stunning-html5-landing-page
 type: frontend
 level: easy
-cover-image: https://raw.githubusercontent.com/codedamn-projects/eventually-stunning-html5-landing-page/master/assets/desktop-design-non-fs.jpg 
+cover-image: https://raw.githubusercontent.com/codedamn-projects/eventually-stunning-html5-landing-page/master/designs/Landing%20Page%20%5BDesktop%5D.jpg
 short-description: A simple and minimal landing page built in HTML5 for a pre-launch to collect email addresses. You will learn about background images and building a deployable landing page in this project.
 long-description: |
   Your challenge is to build out this landing page and get it looking as close to the design as possible.
-  
+
   This project focuses mostly on HTML, CSS and layouts with CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
-  
+
   You can use any tools you like to help you complete this project. So if you've got something you'd like to practice, feel free to give it a go.
-  
+
   Your users should be able to:
-  
+
   - View the optimal layout for the site depending on their device's screen size 
-  
+
   - See hover states for all interactive elements on the page 
-  
+
   - Download the starter code and go through the README.md file.
-  
+
   The `README.md` file will provide further details about the project. The `style-guide.html` file is where you'll find colors, fonts, etc.
-  
+
   Don't forget to share your submissions with the community to get feedback. All the best.
-    
+
 # https://codedamn.com/projects specific section
 codedamn:
-    helper-learning-path: frontend
-    show-community-banner: true
-    playground-layout: terminal-editor-browser
-    playground-image: html
+  helper-learning-path: frontend
+  show-community-banner: true
+  playground-layout: terminal-editor-browser
+  playground-image: html
+  guided: true

eventually-html5-landing-page/step0/challenges.yml

@@ -0,0 +1,7 @@
+name: "Creating Elements and tags"
+stepId: step0
+stepBreakDown:
+  - text: "Add the heading and the description of the page"
+  - text: "Add the form with email address and sign up button"
+  - text: "Add the social/contact links with icons"
+  - text: "Add the footer"

eventually-html5-landing-page/step0/instructions.md

@@ -0,0 +1,21 @@
+In this step, our goal is to create the HTML elements and complete the basic Markup. 
+
+You have to add all the HTML elements that are present in the design. 
+
+- `Eventually` H1 heading 
+- Description 
+    Add the description text given 
+    ```text
+    A simple template for telling the world when you'll launch
+    your next big thing. Brought to you by HTML5 UP.
+    ```
+- Email Sign up form
+    Create the input tag of type email and set the placeholder of as `Email Address` and add a submit button with the text `Sign Up`
+- Social Links
+    Add the four social icons given in the design, all the icons can be found in `assets/icons/` folder. 
+- Footer
+    Add the footer text 
+    ```text
+    © Untitled. | Credits : Unsplash + HTML5 UP
+    ```
+    For using the copyright symbol, you can also make use of HTML Entity `©`

eventually-html5-landing-page/step1/challenges.yml

@@ -0,0 +1,5 @@
+name: "Adding Background Image"
+stepId: step1
+stepBreakDown:
+  - text: "Add the background image to the body"
+  - text: "Background image should span across the entire viewport"

eventually-html5-landing-page/step1/instructions.md

@@ -0,0 +1,5 @@
+ In this step you have to add the background image to the landing page 
+
+The background image is located at `assets/images/bg.jpg` 
+
+You can make use of the background-image property of CSS to add the image, also make sure that the image spans across the entire viewport and the background image does not repeat. Here you can make use of the `background-repeat` and `background-size` property. 

eventually-html5-landing-page/step2/challenges.yml

@@ -0,0 +1,9 @@
+name: "Adding Styles"
+stepId: step2
+stepBreakDown:
+  - text: "Adding 'Roboto' font to heading and description"
+  - text: "Align the content of the page to left-center"
+  - text: "Add background-color to Sign up button (#1cb495)"
+  - text: "Add spacing between form input and button"
+  - text: "Align the social icons in a single row"
+  - text: "Set the font size to heading, description and footer text"

eventually-html5-landing-page/step2/instructions.md

@@ -0,0 +1,33 @@
+In this step you'll be adding the styles to make the landing page look better. 
+
+1. import the fonts from the assets and write the `@font-face` properties for both of the font assets. 
+
+    ```css
+    @font-face {
+        font-family: 'Roboto';
+        src: local('Roboto'), local('Roboto-Regular'),
+            url('assets/fonts/Roboto-Regular.ttf') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+    }
+    ```
+
+    Make sure to write similar @font-face rule for the Roboto Bold (font-weight: 700)
+
+2. Make sure to align the content by setting top and bottom margins 
+
+3. Set the background-color of the Sign up button to `#1cb495` 
+
+    Set the border-radius property for both input and the submit button to `6px`
+
+4. Make the form a flex container and set the `align-items` property to center and `justify-content` to space-between. 
+
+5. Make a flex container for all the social icons, make sure to set the size for the svg icons to 18px. 
+
+6. Add the font styles to the heading and the description and set the font-family to Roboto-700 and Roboto-400 respectively for Heading and description. 
+
+    Set the color of the description and the footer text to `rgba(255,255,255,0.5)`
+
+
+

eventually-html5-landing-page/step3/challenges.yml

@@ -0,0 +1,6 @@
+name: "Make the page responsive"
+stepId: step3
+stepBreakDown:
+  - text: "The landing is responsive on mobile screens"
+  - text: "The landing page is responsive on small to medium sized screens"
+  - text: "The landing is responsive on large screens"

eventually-html5-landing-page/step3/instructions.md

@@ -0,0 +1,18 @@
+In this step you have to make sure that the landing page is responsive across all major resolution breakpoints. 
+
+The following are the common breakpoints used : 
+
+    320px — 480px: Mobile devices
+
+    481px — 768px: iPads, Tablets
+
+    769px — 1024px: Small screens, laptops
+
+    1025px — 1200px: Desktops, large screens
+
+    1201px and more:  Extra large screens, TV
+
+Take a look at the mobile design in the `/designs` folder and set the layout for the mobile media query such that the content is at the center of the screen.
+
+You can adjust the resolution of the landing page using the dev tools to test out your page looks across different resolutions. 
+