Nearly, it looks good on all the screen sizes I’ve tested for except the width exceeds the screen size by a hair. I checked out your code and deleted width: 100vmax in your html tag which seemed to fix it. I hope this helps
html {
font-family: tahoma;
background: url(https://images.wallpaperscraft.com/image/triangles_background_light_91693_1280x720.jpg),
white;
background-attachment: fixed;
color: white;
width: 100vmax; // remove this line
}
Great job on passing the survey form challenge by the way!
Thank you so much!! please let me know if you have any other feedback!
So I went ahead and thoroughly went through your HTML and I do sincerely apologize but I can’t give you decent feedback I feel will go over every point you deserve. Instead what I’ve done is I’ve edited your HTML to a point where it is standardized. What I mean by that is it follows more or less best practices but hardly changes the layout of your page though there are still a few errors and some cosmetic changes:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<h1 id="title" class="titlebox">Survey form</h1>
<div id="outer-layer" class="inner-layer">
<figure class="img-div">
<a href="https://d1qb2nb5cznatu.cloudfront.net/startups/i/193471-4874e7de4b94fec8d4843c03e57f1743-medium_jpg.jpg?buster=1419088995"><img src="https://d1qb2nb5cznatu.cloudfront.net/startups/i/193471-4874e7de4b94fec8d4843c03e57f1743-medium_jpg.jpg?buster=1419088995" alt="cartoon game controller"></a>
</figure>
<p id="description"><strong>Let the world know which platform you game on? </strong></p>
<form id="survey-form">
<div class="labels">
<label id="name-label" for="name">Name:</label>
<input type="text" placeholder="Enter your name" class="input-field" id="name" required>
</div>
<div class="labels">
<label id="number-label" for="number">Age:</label>
<input type="number" id="number" min="1" max="125" class="input-field" placeholder="Enter your age" required>
</div>
<div class="labels">
<label id="email-label" for="email">Email:</label>
<input type="email" placeholder="Enter your email" id="email" class="input-field" required>
</div>
<div class="labels">
<label id="drop-down" for="dropdown"> Select your gaming platform:</label>
<select class="input-field" id="dropdown" required>
<option disabled value="" >Select a platform </option>
<option value="PC">PC</option>
<option value="XBOX ONE">XBOX ONE</option>
<option value="PLAYSTATION 4">PLAYSTATION 4</option>
<option value="NINTENDO SWITCH">NINTENDO SWITCH</option>
<option value="MOBILE">MOBILE</option>
<option value="OTHER">OTHER</option>
</select>
</div>
<div id="radiobuttons">
<p id="radio" class="radio-select">Select why you chose this platform:</p>
<ul style="list-style: none;">
<li class="radio"><label>Quality/Performance:<input name="radio-buttons" value="1" type="radio" class="userRatings" ></label></li>
<li class="radio"><label>Game Exclusives:<input name="radio-buttons" value="2" type="radio" class="userRatings" ></label></li>
<li class="radio"><label>Functionality:<input name="radio-buttons" value="3" type="radio" class="userRatings" ></label></li>
<li class="radio"><label>Other:<input name="radio-buttons" value="3" type="radio" class="userRatings" ></label></li>
</ul>
</div>
<div class="labels">
<h2 id="games">Are you into newer games or older games?</h2>
<label id="check-box" for="checkbox">Older games</label>
<input type="checkbox" value="attribute" id="checkbox" class="input-field" required>
</div>
<div class="labels">
<label id="check-box2" for="newerGames">Newer games</label>
<input id="newerGames" type="checkbox" value="attribute" class="input-field" required>
</div>
<div id="labels1">
<p id="textarea-p">Anything else why you chose this platform?</p>
<textarea name="comments" id="comments" style="height:50px;resize:vertical;"></textarea>
</div>
<div>
<button type="submit" id="submit">Submit answers</button>
</div>
</form>
</div>
Please compare and contrast all of the HTML written here with what you have originally written and note the differences. Google anything you don’t understand or post it here. Also, be aware of best practices for organizing and formatting your code. It’s very important for readability. For instance, in your original code you’d write:
<div>
<p>Some element</p></div>
It is kind of hard to read this. Unless it’s meant to be one line it’s better to write,
<div>
<p>Some element</p>
</div>
One last thing. When using a label element the “for” attribute refers to the element being labeled with an id. For instance:
<form>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"> <!-- note that id="male" and for="male" -->
</form>
Also, be careful to organize your starting and closing tags in a way that won’t confuse you later on. It’s very easy to lose track of your closing and starting tags if you’re not mindful about it. This is a problem I personally had starting out. Unfortunately, HTML is not like javascript in that HTML can contain errors yet still run perfectly. If something isn’t written correctly in JS we get a huge red flag and the code will fail to run. Though errors and bugs in JS are a black hole of their own.
Finally, Some tips on UI and UX and design.
-
Use dribbble to get inspiration for designs. The guys on there are top tier and represent what the industry is looking for in design standards. Don’t be disheartened if you can’t implement a design in a working solution because sometimes the designs are way ahead of what’s conceivable for code. That doesn’t mean it isn’t achievable just that a solution must be created where none might exist which is where you the developer comes in.
-
Always, always plan and in your plan separate things into components in a similar way to how the body has parts like the heart, lung, etc. I can’t stress enough how useful this will be for more complicated projects in the future.
-
Refuse to be dismayed or put down by the things you don’t get or the level you are at and keep working at it in an organized way. Carry on from this project and pass the other challenges then when you know more HTML, CSS, and JS revisit this challenge and make it better.
Again, I think your work is splendid. I honestly hope this helps for now and the future!!
Ah thank you! i understand what your saying, ORGANIZATION IS KEY! without organization, code is difficult to read, meaning errors in your code are difficult to find!