All solutions

In building the "Intro Component with Sign-Up Form" project, I demonstrated a strong proficiency in web development, showcasing my skills in HTML5, CSS3, and JavaScript. The project is well-crafted, incorporating several key features that highlight my capabilities:

1. Responsive Design:

• Implemented a responsive design approach to ensure optimal viewing and functionality across various devices, enhancing the user experience on both desktop and mobile platforms.

2. HTML5 Structure:

• Utilized semantic HTML5 elements to create a well-organized and accessible structure, enhancing the project's readability and search engine optimization.

3. CSS Styling:

• Applied a clean and modern styling approach using CSS3, including custom variables for consistent theming throughout the project.
• Implemented a CSS reset to ensure a standardized appearance across different browsers.
• Demonstrated a keen eye for design with aesthetically pleasing layouts and a thoughtful colour scheme.

4. Form Validation:

• Implemented form validation using JavaScript to enhance user interaction and provide real-time feedback.
• Applied dynamic error messaging and styling, ensuring a user-friendly experience during form submission.

5. JavaScript Functionality:

• Leveraged JavaScript to add interactive features and enhance the overall functionality of the project.
• Developed a robust email validation function to ensure the correct format of entered email addresses.

6. Media Queries:

• Employed media queries to create a responsive layout that adapts to different screen sizes, delivering a consistent experience across devices.

7. Project Structure:

• Organized the project files with a clear structure, separating HTML, CSS, and JavaScript into distinct files for readability and maintainability.

8. Markdown Documentation:

• Provided comprehensive documentation using Markdown, demonstrating effective communication skills and the ability to articulate project features and choices concisely.

13th Project - Interactive - Rating - Component - Interactive Rating Component Project Overview

Description: The "Interactive Rating Component" project is a web application that allows users to provide feedback by selecting a rating from 1 to 5 stars. The project provides a visually appealing and user-friendly interface to collect user opinions on the quality of support services.

Features:

1. Rating Selection: Users can choose their rating by clicking on the star icons provided. The selected rating is visually highlighted.

2. Feedback Submission: The application includes a form with radio buttons for each star rating and a "Submit" button. Users can submit their feedback by selecting a rating and clicking the "Submit" button.

3. Dynamic Content Update: Upon submission, the application dynamically updates the content to show a thank-you message along with the selected rating. This is achieved using JavaScript to manipulate the DOM.

4. Responsive Design: The project is designed to be responsive, ensuring a consistent and enjoyable user experience across various devices and screen sizes.

5. Accessibility: Accessibility is considered, with the use of ARIA (Accessible Rich Internet Applications) practices such as the sr-only class to improve screen reader compatibility.

Technologies Used:

• HTML: Structure of the web page.
• CSS: Styling for visual presentation.
• JavaScript: Dynamic content update and form submission handling.
• Google Fonts: Integration for custom fonts.
• SVG Images: Iconography for visual elements.

Learning Outcomes:

• DOM Manipulation: Gain proficiency in manipulating the Document Object Model (DOM) using JavaScript to dynamically update content based on user interactions.

• Responsive Design: Learn and implement responsive design principles to create a seamless experience on various devices.

• Form Handling: Understand how to handle form submissions using JavaScript to extract and process user input.

• Accessibility: Implement accessibility best practices to ensure the project is inclusive and usable for people with disabilities.

• Version Control: Practice version control using Git, maintaining a clean commit history and managing project changes.

Future Enhancements:

• Animation: Implement subtle animations to enhance the user experience during feedback submission.

• User Authentication: Introduce user authentication to allow users to track their feedback history.

• Backend Integration: Connect the frontend to a backend server to store and analyze user feedback.

Conclusion: The "Interactive Rating Component" project provides an interactive and engaging way for users to share their opinions. It serves as a valuable learning experience in front-end development, covering essential concepts such as DOM manipulation, responsive design, and accessibility. The project can be further expanded and improved to meet evolving requirements and user expectations.

It looked really simple at the beginning, but when you build it with vanilla CSS, you will find some details which might take some time.

Please help me to understand the following. I had to play with, margin and padding in media queries to make it look like the screenshot. If you know then answer It would be appreciated 😃

1> I could not find out how to dynamically decrease space between an image of the note icon and the div with the text "Anual Plan" and text "$59.99/year"

2> I was trying to understand rem in dept. When I checked the font size for 1440 desktop size and for mobile are not changing in the setting and the font looks exactly the same. I only know that 1 rem is the font size of the root element, but do not know how they can help us

