The Complete Intro to Web Dev v3, as taught on Frontend Masters
Home Page: https://frontendmasters.com/courses/web-development-v3/
Build your first web app with little code experience with industry veteran Brian Holt.
Course code icon created by Freepik - Flaticon
The code is this repo is licensed under the Apache 2.0 license.
The content is licensed under CC-BY-NC-4.0.
I'm having trouble opening the individual pages on https://btholt.github.io/complete-intro-to-web-dev-v3. Every time I try, I get an error message saying 'Application error: a client-side exception has occurred'.
I noticed that if I turn off JavaScript, the website works fine, but when JavaScript is enabled, it doesn't work properly. I've tried opening it on different browsers like Edge and Firefox, and even on my phone with mobile data, but I still have the same problem.
In the browser console, I saw some error messages like 'A resource is blocked by OpaqueResponseBlocking' and 'TypeError: window.klipse is undefined'. I'm not even sure what these mean, i'm new at this😅, but it seems like there's an issue with the website.
Could someone please look into this? Thanks!
I wrote this course to teach people to go from not knowing how to code to writing their first web applications. I feel like it's the best time ever to ever to enter the coding world because our tools are far better now than they used to be, meaning you write powerful apps today with just a few tools.
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/grid
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 10px;
column-gap: 10px;
}
.grid-picture {
margin: 0;
padding: 0;
}
The row and column gap values are the same but visually, I've noticed a difference. Upon inspecting, I found an external CSS class affecting it
.lesson-content img {
margin: 5px auto;
display: block;
}
It has been mentioned in the corresponding video that "// nothing necessary here" is false syntax for comments in CSS, but it's still like this within the first code snippet of the flex-grow paragraph of the flex section.
In the above example, the condition inside of the parens is evaluated and if it's true,
In the above example, the condition inside of the parentheses is evaluated, and if it's true,
Thus we can't use that inside of the if statement because that's not we mean.
Thus we can't use that inside of the if statement because that's not what we mean.
Our app div might a navbar, the news div, a footer, a sidebar, and other things.
It should be Our app might "have". The word have is missing.
This is in the paragraph right above the navigation code section in that page.
Cheers!
The reason your floats aren't adjacent in 03-css is because you have newlines between the divs.
The second div starts on a line of text below the start of the first.
You can test this a few ways e.g. by removing the newlines, adding more newlines, and putting them in a parent container with a different font size.
This is caused by the <pre> tag that the editor and results are in, since it makes newlines in the file newlines on the page.
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/flex
align-items
"So now we've shown you the justify-content property, let's examine align-items. justify-content worries about horizontal justification and align-items worries about vertical alignment."
When 'flex-direction' is set to its default value 'row'. if it's set to 'column,' these roles are reversed
There is a typo in https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/flex in the first paragraph
The word "to" has been doubled at the beginning of the second line.
Validate-word API request not working
https://words.dev-apis.com/validate-word
When making a post request, throws an error as :
{
"error": "unexpected end of JSON input"
}
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/pseudoclasses-and-pseudoelements
Pseudoelements
<div class="chapter">This is a chapter of my book.</div>
<div class="chapter">This is a second chapter of my book.</div>
<style>
.chapter p {
margin: 0;
}
.chapter::after {
content: "❦";
font-size: 50px;
text-align: center;
display: block;
}
</style>
there are no p tags within those elements in the given HTML
Not able to go on next row in "Word Master Project". It is changing last latter instead of goin on next row. Also class animations for .close is not working.
At the first paragraph.
"After the end of this course, you can reasoably expect to know how to code a website from scratch and be prepared to take more courses on the Frontend Masters beginner path."
I think you meant "reasonably" instead of "reasoably".
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/talking-to-servers/project
Use this function to test is a string is a single alphabetical string is a letter
should be
Use this function to test if a string is a single alphabetical letter
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/grid
"grid-template-column allows you you to set up how the grid is constructed. You can do it in percentages, pixels, or fr which stands for fractions. With with two 1fr we made it so each piece will take 50% of the space minus the gutters which it will calculate for you. If we did 1fr 2fr 1fr the first column would take 25%, the second 50%, the third 25%. The math works like flex-grow."
The word 'with' is repeated twice.
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/animations
Easing
.dancer {
position: relative;
display: inline-block;
font-size: 30px;
position: absolute;
right: 0;
/*
this is the log way of doing:
animation: move 1s infinite alternate;
*/
animation-name: move;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
position: relative;
position: absolute;
"this is the log way of doing"
long
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/putting-it-all-together/project
The secret to getting equal gutters (which is what you call the black space between buttons): you can set width to be 24.5% (so four of them fit on a line) and then use justify-cotent: space-between to evenly space them.
should be
The secret to getting equal gutters (which is what you call the black space between buttons): you can set width to be 24.5% (so four of them fit on a line) and then use justify-content: space-between to evenly space them.
Application error: a client-side exception has occurred (see the browser console for more information).
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/grid
grid-template-column allows you you to set up how the grid is constructed. You can do it in percentages, pixels, or fr which stands for fractions. With with two 1fr we made it so each piece will take 50% of the space minus the gutters which it will calculate for you.
should be
grid-template-column allows you you to set up how the grid is constructed. You can do it in percentages, pixels, or fr which stands for fractions. With two 1fr we made it so each piece will take 50% of the space minus the gutters which it will calculate for you.
Hi there! Theres a small mistake in this intro text. it should be "ever to enter", not "ever to ever to enter"
I wrote this course to teach people to go from not knowing how to code to writing their first web applications. I feel like it's the best time ever to
ever toenter the coding world because our tools are far better now than they used to be
should be
I wrote this course to teach people to go from not knowing how to code to writing their first web applications. I feel like it's the best time ever to enter the coding world because our tools are far better now than they used to be
It would be helpful if the hyperlinks within the Complete Intro to Web Development v3 course could open in a new tab. This would improve user experience by allowing users to open resources without navigating away from the course content. Otherwise, it's pretty annoying ^^
Thank you for considering this request!
Nev
Hello,
On the calculator, if you were to type 1 - 1 - 1 - 1, you would expect to get -2 but it returns 0.
I think it has something to do with the buffer re-setting to "0" when the running total is 0.
Shouldn't this word be "tag", instead of "attribute"?
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/layout-css
Laying Out Tags
"There are a few ways to accomplish layouts. We'll briefly discuss two: floats and flex. There is also grid, but it's still new which means a significant of people's computers don't support it and the best practices for it are still being ironed out. In addition, you don't need it right away."
there is a section about grid
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/grid
There is a blank section in the get-set-up page in the Welcome to the class video of HTML module where there is a heading named Other Recommendations but it is totally blank and there is nothing beneath it and leads to the next lesson.
The link and screenshot is below:-
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/welcome-to-the-class/get-set-up
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/flex
display: flex; is a display mode for CSS. It's to note that when you stick display: float, it allows you to to change the layout inside the tag.
should be
display: flex; is a display mode for CSS. It's to note that when you stick display: flex, it allows you to to change the layout inside the tag.
This is basically right-justified. Notice this is different from the reversed one about because the items stayed in the same order.
should be
This is basically right-justified. Notice this is different from the reversed one above because the items stayed in the same order.
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/talking-to-servers/ajax
Note that API is also used to describe how something is used. If I wrote a dog object in JavaScript and gave it two methods: eat() and bark(), you could those two methods its "API"...
should be
Note that API is also used to describe how something is used. If I wrote a dog object in JavaScript and gave it two methods: eat() and bark(), you could call those two methods its "API".
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/grid
In the very first paragraph, there's a typo in the sentence:
In short, grid is useful is more laying out a page (which are frequently grid-like) whereas flex is more flexible (if a bit more compliacted) and is more useful when you have more unique layouts to achieve.
Maybe the word was supposed to be in
This even works will large degrees of separation.
'will' should be replaced with 'with'.
This typo can be found here and is located under the 'Parents and Children' sub-header. :-)
Validate-word API request is giving an error and is broken
https://words.dev-apis.com/validate-word
When making a post request, throws an error as :
{
"error": "unexpected end of JSON input"
}
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/layout-css
layout-css
<style>
.ex-box {
border: 3px solid #aaa;
background-color: #eee;
height: 200px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
float: left;
margin-right: 10px;
border-radius: 5px;
font-size: 30px;
}
.ex-box:last-of-type {
clear: right;
}
</style>
<div class="ex-box">Box 1</div>
<div class="ex-box">Box 2</div>
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/talking-to-servers/json
Before we hoptoo much into the AJAX portion, ...
should be
Before we hop too much into the AJAX portion, ...
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/layout-css
Floats
"he idea behind float is you'll an element to push itself as far left or right as possible,"
you'll enable
The third sentence of the third paragraph currently reads:
"I have been coding for decades now and it tooks a lot of code to just eke out a bad little quiz app."
The word "tooks" should be replaced with the word "took," so that it reads:
"I have been coding for decades now and it took a lot of code to just eke out a bad little quiz app."
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/javascript/arrays
"You can have an array of numbers, an arry of strings, an array of objects, an array of arrays, an array of arrays of arrays, etc."
array
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/pseudoclasses-and-pseudoelements
Pseudoclasses
"The see we used for this is this:"
it should be
The CSS
(https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/layout-css)
inline – Like it sounds, it makes whatever the tag is behave like text. If you I want to style some text inline, this is how to do.
should be
inline – Like it sounds, it makes whatever the tag is behave like text. If you want to style some text inline, this is how to do it.
Floats
The old, bullet-proof of laying things is using a property called float. The idea behind float is you'll an element to push itself as far left or right as possible, and once it's out of space, go to the next line.
Suggestion:
Floats
The old, bullet-proof way of laying things out is by using a property called float. The idea behind float is that it allows an element to push itself as far left or right as possible, and once it's out of space, go to the next line.
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/flex
"display: flex; is a display mode for CSS. It's to note that when you stick display: float, it allows you to to change the layout inside the tag. It allows you to change the layout of its children. Externally, it acts just like block. Likewise there is a inline-flex which acts just like display: inline-block externally."
display: flex
In the HTML lesson on "Types of Tags", under the paragraph tag section, the text in the result window is going out of the output box.
The link and screenshot is attached here:-
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/html/types-of-tags
Enjoy !!!!
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/javascript/functions
"Now we rather than have to repeate ourselves"
repeat
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/flex
"We can tell the them to be left aligned,"
We can tell them to be left aligned,
Hi Brian, just started your course and I'm enjoying a lot, thanks! Just notice a minor detail, in the type-of-tags, when explaining the table, the result windows is showing a border solid (the cells line) but in the code there's no style defined.
Best!
| (0,0) | (1,0) |
| (0,1) | (1,1) |
https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/javascript/arrays
You first can see how we declare an array, using [ ]. Inside of an array, you can store anything you can store in a variable. You can have an array of numbers, an arry of strings, an array of objects, an array of arrays, an array of arrays of arrays, etc.
should be
You first can see how we declare an array, using [ ]. Inside of an array, you can store anything you can store in a variable. You can have an array of numbers, an array of strings, an array of objects, an array of arrays, an array of arrays of arrays, etc.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.