Spense Landing Page

Fiber Landing Page 

Commune Waitlist Page

Remix Template

{"ops":[{"insert":"Great template to practice your CSS transform and flex skills.\n"}]}

Hosterr Waitlist Page

YelpCamp by Colt Steele

Web Developer Portfolio

{"ops":[{"insert":"Perfect for practicing modular components and responsive design.\n"}]}

Personal Blog

Javascript30 Navbar

I can't believe how quickly you're finishing these challenges. They're all so well done! The slider is a nice touch, too.

This is perfect! My only comment is that in tablet size the image in the 'Diversify your portfolio' section isn't fixed to the bottom and is instead in a square that is vertically and horizontally centered. Other than that, great job! 

How long did this take you?

Thank you for the feedback. I fixed that issue with the align-self property of flexbox.
It took 3-4 hours to complete the project.

Very well done for only 3-4 hours of coding! 

Love that you're using SCSS Mixins and variables, very clean!

Click the 'Sign Up' button to see the register design. 

This is so awesome, I love how you've implemented the scrollable testimonials section, VERY clean, good job!

Thanks for sharing your solution. I learned a lot from it.
There is one issue I found but could not overcome it. The section where there is "Secure your money with Escrow." heading, the hyperlink is not working in there.

These are just mockups (some with multiple pages, some not) so most of them have hrefs linking to nothing, that's why :) 

Well I am aware it is just mockups but even cursor is not changing when you hover the mouse on link.

Looking good, my only comment is to reduce the font-sizes for the headings. Can't really comment too much on the code since i'm not that good at coding myself so i'll leave that to someone else!

Just checked, looks like the image is taking the width and height of the container and is a higher z-index than the container so you can't really click it. 

Fixed it by adding this to the (max-w-2xl xl:py-8) div

z-index: 99;
position: relative;

Got the same feedback as yours, everything looks great except the hamburger menu, maybe you could even add a placeholder to the email field.

Great job!

Looks good, the logos seem to be really stretched out though, i'm on Safari if that helps!