3> when we use rem? is it good practice to replace all pixels with rem?

4> When you hover over the button "Cancel Order" you can see it won't only activate the hover effect when you hover over the text but there is white space around it which activates it too. Is there a way to remove that white space and only activate hover effect when hover over the text "Cancel Order"

Thank you in advance

It wasn't difficult but it took some time to build it.

What I found challenging:

1. Working with SVG/icons

• I am still practising the hover effect on SVG/icons it seems every time different.

2. HUDDLE logo in footer section -When I tried to make it smaller it simply hid part of the image

3. text "messages sent"

• in the mobile version, they require each word in a separate line, If I do <br> I am not sure how would I make any difference in a media query. Maybe have one div with two paragraphs and on mobile do flex-direction: column, on desktop flex-direction: row;

4. aria label for social icons

• <a href="https://www.facebook.com" target="_blank" aria-label="Facebook"> <i class="fab fa-facebook-square fa-2x" style="color: #ffffff"></i></a>

It was a simple project. I just to figure out how to do an active state for the image hover element.

What I have learned:

1. HORIZONTAL LINE

• HTML empty div with the class card_horizontal_line <div class="line"></div>
• CSS I gave it line { height: 1px; width: 100%, background-color: var(--Soft-blue); margin-bottom: 1rem; }

I was great challenge to practice landing page structure. Things I have learned:

1. use form for the form(s) There were two inputs in the project, when something contains input and submit button use <form> tag for it

2. inputs must always have labels <label for="email"></label> <input type="email" id="email" name="email" placeholder="Enter your email" required>

3. using figure with a blockquote and figcaption inside for the testimonial.

• <figure>: This element is used to group together content that is referenced from the main content, such as images, charts, diagrams, code snippets, etc. It helps in associating related content together. In your case, the testimonial as a whole, including the quote and the image, is a single entity, and <figure> provides a suitable container.
• <blockquote>: This element is specifically designed for marking up block-level quotations. It helps in indicating that a particular section of text is a quotation from another source. In your example, the actual testimonial text is marked up with <blockquote>, making it clear that this part of the content is a quote.
• <figcaption>: This element is used to provide a caption or legend for the content inside a <figure>. It adds a description or context to the content within the <figure>. In your example, the <figcaption> contains information about the author (name and role), serving as a caption for the testimonial.

4. links to phone and email in footer are not site navigation items so must not be in a nav When we do not need to redirect something we should not use it in navigation

5. as you have more than one nav on a page, these must both be labelled eg aria-label. I labeled the header nav with "primary" and footer nav with "secondary"

6. How redirect user to page and open it in a new window You must not forget https:// before your website otherwise it wont work <a href="https://www.facebook.com" target="_blank">Facebook</a>

What I need help with

1. I do not know how to create the background for mobile and desktop versions
2. I still do not know how to make social icons smaller as designed (fb, ig, twitter)
3. I dont know how to make SVG with icon change colour, (See how Fylo works)

I thought this was going to be very hard, but it was actually really easy.

What I have learned:

SET PARENT CONTAINER

.parent_container{ display: grid; gap: 20px; grid-auto-columns: 1fr; grid-template-areas: "one" "two" "three" "four" "five"; }

SET CHILD CONTAINERS

.child_container:nth:child(1) {grid-area: "one"}

.child_container:nth:child(2) {grid-area: "two"}

.child_container:nth:child(3) {grid-area: "three"}

.child_container:nth:child(4) {grid-area: "four"}

.child_container:nth:child(5) {grid-area: "five"}

Quite a challenge again, I need to improve with my responsive layout

Things I have learned

1. background property

• background-color: rgba | rgb | hsl | hsla | # (hex)
• background-image: (default: none) | url()
• background-position: left | center | right .. | 10% .. | 10 px .. | top left | center bottom
• background-size: auto | cover | contain | 50 px .. |
• background-repeat: (default: repeat) | no-repeat | repeat-x | repeat-y
• background-origin: (default: padding-box) | border-box | content-box
• background-clip: (default: border-box) | padding-box | content-box
• background-attachment: (default: scroll) | fixed | local

2. flexbox "stair-case" component

parent container has width property as well as display: flex

and its children: first child align-self: flex-start second child align-self: center third child align-self: flex-end

It was my first time working with Grid. It was an interesting challenge, I really like different colour on the top of each container.

What I have learned