Initial thoughts, it's really good! My feedback would be to center the nav items in the navbar, perhaps reduce to container's width (it's currently too wide). As for the April Earnings box, you could set the image to position relative, and position the box absolute to it. It shouldn't take too much time to implement.

Good job nonetheless! :D

Thank you @moeminm,
I’ve changed the navigation.
For the Earnings box, you’re right that’s exactly what I should do but I don’t have a separated Hero image without the April Earnings box.
Thank you for your time.


Navigation is looking much better! 

You're right, i've just added the hero image without the box in the Assets folder, make sure to re-download the files if you want access to it, and thanks for bringing this to everyone's attention! 

Coding isn't my expertise so i'll leave that to someone else, you've done a great job at making it responsive.

My comments are all spacing and font-related. You'll find that the sign up button, for example, has a different font-size than the rest of the navbar elements. There's a lot white space in all sections, I recommend you use a container with a width of 1140px. The shadows on the testimonials section are also harsh. 

Other than that, I think you've done a really great job, keep it up!



Thank you.
Downloaded and updated my assets as well as the implementation Earnings box.
Keep safe.

Looks really good, I don't have any comments design-wise! Great job :D

Looks awesome, love the little animation you've put for the logos, makes it pop up even more! :D

You've nailed this one IMO, great job. TimeNow is a free template and has a landing page and a pricing page, you might like it, check it out!

This is simply awesome! I love you mimicked the challenges pages in Codewell to present your projects. The animation on the TimeNow template is also really creative, one thing worth practicing is changing the data inside the pricing table when the toggle is used in the TimeNow template.

I have no suggestions to give but again, this is awesome! 🔥

Well done! The 'Start Free Trial' is broken for me, i'm using Safari if that helps.

Is there any way we can view the project live? :D

Glad you're taking the initiative to focus more on accessibility! This looks really good, my only comment would be to have the sign up page take up the entire page instead of being centered. Great job otherwise!!

Love it! Looks really clean on all sizes, you've done a wonderful job :)

My only comment is to have the logos as a slider on mobile, currently it's taking too much space up, other than that, looks awesome!

I'm afraid there isn't. You need Xcode to view the project :(

Your Implementation was spot on, great work!

The animations were a silver lining to the great layout

I think you've done a wonderful job! I also like that in the hero you used an actual component for the 'withdraw' part in the image, a lot of people just use an image. Good job!

For only 5 days you're doing pretty well, keep at it! :)

I like the scale effect you added to some buttons, I would've never thought of using that, really cool man.
also the scrollbar it's really cool

Codewell must provide images for mobile and tablet versions also.

Hi Pritam, please re-download the files. I've just added the different sizes in the Assets folder, although, it's better if you just work with one image and have it responsive instead of loading 3 different sizes.

Hi Candra, I would like to say you've done well on this design. However, I noticed that your font was montserrat whereas this is one used the "Cabin" font as stated in the README file. Also in the text editor part of the promotion section, you should try the font-awesome arrow right icons as what you have doesn't meet the UI design. All in all I would say you have done a good job. I have learned a thing or two from checking your source code. Thanks for that. Keep working at it. And i would love to see the responsive version soon. cheers

👋Hi Moemin!

👍Good job on this one! I have some suggestions to improve this solution:
* For the company logos section, I recommend to make it one column on mobile, since right now they are too small on my mobile device.
* I recommend to always use double quotes instead of single quote for all HTML attribute, like this. It is just common practice.

<div class="container"></div>

* For all img tags, you need to have alt (alternative text) attribute. You can leave the `alt=""` empty if the images are decorative only.
* For the "Get Started" button, you should have `type="submit"` since that will be submit an email if this is a real website.
* I recommend to use `ul` and `li` tags for the list of links and the list of company logos. 
* Heading tags must go in order, which means you need to use h1, then h2, then h3, and so on.
* I recommend to use `rem` or sometimes `em` instead of `px`. Using `rem` or `em` will allow the user to control the size of your page based on their browser setting.
* I recommend to wrap all your content except the footer with `main` tag.
* For the `footer`, I recommend to use `footer` element instead of a `section` tag.

Tips for validating your code:
* Always validate your HTML first before you upload to the internet. You can use this official HTML validator from W3C
Link:
https://validator.w3.org
* Also for the CSS:
Link:
https://jigsaw.w3.org/css-validator/

That's it! And keep learning!

Quality feedback, thank you vanzasetia for taking the time to jot all this down. Can't say I disagree with anything, appreciate the support!

Hi, did you have a problem with your images?

Mine has a weird background thing, I can't get rid of.

Great work!
I can't for the life of me get rid of the weird background thing my images have


Hi brother, I believe you didn't push up all your changes. Your repo is pretty empty.

This is my first time partaking in a challenge recreating a simple landing page with HTML and CSS. Critics are very much welcome and appreciated. I hope you can also give me some advice like in what aspects should improve and practice more. Thank you.

Hello! You've done great. Here are my feedbacks
-  I noticed you made use of padding with percentage as the unit on each section, this isn't a very good idea cause on a very large screen it could break the layout and make it look messy.

I'll advice you have a container class like this:

```
.container {

}
```

I'm sorry for sending the message without completing it...

.container {
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
}

Then you can use that class around each section of your page, allowing the sections to have the same max-width;

Also using the unit percentage isn't really the most efficient way, cause it's relative to its parent.  I advise you to learn about units like rem and em.



Hello! You've done great, I have some suggestions that you could work on 

So I noticed you made use of these properties on each section, I'm guessing you're making use of the padding for mobile devices view, which is totally cool but here another approach.

// yours
header, main, footer {
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 30px;
}

// another approach
.container {
   width: 90%;
   max-width: 1000px;
  margin: 0 auto;
}

the width of 90% does give mobile devices some space, which fixes the padding. But your implementation is all good though.

Also I notice this:

<div class="header-wrap">

</div>

Also I noticed this:

<div class="header-wrap">
  <header> .... </header>
</div>

Semantically there's no need for the div element, you could use the header, main, footer elements directly.

Lastly, the solution lacks white space, majority of the elements are too close to each other. 

That's all, I hope it was helpful even though you didn't ask :)

Was this made for mobile only? Looks broken on Desktop for me.

Hello! Thank you so much for your feedback! I'll note and implement it for my next project! ^^

hm looks good on my end! tested in both chrome and firefox. what were you testing on?

This is amazing, i'll feature this in the next community highlight on Twitter and the newsletter! 🔥

You should try to add object-fit: contain in the brand section to avoid warping the images

Really good job man. Try to cap the size of the image on the right side though. Just so it doesn't overflow on larger screens. Maybe flexbox would help make the positioning easier?

Good job Ait, just one note, viewing campgrounds shouldn't prompt users to login, they should be able to view campgrounds without logging in.

Thank you @moeminm,
I've made the changes to meet your requirements.
So user can see campgrounds. but needs to authenticate in order to add a campground or review one.

Project completed.
Users can register, login, add their own campgrounds, and review others campgrounds.
For the image I added an image file upload instead of typing the image url.

Thank you Codewell for this challenge.

Hi There, I just checked your solution you have attempted it very well. Keep doing the good work. Hope you build more 🔥💜

There was an issue on post comment, some users kept tapping the post comment button.
 Fixed now, I added a spinner and disabled the Post comment button on form submit. Thank you everyone and happy coding.

Good job!!! I think it will be better if you write logo as a tag with function onclick reload page  

Great work. Congratulations .
One thing , maybe the dark mode should be global and affect other pages as well.
Happy coding

Oh, thank you for your feedback. I'll do that.

Thank you for your feedback, ill look into it.

Could you share your solution with me? I'm rather new to coding and this would be a great learning experiance for me. 

You can click on 'View Source Code' to see the solution.

Great job Shin, looks like newly added camps are not persisting when you reload the page, perhaps that's something you could Google & learn more about!

Nice work ! You’re definitely not a learner 😮‍💨. I’m done designing the whole project but no JavaScript skills yet. Learning that atm. Anyways where did you get your react training from ? 👀

Awesome work! Everything looks great and I love how you've handled the search function, viewing camps throws me an error though! "Application error: a client-side exception has occurred (see the browser console for more information)." — this happens whenever I view any camp. 

yea i was working on comment section now it's working fine 🚀🚀

it's not responsive only good in mobile view but open in big screens everthing breaks

yes, I forgot to mention that while submitting, only mobile version is ready and also missed search functionality.
Currently working on another urgent project but I submit semi final for review and feedback about current status.

New Link:
https://bluedeepart.github.io/codewell-challenge/

thats good 

i have one advice instead of using 

Hey, really great solution provided! I just have one piece of feedback, can you try and fit the page in 100vh? Because I think that's what is needed in the challenge

Thanks. On a scale of 1 to 10 please rate my work.
Can I show this to recruiters?

You changed the width of body that resulted in inresponsiveness of your website. Use padding in body for gap

Hi SauravHeavyCoder
Thank you for the feedback provided. much appreciated
I will try it in the future and if i understand you correctly i should rather use a 10% padding on the left and right and not a fixed width of 80% with a margin of 0 and auto.


The desktop mode on mobile has issues with proper alignment 

Hover animation on navbar links is so cool. How you do it?

Nice bro. Just update your live website link.

nice site. but when you reduce the page size with ctrl - the site contents fly around

You didn't set up GitHub Pages to see the website live.

sorry for this ill be deleting this i've made a mistake in choosing the right link


Very great work and neat codes but you should try to reduce the width of the hero-image img so the hero image wont overlap the footer at full screen for desktop.
Also you can try reducing the (*) padding so the gradle menu in it can align well with the rest in the drop down menu 
great work!!! whoever you are

sorry the Repositorie is deleted by mistake check my another submission.
thankyou

Please Download first then open document 

I checked your source code and I have had similar issues.
You can try changing the way you added the images where you do something like this
<img src="Assets/Checkmark.svg" alt="checkmark"> instead of
<img src="../Assets/Checkmark.svg" alt="checkmark">
The first one will work locally and on deployment. 
If it works, you might try writing it down so it's easier to get next time.
I am looking forward to seeing the site once the images show. Cheers.


Hello, can anybody help me? I  finished the desktop view of this project using Bootstrap. Really simple: one row, two cols, and flex column layout for the text, but in order to make it responsive the way it's displayed on the picture * logo, picture, and description* cannot be done the way it's coded. I would have to put the logo outside of the row which is not a good option.. Any solutions? Same thing for the table view. Thank you

Hi Tomiwalex! This project looks great! The only thing I noticed was your min-height on your body was set at 200vh. I changed it to 100vh and the footer stayed at the bottom of the page. You really did a great job!

You have done a great job!!!!  Do you have used a lot of backend technology too. Because literally, your solution can launch and use as business website. It is so interactive. Are you a senior fullstack developer? Can you give any advice to me? I am beginner. I want to make my website interactive and can leave comments and login. Can you name the process and order and what tools and language you used in this project. Thank you. 

hi bro how your code in live project please help me the way to live my code .....

Great work Nathan. Just a few simple suggestions from my side. First of all I use a 1920 wide display and I feel the font size is a little small, and it would be even better if it is bigger. In your website the main header's width is small which makes it awkward to see, try using width: 100% and control that with max-width so that it would be responsive. The last thing I noticed is that in the image part the second image is bigger than the first one,  try object-fit: cover in your code. Hope you find it helpful...✌

You did so well. I want to know a few things about Bootstrap5.

Hamburger Button working for mobile navigation

I had issues when I viewed the page on my mobile phone, it all changed from what it was on the developers tool screen size for mobile, the issue now is, I don't know the specific breakpoints in my source code that I'll track modified and correct so that the page won't have issues.
I don't know what breakpoints to track, how can I do that

Hello Nicholas, you should have tried hiding the get-in-touch button for the mobile design, asides that, the code is Perfect.


Also the link you provided to view the source code isn't for this developer portfolio challenge, try making an adjustment, as I'd also like to see the code and check for the possible ways I've made mistakes while writing my own code for the same challenge.

Moreover, what was the breakpoints you used in designing for mobile and desktop?

The designs I Made for my mobile doesn't seem like the mobile design when I published the challenge and viewed it on a mobile phone, I'd like to know how you did yours or if you experience the same difficulty.
Thank you

Uploaded wrong netlify link, not in the index.html

Correct link: https://dazzling-druid-2cd454.netlify.app

Spense Challenge

Fiber

{"ops":[{"insert":"Spense desktop website version using React js\n"}]}

Spense desktop website version using React js

{"ops":[{"insert":"Here's my solution to the commune waitlist page. Feedback is welcome.\n"}]}

Commune Waitlist

{"ops":[{"insert":"Using Bootstrap and vanilla JS.\n"}]}

Fun project that took about a day

{"ops":[{"insert":"I used vite with vue + windiCSS\n"}]}

Landing page

HTML and CSS with JS (for collapse navbar)

{"ops":[{"insert":"Spense landing page challenge with minimum dependencies\n"}]}

Spense landing page

Spense Landing Page With Improved Accessibility & Image Compression

{"ops":[{"insert":"Created using Next.js\n"}]}

Fiber Landing Page

Basic vanilla landing page

{"ops":[{"insert":"Tailwind CSS + HTML\n"}]}

Spense Code Well Challenge

Fiber Codewell Challenge

Fiber Challenge with HTML5, CSS, JAVASCRIPT, SASS

{"ops":[{"insert":"Comments and suggestions are welcome.\n"}]}

Hosterr Landing Page

Fiber landing page with SCSS

Fiber Landing Page using SCSS 

Build Using SCSS

{"ops":[{"insert":"Hi! I tried building Spense app with UIKit on Xcode. Hope you enjoy my app!\n"}]}

Spense app built with UIKit

{"ops":[{"insert":"Built with HTML, CSS/SASS, JavaScript\n"}]}

Slap dashie pass

Fibr landing page with accessibility and srcset

Remix

Fiber Lading Page, sign up incoming... 

Fiber 

Using pure html and css

This challenge flexibilizated my life

Spense Landing Page Solution

Spense solution

{"ops":[{"insert":"Purely used the Bootstrap 5 base classes to structure and style the form.\n"}]}

Commune WaitList page with Bootstrap 5

Hosterr page with Bootstrap 5

Fiber Landing page solution

{"ops":[{"insert":"Completed this challenge, nice design. I had a lot of fun doing it.\n"}]}

Codewell Landing Page w/ mobile menu

C.J Fiber Demo 

Commune waitlist page

React with styled components solution

React Tailwind css

Fiber Landing Page - Built with Gasby

C.J commune demo

Hosterr Starter Landin page with  HTML, CSS, JavaScript &  GSAP

Spense using bootstrap

Fiber Landing page with signup form, slick slider carousel + mobile nav menu

{"ops":[{"insert":"Challenge performed using html, css, css and javascript\n"}]}

Spense

This is my first challenge ever

{"ops":[{"insert":"I learned css and html in 5 days so i'm looking forward practicing\n\n"}]}

Solution

{"ops":[{"insert":"Simple landing page built with Sass\n"}]}

{"ops":[{"insert":"made a fully responsive react website, with mobile menu and signup page\n"}]}

Fiber landing page with react

Commune Website

{"ops":[{"insert":"i swear this is the last one\n"}]}

MajeedAlray - Spense Landing Page

{"ops":[{"insert":"Hosterrr Landing page.\n"}]}

Hosterrr

Commune Waitlist Page 

{"ops":[{"insert":"This is a good design to work with flex and grid.  \n"}]}

HTML, CSS, SASS, FLEXBOX

{"ops":[{"insert":"This website is done with html and css.\n"}]}

responsive layouts with css 

{"ops":[{"insert":"This prototype was made with HTML, SASS and JS.\n"}]}

Spense with HTML and SASS

 Solution Fiber landing page Using HTML and CSS

{"ops":[{"insert":"This is my first Codewell solution. \n"}]}

Mobile first Responsive Fiber landing page (HTML&CSS)

{"ops":[{"insert":"This is Fiber website create with both HTML and CSS\n"}]}

Remix in the work

spense landing page made with html and css

Spense Landing Page  - Ayden Ashcroft

Hosterr Waitlist Page with HTML, CSS and JS

{"ops":[{"insert":"This was encode with practically effective HTML and CSS language........\n"}]}

Hosterr website design 

Hosterr waitlist landing page

Spense Landing Page 

{"ops":[{"insert":"I made the whole thing usign the grid system of bootstrap for responsive\n"}]}

Responsive Fiber website, made using bootstrap and js

Spense starter store website

Spense starter

Free Hosterr Waitlist Page

{"ops":[{"insert":"Enjoyed building this landing page. However, I didn't add active states.\n"}]}

project 1

Codewell

Web Developer Portfolio Challange

Broke the projects into reusable components, such as -