1. Box-shadow property horizontal offset(x) | vertical offset(y) | blur radius | spread radius | color

2. grid auto value grid-template-columns: auto 1fr

• when we have a column with multiple values from top to bottom. The auto value will adjust the width of the column according to the element which has the most content inside/taking the most space and applies the width of the element to the rest of the elements in the same column

A great challenge to practice responsive layouts

What I have learned:

1. difference between margin and padding

• Padding(padding is not collapsing) -Margin(is collapsing) - use when need to create space between different elements in container .item:not(:first-child) {margin-top: 0.5} or .item:not(:last-child) {margin-bottom: 0.5}

2. make image different colour

• use background colour property to the container where is image nested
• use mix-blend-mode: multiply to img tag

3. margin-top: auto

• if you use flexbox or grid and apply margin-top: auto it will separate element from the elements flow and make them responsive and on the bottom of the container

4. Do Not write in uppercase in HTML

• it might confuse screen readers
• use property text-transform instead

Honestly, it was kind of a challenge. I was able to finish the project with help from community members and it helped me learn a lot of new things.

What I have learned:

1. <picture> tag in HTML

• Useful when you use multiple images on the webpage and want to display each on a certain page width breakpoint. One of the attributes inside <souce> tag is "media", this is where you can set the width of the page where you want the certain picture to be shown (like media query, but in HTML).

2. <s> tag in HTML

• if you wrap a text inside, this will cause the whole text will be crossed horizontally with the line. Same as you would apply property text-decoration: line-through in CSS

3. column-gap: CSS property

• equal space between elements in the container apply on container: display: flex together with gap property No need to write extra code writing separately padding/margin on each of the child elements

4. object-fit: cover CSS property

• We didn't have to use it in this project, but when I was trying to tame moving images I discovered this great property, which keeps the aspect ratio the same when the image is resized (It might crop the edges, but the image is not squeezed on the sides when manipulating)

5. Icon image - next to the text

• HTML: <button class="button"><span class="cart-icon"></span>Add to Cart</button>

• CSS: .button{display: flex; align-items; justify-content: center; column-gap: 0.31rem; } .cart-icon{content: url(images/icon-cart.svg); height: 0.87rem;}

• make sure you apply column gap instead of padding to .cart-icon

• use units of height should be in rem

6. When to use <button> and when <a>

• buttons used only when action is needed
• a tag used when you need to redirect to the other page

7. Only accessible for screen readers, not visible on the page

• HTML: <span class="sr-only">Old price</span> <s class="crossed-price"> $169.99</s>

• CSS: .sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

8. <hgroup> element

• create a more semantically structured heading structure, especially in cases where multiple heading elements are used for a single heading or subheading.

9. Use rem or em units instead of pixels

• especially in HTML
• media queries
• font-size
• line-height

10. Letter spacing property in em unit

• it scales with the text size

11. Line-height property

• use unitless values or % (line-height: 1.5)

12. CSS reset

• Use CSS reset every time, it will help you style easier

13. use class selectors, not element selectors for styling (do not target div, but create a class and then in CSS target the class)

14. max-width: property - Really useful property for responsive container

• instead of defining height, width, and margin on .container in media queries

15. if you want 2 divs inside the container to be equally spread

• use property flex: 0 0 50%

16. flexbox works best on its direct child

• make sure when applying Flexbox, only its direct children work as expected. it might not work properly on grandchildren.

1. Grid containers in one column for the mobile version

• It took me a while to figure out how to convert the desktop version into a mobile version 3-row container, however just one property display: block; was needed to make all containers align into one vertical line.

2. Padding increasing inside button element

• I struggled with styling padding in the button element. I tried to increase the padding on the left and right, but it caused the word "up" to be below the "Sign" I simply figured out that the property white-space: nowrap fixed the issue. Even tho a couple of times happened that when I tried to increase the padding of the button I could not do it, even after refreshing the page. I am trying to figure out why.

3. Make paragraph and word "per month" different colour

• I could not figure out how to change the colour of those elements. I tried to change colour, I tried to decrease font weight, but then I found out about property opacity: and changed it to opacity: 0.5;

Things that I have learned

1. container nested in parent container

• has most of the elements display: block by default h1, p, h2, h3, div, ul, ol, header, section, form ... etc

2. basic setup for window centred in the middle

• displayed: flex; justify-content: centre; align-items: centre; min-height: 100vh;

3. only one h1 tag per page is a good practice